Upgrade to Pro — share decks privately, control downloads, hide ads and more …

How to optimize images for Better Web Design

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
Avatar for Masateru YOSHIMURA Masateru YOSHIMURA
October 30, 2020
Technology
2.2k
0

How to optimize images for Better Web Design

Webで使う画像について

Avatar for Masateru YOSHIMURA

Masateru YOSHIMURA

October 30, 2020

More Decks by Masateru YOSHIMURA

See All by Masateru YOSHIMURA
Digital Design 2022-02
Avatar for Masateru YOSHIMURA mathatelle
0
390
Digital Design 2022-01
Avatar for Masateru YOSHIMURA mathatelle
0
280
Yoshimura Lab. 2022
Avatar for Masateru YOSHIMURA mathatelle
0
1.4k
create-website-html-2021
Avatar for Masateru YOSHIMURA mathatelle
0
170
Multiple pages
Avatar for Masateru YOSHIMURA mathatelle
0
720
How to design the individual page
Avatar for Masateru YOSHIMURA mathatelle
1
130
CodePen: Making your portfolio 2021
Avatar for Masateru YOSHIMURA mathatelle
0
170
single page
Avatar for Masateru YOSHIMURA mathatelle
0
890
What is the design
Avatar for Masateru YOSHIMURA mathatelle
2
330

Other Decks in Technology

See All in Technology
QAタスクをスキル化したいときに考えること
Avatar for aomoriringo aomoriringo
0
180
AIQAのナレッジ構築について
Avatar for tonchan qatonchan
1
160
タクシーアプリ『GO』の実践的データ活用〜位置情報データの収集とStreamlitでの可視化〜
Avatar for GO Inc. dev mot_techtalk
2
200
組織にどうSREを根付かせるか？〜IVRyの場合〜
Avatar for abnoumaru abnoumaru
0
320
ウォーターフォール開発案件のPMとしてAI活用を模索している話
Avatar for da-hatakeyama hatahata021
3
310
Digitization部 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
2
7.7k
第3回しろおびセキュリティスポンサーセッション
Avatar for ogiogi log0417
0
140
Goでデータパイプラインを作ろう
Avatar for SansanTech sansantech
PRO
0
240
Pavlokで始める電撃駆動開発
Avatar for 佐藤陽威 sgrsn
0
170
【５分でわかる】セーフィー エンジニア向け会社紹介
Avatar for Safie safie_recruit
0
53k
『三匹の子ぶた』から学ぶネットワークセキュリティの昔と今 / Network Security: Then and Now Through the Lens of The Three Little Pigs
Avatar for NTT docomo Business nttcom
1
1.7k
AWS ネットワーク構築でハマった（ハマりかけた） 5選とそこから得た教訓
Avatar for nagisa_53 nagisa53
4
180

Featured

See All Featured
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.5k
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.5k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
470
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
8
36k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.1k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
1
360
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
250
HTML-Aware ERB: The Path to Reactive Rendering @ RubyCon 2026, Rimini, Italy
Avatar for Marco Roth marcoroth
3
400
Exploring anti-patterns in Rails
Avatar for Elle Meredith aemeredith
3
450
How to audit for AI Accessibility on your Front & Back End
Avatar for davetheseo davetheseo
0
480
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
980

Transcript

  1. 8FCͰ࢖͏ը૾

  2. 8FCαΠτͰը૾Λ࢖͏ཧ༝ ᶃ ݟͨ໨͕՚΍͔ʹͳΔ ᶄ ಺༰͕Θ͔Γ΍͘͢ͳΔ ͭ·Γɺ఻͍͑ͨ͜ͱ͕఻ΘΓ΍͘͢ͳΔɻ

  3. 8FCͰը૾Λ࢖͏ͱ͖ͷ஫ҙ఺ ᶃ σʔλྔ͸Ͱ͖ΔݶΓখ͘͞ʢ͍ܰʣ ˠେ͖͍ͱද͕ࣔ஗͘ͳΔʢॏ͘ͳΔʣɺ ɹར༻ऀʹ௨৴ෛՙΛ͔͚ͯ͠·͏ʢύέࢮʣ ᶄ ྑ͍ը࣭Ͱදࣔ͢Δ ˠσʔλྔͱͷόϥϯεΛΈͳ͕Β ɹ༻్ʹԠͯ͡࠷దԽ͢Δඞཁ͕͋Δ

  4. ಡΈํ ֦ுࢠ ը࣭ ಁա ༻్ +1&( δΣΠϖά KQH ྼԽ͢Δ ಁաͰ͖ͳ͍

    ࣸਅ 1/( ϐϯά .png ྼԽ͠ͳ͍ ಁաͰ͖Δ ϩΰɺਤͳͲ ৭਺͕গͳ͍΋ͷ 8FCͰ࢖͏ը૾ͷछྨ ͦͷ΄͔8FC1΍47(ɺ(*'ͳͲͷܗ͕ࣜ͋Δ͕ɺ͜ͷतۀͰ͸ѻΘͳ͍ɻ ͜ͷतۀͰ͸ࣸਅΛ࢖͏ࣄ͕ଟ͍ͷͰɺ+1&(ܗࣜΛ࢖͏͜ͱ͕ϝΠϯͱͳΔɻ কདྷతʹ͸8FC1͕ελϯμʔυͳܗࣜʹͳΔͱݴΘΕ͍ͯΔɻ ࣸਅΛ1/(ܗࣜʹ͢Δͱ σʔλྔ͕େ͖͘ͳΔέʔε͕ଟ͍ͨΊ ࣸਅΛ1/(ܗࣜʹ͠ͳ͍͜ͱʂ

  5. ը૾αΠζͷ࠷దԽ ෯ QYߴ͞ QYσʔλྔ.# ෯ QYߴ͞QY σʔλྔ,# ύιίϯ΍εϚϗͷϞχλͰ͸ ͜ͷαΠζͰे෼͖Ε͍ʹݟ͑ΔͷͰ খ͔ͯ͘͞͠Βར༻͢Δ

    J1IPOFͰࡱӨͨ͠ΦϦδφϧͷαΠζ ͜ͷ৔߹ σʔλྔ͸ ʹ ϊʔτ1$ͷը໘෯͸ QYલޙ ॖখ͢Ε͹

  6. ʁͳ͜ͱ͸(PPHMFݕࡧͰ ͍͍ͩͨղܾͰ͖Δ 8FC༻ͷը૾ʹ͍ͭͯ͸ɺ8FC্ʹେྔͷ৘ใ͕͋Γ·͢ɻ (PPHMFͰݕࡧ͠ɺ౴͑Λࣗ෼Ͱݟ͚ͭग़ͤΔΑ͏ʹ͠·͠ΐ͏ɻ ࣗ෼ͰղܾͰ͖ΔΑ͏ʹͳΔͱɺࣗश͕ḿΓϝΩϝΩͱ্ୡ͠·͢ɻ