対象 ・フロントエンドよりのエンジニアさん ・デザイナーといつも一緒に仕事をするけど、「なに言ってるかわからない」とストレスをためてる方 ・photoshopとか少し興味ある方

1. 画像編集のTOPICS.15
小五月蝿いデザイナーに「いいじゃん」と言わせる
+1

2. このお話の対象者
• フロントエンドよりのエンジニアさん
• デザイナーといつも一緒に仕事をするけど、「なに
言ってるかわからない」とストレスをためてる方
• photoshopとか少し興味ある方

3. • 自己紹介
• 基本編(知ってる人は飛ばしてください)
• 応用編(自身が実務で使っていました)
• 追求編(知識として知っておいてもいいかも？)
もくじ

4. 基本編
最低限知っておこう、知ってる人はとばしてください

5. 色数が多い時
画像書き出し

6. JPEGが適しています
JPG PNG
なめらか ざらつく
階調が鮮やかです

7. 色数が少ない時
画像書き出し

8. PNG8が優れています
JPG PNG
11.49KB 1.675KB
ファイルサイズが軽量です
8ビットカラー（256色）。１色のみ透過化

9. 画質を落とせない時
画像書き出し

10. PNG24が優れています
非可逆圧縮です
24ビットカラー（フルカラー）。透過不可
PNG24

11. 透過を重ねる
画像書き出し

12. PNG32が優れています
透過の情報を持っています
32ビットカラー（フルカラー）。透過可
PNG8 PNG32
フチがギザギザ なめらかな階調

13. 色数が少ない
かつ、透過を重ねる
画像書き出し

14. PNG8+アルファチャンネルが優れています
書き出しに対応していないアプリケーションが多いので注意(フォトショとか)
8ビットカラー（256色）。透過可
PNG8 PNG8+アルファ
影が抜けていない 影が透過している

15. GIFはやめとく
画像書き出し

16. 応用編
実際に実務でつかったトピックス

17. PNG8の色数は絞る

18. 256色使い切る必要は殆ど無いです
フラットデザインの台頭で傾向が加速
減色は画像パフォーマンスを考える基本です
32色 256色
2.3KB 5.1KB

19. メタ情報は消す

20. EXIFなど、余計なメタ情報は削除します
ImageOptimが便利です
見られて嬉しいメタ情報は殆ど無いです。。。

21. ウェブフォント化の
メリット

22. 色・サイズが自由自在です
httpリクエストも減ります
「また、サイズ違いのアイコンだ、、、」といつも悩む現場へ

23. PNG8(＋アルファ)を
効率よく圧縮

24. PNGQUANTがオススメです
コマンドラインからPNGを高圧縮
Gruntから自動化も
$ pngquant [options] [色数] [ファイル名]
before after
57％削減

25. RETINA(JPG)は
低画質×高解像度画像

26. 2倍画像を低画質で書き出しましょう
デバイス別、パフォーマンスと画質のトレードオフを吸収
640x480 画質30
Retinaでも、それ以外の端末でも同等に綺麗
320x240 画質90

27. 追求編
使えるかは別として、知っといて損はない

28. 8PXのグリッド

29. JPGは8PXのグリッドに沿うと美しい
jpgは8x8のブロック単位で圧縮されています(サムネイルなどは8の倍数で)
ファイルサイズも削減される

30. BASE64化

31. 小さい画像はBASE64化
リストマーカーなど頻出する小さい画像などに
httpリクエスト数を削減
background: url(data:image/png;base64,xxxxxx...) no-repeat;

32. 縮小で画像を
暗くしない

33. ガンマ値1.0になるように明るさを上げる
縮小時元の画像より暗く見えるのは、人間と機械の眼の差のせい
通常のデフォルト値では、縮小で画像が暗くなる場合が多いです

34. IMAGEMAGICK
のオプションを見直す

35. 前述のトピックを元にオプション見直し
etc
画質を調整
-quality
色数を削減
-colors
画像のコントラストを強調
-equalize
アンシャープマスク
-unsharp

36. TOPICS +1
一番大切なこと

37. デザイナーだけでも
エンジニアだけでも
辿りつけない領域がある

38. 役割を超えた
“共創”
が一番大切

39. 「いいじゃん」
リブセンスは、共創できるエンジニア・デザイナーを募集しています

40. 資料はこちらです
HTTP://