Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
写真を PNG で上げるな
Search
kysn
February 15, 2019
Design
0
380
写真を PNG で上げるな
社内の LT 大会で発表した適切な形式で画像を取扱いましょう、という話
kysn
February 15, 2019
Tweet
Share
More Decks by kysn
See All by kysn
FF14のすゝめ
kysnrm
0
150
Canvas 2D + Vue.js で作るインタラクションコントローラー
kysnrm
1
1.8k
「デザイナー数名」から「デザインチーム」になるために
kysnrm
4
1.5k
FFTT #359 UIとUXの関係
kysnrm
2
670
Other Decks in Design
See All in Design
ダークテーマとアクセシビリティ の融合したカラートークンの設計
degudegu2510
0
280
豊かな自然を守るための、 クラフトビール造りのプロジェクトとデザイン
kazuakiebe
0
440
20240120_画像生成AI_NovelAI入門・情報収集
doradora09
0
110
Apple提供アプリのナビゲーションバーアイテムクイズ / 20231110-hig
uhooi
1
170
Goodpatch Tour💙 / We are hiring!
goodpatch
28
690k
231129_FOSS4G-ASIA-2023_kato
hjmkth
0
300
The Fight
euralisw
0
110
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.7k
Designing UIs without a UI designer
strongeron
0
110
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
3
590
採用広報大会議登壇スライド
teamlab
PRO
1
190
Wishing Star Comic
torije
2
1.1k
Featured
See All Featured
Making Projects Easy
brettharned
107
5.5k
From Idea to $5000 a Month in 5 Months
shpigford
377
45k
The MySQL Ecosystem @ GitHub 2015
samlambert
242
12k
Rails Girls Zürich Keynote
gr2m
91
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
10
4.5k
Infographics Made Easy
chrislema
237
18k
No one is an island. Learnings from fostering a developers community.
thoeni
14
2.1k
A better future with KSS
kneath
230
16k
Code Reviewing Like a Champion
maltzj
513
39k
10 Git Anti Patterns You Should be Aware of
lemiorhan
645
57k
For a Future-Friendly Web
brad_frost
171
8.9k
Being A Developer After 40
akosma
56
580k
Transcript
写真を PNG で上げるな 2019.02.15 FFLT#15 rmorioka
森岡瞭太 リラックススペースの主 荷解きはち ょ っと進んだ
前提 速さは正義 画像には色々な形式がある 形式によって得意不得意がある
速さは正義
https://www.thinkwithgoogle.com/ marketing-resources/data-measurement/ mobile-page-speed-new-industry-benchmarks/ 読み込みに 6 秒かかると 直帰率は2倍に
なぜ速さは正義なのか 読み込みに時間かかるほど直帰率が上がる UI 改善するとかユーザーフロー見直すよりも 速度上げたほうがユーザーのためになると思う(持論) SEO 的にも重要
何が遅く しているのか 主に画像 実際は JS とか CSS とかレンダリングとか色々関係してる 正直森岡はこの辺りは専門外です そもそもブログサービスなんかの場合は↑の改善には限界がある
なら画像を軽く するしかない
画像には 色々な形式がある
代表的な形式 JPG PNG8 / PNG24 / PNG32 GIF SVG WebP
実際はもっと色々あるけど、 ざっ く りこの辺を知っておく と良い
形式には 得意不得意がある
JPG 非可逆圧縮(劣化する) 圧縮率という概念がある(85%く らいが丁度良い) グラデーションや細かな色調のあるもの向き 色数の少ない画像だと劣化が目立つ 透明は表現できない 写真はほぼ思考停止で jpg でおk
PNG8 可逆圧縮(劣化しない) 画像内の色数が 8bit(256 色)までなので 8 色数の少ない画像向き 透明も表現できる ロゴ、図、シンプルなイラストなど 実は白黒写真なら色数が足りるのでアリ
PNG24 可逆圧縮 画像内の色数が 24bit(1677 万色)までなので 24 キレイだがとにかく重い 透明は表現できない あまり使い所が思いつかない 速度度外視で画質を優先したい場面なら
PNG32 透明を表現できる png24 32bit ではなく 24bit の色と 8bit の透明度 どうしても透明を使いたければ……?
GIF 可逆圧縮 8bit 動画もいける 透明も表現できる ただし半透明はダメ 動画にしたければ
SVG ベクター画像 通常の画像はド ッ トの集合 ベクター画像は座標で表現される とても軽い シンプルな図形やロゴならこれ 実は中に css
書けるので、 レスポンシブな画像とかにもできる(非推奨)
SVG ベクター画像 通常の画像はド ッ トの集合 ベクター画像は座標で表現される とても軽い シンプルな図形やロゴならこれ 実は中に css
書けるので、 レスポンシブな画像とかにもできる(非推奨)
WebP Google が開発している新規格 非可逆圧縮 jpg より軽い 透明も扱える 対応ブラウザ、ソフ トがまだ少ない 将来に期待
写真比較 JPG 100% 2.2MB JPG 85% 1.5MB PNG8 3.1MB PNG24
5.4MB WebP 154KB
イラスト比較 JPG 100% 632KB JPG 85% 617KB PNG8 6KB PNG24
12KB WebP 4KB SVG 10KB
まとめ 写真は jpg で上げよう ロゴとか図は png8 で 具体的にどう作業すれば良いのかは別の機会に