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

How to optimize images for Better Web Design

Avatar for Masateru YOSHIMURA Masateru YOSHIMURA
October 30, 2020
Technology
0
2.1k

How to optimize images for Better Web Design

Webで使う画像について
Avatar for Masateru YOSHIMURA

Masateru YOSHIMURA

October 30, 2020
Tweet

More Decks by Masateru YOSHIMURA

See All by Masateru YOSHIMURA
Digital Design 2022-02
Avatar for Masateru YOSHIMURA mathatelle
0
370
Digital Design 2022-01
Avatar for Masateru YOSHIMURA mathatelle
0
260
Yoshimura Lab. 2022
Avatar for Masateru YOSHIMURA mathatelle
0
1.3k
create-website-html-2021
Avatar for Masateru YOSHIMURA mathatelle
0
150
Multiple pages
Avatar for Masateru YOSHIMURA mathatelle
0
690
How to design the individual page
Avatar for Masateru YOSHIMURA mathatelle
1
99
CodePen: Making your portfolio 2021
Avatar for Masateru YOSHIMURA mathatelle
0
140
single page
Avatar for Masateru YOSHIMURA mathatelle
0
870
What is the design
Avatar for Masateru YOSHIMURA mathatelle
2
290

Other Decks in Technology

See All in Technology
OpenTelemetry SpanProcessor を Let's カスタマイズ！
Avatar for Tomonori Hayashi phaya72
1
110
開発も運用もビジネス部門も！ クラウドで実現する「つらくない」統制とセキュリティ / Effortless Governance and Security Enabled by the Cloud
Avatar for Hokuto Hoshi kanny
3
830
ワールドカフェ再び、そしてロール・ツール群の開発 / World Café Again, and the Development of a Suite of Roles and Tools
Avatar for Kenji Saito ks91
PRO
0
110
NAB Show 2025 動画技術関連レポート / NAB Show 2025 Report
Avatar for CyberAgent cyberagentdevelopers
PRO
1
190
LLMベースAIの基本 / basics of LLM based AI
Avatar for Naoki Kishida kishida
9
2.4k
ホワイトボックス& SONiC アーキテクチャ（全体像） - SONiC Workshop Japan 2025
Avatar for ebiken ebiken
PRO
1
460
マーケットプレイス版Oracle WebCenter Content For OCI
Avatar for oracle4engineer oracle4engineer
PRO
3
740
人間性を捧げる生成AI時代の技術選定
Avatar for yo4raw yo4raw
2
1.2k
Software Delivery Observability CI・CD , DORA metrics も Datadog で可視化しよう / datadog-ci-cd-observability
Avatar for Annosuke Yokoo parupappa2929
0
200
VueUseから学ぶ実践TypeScript #TSKaigi #TSKaigi2025
Avatar for 弁護士ドットコム bengo4com
3
370
ゆるくはじめるSLI・SLO
Avatar for Mirai Yato (yato) yatoum
1
150
Cline&CursorによるAIコーディング徹底活用―Live Vibe Coding付き
Avatar for PharmaX（旧YOJO Technologies）開発チーム pharma_x_tech
3
790

Featured

See All Featured
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
6
570
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
205
24k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
180
53k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
69
4.6k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
19
1.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
105
19k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.5k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
177
9.7k
Fireside Chat
Avatar for paigeccino paigeccino
37
3.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
52
2.7k

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