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
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
700
How to design the individual page
Avatar for Masateru YOSHIMURA mathatelle
1
100
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
今改めてServiceクラスについて考える 〜あるRails開発者の10年〜
Avatar for Tomohiro Hashidate joker1007
20
8.9k
Sidekiq その前に：Webアプリケーションにおける非同期ジョブ設計原則
Avatar for morihirok morihirok
17
6.2k
いま注目しているデータエンジニアリングの論点
Avatar for Ikki Miyazaki ikkimiyazaki
0
530
履歴 on Rails: Bitemporal Data Modelで実現する履歴管理/history-on-rails-with-bitemporal-data-model
Avatar for hypermkt hypermkt
0
1.7k
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
Avatar for arap / 0air 0air
0
180
2重リクエスト完全攻略HANDBOOK / Double Request Handbook
Avatar for ShoheiMitani shoheimitani
5
7.1k
analysis パッケージの仕組みの上でMulti linter with configを実現する / Go Conference 2025
Avatar for Ken’ichiro Oyama k1low
1
240
Modern_Data_Stack最新動向クイズ_買収_AI_激動の2025年_.pdf
Avatar for Sagara sagara
0
120
Why React!?? Next.jsそしてReactを改めてイチから選ぶ
Avatar for ypresto ypresto
9
3.6k
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
Avatar for BrainPad brainpadpr
21
13k
全てGoで作るP2P対戦ゲーム入門
Avatar for ponyo877 ponyo877
3
1.2k
API提供者のためのMCPサーバー設計ガイド / MCP Server Design Guide for API Providers
Avatar for Yoichi Kawasaki yokawasa
0
230

Featured

See All Featured
Writing Fast Ruby
Avatar for Erik Berlin sferik
629
62k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
70
4.8k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.7k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
127
53k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
280
23k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
339
57k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.2k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
30
2.9k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
54
11k

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