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

How to optimize images for Better Web Design

Masateru YOSHIMURA
October 30, 2020
Technology
0
2.1k

How to optimize images for Better Web Design

Webで使う画像について

Masateru YOSHIMURA

October 30, 2020
Tweet

More Decks by Masateru YOSHIMURA

See All by Masateru YOSHIMURA
Digital Design 2022-02
mathatelle
0
340
Digital Design 2022-01
mathatelle
0
240
Yoshimura Lab. 2022
mathatelle
0
1.3k
create-website-html-2021
mathatelle
0
110
Multiple pages
mathatelle
0
650
How to design the individual page
mathatelle
1
69
CodePen: Making your portfolio 2021
mathatelle
0
120
single page
mathatelle
0
840
What is the design
mathatelle
2
260

Other Decks in Technology

See All in Technology
Além do else! Categorizando Pokemóns com Pattern Matching no JavaScript
wmsbill
0
650
Building a RAG-powered AI chat app with Python and VS Code
pamelafox
0
120
プラットフォームってつくることより計測することが重要なんじゃないかという話 / Platform Engineering Meetup #8
taishin
1
380
開発パフォーマンスを最大化するための開発体制
ham0215
2
470
20分で完全に理解するGrafanaダッシュボード
hamadakoji
3
760
私が trocco を推す理由
__allllllllez__
1
270
エンジニアのキャリアをちょっと楽しくする3本の軸/Three Pillars to Make an Engineer's Career More Enjoyable
kwappa
0
2.8k
開発生産性大幅アップ！Postman VS Code拡張機能
nagix
2
490
Cracking the KubeCon CfP
inductor
2
250
IaCジェネレーターとBedrockで詳細設計書を生成してみた
tsukasa_ishimaru
3
630
アクセス制御にまつわる改善 / Improving access control
itkq
0
560
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな（2024年版）
infiniteloop_inc
4
16k

Featured

See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.6k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
Build The Right Thing And Hit Your Dates
maggiecrowley
24
2k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
20
1.9k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
Music & Morning Musume
bryan
41
5.6k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
30
6k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.9k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Designing the Hi-DPI Web
ddemaree
276
33k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k

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