Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

How to optimize images for Better Web Design

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
400
Digital Design 2022-01
Avatar for Masateru YOSHIMURA mathatelle
0
290
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
730
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
900
What is the design
Avatar for Masateru YOSHIMURA mathatelle
2
340

Other Decks in Technology

See All in Technology
品質と信頼性を地続きにする
Avatar for gr1m0h grimoh
0
380
白金鉱業Meetup Vol.25 アウトカムが二値のデータに対するCausal Impact
Avatar for BrainPad brainpadpr
0
190
すぐできる衛星通信対応 あとは山奥に行くだけ
Avatar for tatetate55 tatetate55
0
130
aws-iot-platform-architecture-use-cases.pdf
Avatar for Kohei "Max" MATSUSHITA ma2shita
0
110
OpenTelemetryのメトリクスをCloudWatchに送ってPromQLで見てみた
Avatar for Itaru Ota ota1022
0
150
Claude Codeを「使うほど育つ」AI秘書にするノウハウ
Avatar for みのるん minorun365
PRO
27
20k
研究開発部の紹介 / Sansan R&D Profile
Avatar for Sansan, Inc. sansan33
PRO
5
25k
Screen Lens - 今見てる画面を翻訳する
Avatar for komagata komagata
0
290
フルカイテン株式会社 エンジニア向け採用資料
Avatar for FULL KAITEN fullkaiten
0
12k
アプリをもっと"iOSアプリっぽく"する小さな工夫 / Small Touches That Make Your App Feel More Like an iOS App
Avatar for matsuji matsuji
1
890
range over func 2年間の軌跡 Issue #56413 はGoのエコシステムをどう変えたか
Avatar for Ryuji Kokubu ryujicre8ive
0
190
アクセスキーこわい やめかたと漏らさない工夫
Avatar for Yuichi Sato sassssan68
1
210

Featured

See All Featured
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
75
12k
Utilizing Notion as your number one productivity tool
Avatar for Mfonobong Umondia mfonobong
4
590
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
280
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
672
58k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
520
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
2
3.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.3k
How to make the Groovebox
Avatar for あそなす asonas
2
2.4k

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Ͱݕࡧ͠ɺ౴͑Λࣗ෼Ͱݟ͚ͭग़ͤΔΑ͏ʹ͠·͠ΐ͏ɻ ࣗ෼ͰղܾͰ͖ΔΑ͏ʹͳΔͱɺࣗश͕ḿΓϝΩϝΩͱ্ୡ͠·͢ɻ