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
380
Digital Design 2022-01
Avatar for Masateru YOSHIMURA mathatelle
0
270
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
710
How to design the individual page
Avatar for Masateru YOSHIMURA mathatelle
1
110
CodePen: Making your portfolio 2021
Avatar for Masateru YOSHIMURA mathatelle
0
150
single page
Avatar for Masateru YOSHIMURA mathatelle
0
880
What is the design
Avatar for Masateru YOSHIMURA mathatelle
2
310

Other Decks in Technology

See All in Technology
手を動かしながら学ぶデータモデリング - 論理設計から物理設計まで / Data modeling
Avatar for soudai sone soudai
PRO
24
5.1k
今、MySQLのバックアップを作り直すとしたら何がどう良いのかを考える旅
Avatar for yoku0825 yoku0825
0
260
マイクロリブート ~ACEマインドセットで実現するアジャイル~
Avatar for ソニー株式会社 sony
1
340
Dart and Flutter MCP serverで実現する AI駆動E2Eテスト整備と自動操作
Avatar for Yuki Sakai yukisakai1225
0
440
「O(n log(n))のパフォーマンス」の意味がわかるようになろう
Avatar for dhirabayashi dhirabayashi
0
140
Redux → Recoil → Zustand → useSyncExternalStore： 状態管理の10年とReact本来の姿
Avatar for ZOZO Developers zozotech
PRO
14
7.1k
Master Dataグループ紹介資料
Avatar for Sansan, Inc. sansan33
PRO
1
3.9k
バクラクの AI-BPO を支える AI エージェント 〜とそれを支える Bet AI Guild〜
Avatar for Tomoaki tomoaki25
2
740
re:Invent完全攻略ガイド
Avatar for JunjiKoide junjikoide
1
310
はじめての OSS コントリビューション 〜小さな PR が世界を変える〜
Avatar for Chihiro Ito chiroito
4
280
隙間ツール開発のすすめ / PHP Conference Fukuoka 2025
Avatar for meihei meihei3
0
430
【M3】攻めのセキュリティの実践！プロアクティブなセキュリティ対策の実践事例
Avatar for mizu axelmizu
0
130

Featured

See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
253
22k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.7k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
348
40k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
192
56k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.2k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
4.9k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
333
24k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
33
1.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
34
2.3k

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