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

How to optimize images for Better Web Design

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
160
Multiple pages
Avatar for Masateru YOSHIMURA mathatelle
0
720
How to design the individual page
Avatar for Masateru YOSHIMURA mathatelle
1
120
CodePen: Making your portfolio 2021
Avatar for Masateru YOSHIMURA mathatelle
0
160
single page
Avatar for Masateru YOSHIMURA mathatelle
0
890
What is the design
Avatar for Masateru YOSHIMURA mathatelle
2
320

Other Decks in Technology

See All in Technology
情シスがMCP環境導入時に打ちのめされる認可の崖
Avatar for OpenID Foundation Japan oidfj
0
300
freee-mcpを Local→Remote で出してわかった MCP認可実装のリアル
Avatar for てらら terara
2
500
ANDPAD Ruby sponsor session in RubyKaigi 2026
Avatar for ANDPAD inc andpad
0
130
TSKaigi 2026 - enumよ、さようなら
Avatar for teamLab teamlab
PRO
2
440
AI Agent に“攻略本”を渡したら、150フォームの移行が回り始めた話/登壇資料（高橋 悟生）
Avatar for Hacobu hacobu
PRO
1
370
論文紹介：Pixal3D (SIGGRAPH 2026)
Avatar for TakatoYoshikawa tenten0727
0
700
Orchestration Development Workshopを半期実施して
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
330
Pythonでベイズモデリング
Avatar for Soogie soogie
0
170
既存プロダクトQAから新規プロダクトQAへ
Avatar for hashi ryotakahashi
0
180
インプロセスQAのための要因から捉えるプロジェクトリスクマネジメントnano #1 開発リソース効率状態への対処 #jasstnano
Avatar for barus_qa_dev barus_qa
0
230
ラズパイ & Picoで入門：Zephyr(RTOS)の環境構築からビルドまでの紹介
Avatar for misoji engineer iotengineer22
0
200
AWSアップデートから考える継続的な運用改善
Avatar for Toru_Kubota toru_kubota
2
360

Featured

See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
25
1.9k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
190
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
140
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
200
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
9
900
Google's AI Overviews - The New Search
Avatar for Barry Adams badams
0
1k
Done Done
Avatar for chrislema chrislema
186
16k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
170
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
150
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
200
First, design no harm
Avatar for Per Axbom axbom
PRO
2
1.2k

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