写真を PNG で上げるな

社内の LT 大会で発表した適切な形式で画像を取扱いましょう、という話

Transcript

1. 写真を PNG で上げるな 2019.02.15 FFLT#15 rmorioka
2. 森岡瞭太 リラックススペースの主 荷解きはち ょ っと進んだ
3. 前提 速さは正義 画像には色々な形式がある 形式によって得意不得意がある
4. 速さは正義
5. https://www.thinkwithgoogle.com/ marketing-resources/data-measurement/ mobile-page-speed-new-industry-benchmarks/ 読み込みに 6 秒かかると 直帰率は２倍に
6. なぜ速さは正義なのか 読み込みに時間かかるほど直帰率が上がる UI 改善するとかユーザーフロー見直すよりも 速度上げたほうがユーザーのためになると思う（持論） SEO 的にも重要
7. 何が遅く しているのか 主に画像 実際は JS とか CSS とかレンダリングとか色々関係してる 正直森岡はこの辺りは専門外です そもそもブログサービスなんかの場合は↑の改善には限界がある なら画像を軽く するしかない
8. 画像には 色々な形式がある
9. 代表的な形式 JPG PNG8 / PNG24 / PNG32 GIF SVG WebP 実際はもっと色々あるけど、 ざっ く りこの辺を知っておく と良い
10. 形式には 得意不得意がある
11. JPG 非可逆圧縮（劣化する） 圧縮率という概念がある（85%く らいが丁度良い） グラデーションや細かな色調のあるもの向き 色数の少ない画像だと劣化が目立つ 透明は表現できない 写真はほぼ思考停止で jpg でおｋ
12. PNG8 可逆圧縮（劣化しない） 画像内の色数が 8bit（256 色）までなので 8 色数の少ない画像向き 透明も表現できる ロゴ、図、シンプルなイラストなど 実は白黒写真なら色数が足りるのでアリ
13. PNG24 可逆圧縮 画像内の色数が 24bit（1677 万色）までなので 24 キレイだがとにかく重い 透明は表現できない あまり使い所が思いつかない 速度度外視で画質を優先したい場面なら
14. PNG32 透明を表現できる png24 32bit ではなく 24bit の色と 8bit の透明度 どうしても透明を使いたければ……？
15. GIF 可逆圧縮 8bit 動画もいける 透明も表現できる ただし半透明はダメ 動画にしたければ
16. SVG ベクター画像 通常の画像はド ッ トの集合 ベクター画像は座標で表現される とても軽い シンプルな図形やロゴならこれ 実は中に css 書けるので、 レスポンシブな画像とかにもできる（非推奨）
17. SVG ベクター画像 通常の画像はド ッ トの集合 ベクター画像は座標で表現される とても軽い シンプルな図形やロゴならこれ 実は中に css 書けるので、 レスポンシブな画像とかにもできる（非推奨）
18. WebP Google が開発している新規格 非可逆圧縮 jpg より軽い 透明も扱える 対応ブラウザ、ソフ トがまだ少ない 将来に期待
19. 写真比較 JPG 100% 2.2MB JPG 85% 1.5MB PNG8 3.1MB PNG24 5.4MB WebP 154KB
20. イラスト比較 JPG 100% 632KB JPG 85% 617KB PNG8 6KB PNG24 12KB WebP 4KB SVG 10KB
21. まとめ 写真は jpg で上げよう ロゴとか図は png8 で 具体的にどう作業すれば良いのかは別の機会に