Successfully reported this slideshow.
Your SlideShare is downloading. ×

小五月蝿いデザイナーに「いいじゃん」て言わせる【画像編集のTOPICS15】

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 40 Ad

小五月蝿いデザイナーに「いいじゃん」て言わせる【画像編集のTOPICS15】

Download to read offline

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

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

Advertisement
Advertisement

More Related Content

Viewers also liked (20)

More from Tsuyoshi Kaneko (19)

Advertisement

Recently uploaded (20)

Advertisement

小五月蝿いデザイナーに「いいじゃん」て言わせる【画像編集のTOPICS15】

  1. 1. 画像編集のTOPICS.15 小五月蝿いデザイナーに「いいじゃん」と言わせる +1
  2. 2. このお話の対象者 • フロントエンドよりのエンジニアさん • デザイナーといつも一緒に仕事をするけど、「なに 言ってるかわからない」とストレスをためてる方 • photoshopとか少し興味ある方
  3. 3. • 自己紹介 • 基本編(知ってる人は飛ばしてください) • 応用編(自身が実務で使っていました) • 追求編(知識として知っておいてもいいかも?) もくじ
  4. 4. 基本編 最低限知っておこう、知ってる人はとばしてください
  5. 5. 色数が多い時 画像書き出し
  6. 6. JPEGが適しています JPG PNG なめらか ざらつく 階調が鮮やかです
  7. 7. 色数が少ない時 画像書き出し
  8. 8. PNG8が優れています JPG PNG 11.49KB 1.675KB ファイルサイズが軽量です 8ビットカラー(256色)。1色のみ透過化
  9. 9. 画質を落とせない時 画像書き出し
  10. 10. PNG24が優れています 非可逆圧縮です 24ビットカラー(フルカラー)。透過不可 PNG24
  11. 11. 透過を重ねる 画像書き出し
  12. 12. PNG32が優れています 透過の情報を持っています 32ビットカラー(フルカラー)。透過可 PNG8 PNG32 フチがギザギザ なめらかな階調
  13. 13. 色数が少ない かつ、透過を重ねる 画像書き出し
  14. 14. PNG8+アルファチャンネルが優れています 書き出しに対応していないアプリケーションが多いので注意(フォトショとか) 8ビットカラー(256色)。透過可 PNG8 PNG8+アルファ 影が抜けていない 影が透過している
  15. 15. GIFはやめとく 画像書き出し
  16. 16. 応用編 実際に実務でつかったトピックス
  17. 17. PNG8の色数は絞る
  18. 18. 256色使い切る必要は殆ど無いです フラットデザインの台頭で傾向が加速 減色は画像パフォーマンスを考える基本です 32色 256色 2.3KB 5.1KB
  19. 19. メタ情報は消す
  20. 20. EXIFなど、余計なメタ情報は削除します ImageOptimが便利です 見られて嬉しいメタ情報は殆ど無いです。。。
  21. 21. ウェブフォント化の メリット
  22. 22. 色・サイズが自由自在です httpリクエストも減ります 「また、サイズ違いのアイコンだ、、、」といつも悩む現場へ
  23. 23. PNG8(+アルファ)を 効率よく圧縮
  24. 24. PNGQUANTがオススメです コマンドラインからPNGを高圧縮 Gruntから自動化も $ pngquant [options] [色数] [ファイル名] before after 57%削減
  25. 25. RETINA(JPG)は 低画質×高解像度画像
  26. 26. 2倍画像を低画質で書き出しましょう デバイス別、パフォーマンスと画質のトレードオフを吸収 640x480 画質30 Retinaでも、それ以外の端末でも同等に綺麗 320x240 画質90
  27. 27. 追求編 使えるかは別として、知っといて損はない
  28. 28. 8PXのグリッド
  29. 29. JPGは8PXのグリッドに沿うと美しい jpgは8x8のブロック単位で圧縮されています(サムネイルなどは8の倍数で) ファイルサイズも削減される
  30. 30. BASE64化
  31. 31. 小さい画像はBASE64化 リストマーカーなど頻出する小さい画像などに httpリクエスト数を削減 background: url(data:image/png;base64,xxxxxx...) no-repeat;
  32. 32. 縮小で画像を 暗くしない
  33. 33. ガンマ値1.0になるように明るさを上げる 縮小時元の画像より暗く見えるのは、人間と機械の眼の差のせい 通常のデフォルト値では、縮小で画像が暗くなる場合が多いです
  34. 34. IMAGEMAGICK のオプションを見直す
  35. 35. 前述のトピックを元にオプション見直し etc 画質を調整 -quality 色数を削減 -colors 画像のコントラストを強調 -equalize アンシャープマスク -unsharp
  36. 36. TOPICS +1 一番大切なこと
  37. 37. デザイナーだけでも エンジニアだけでも 辿りつけない領域がある
  38. 38. 役割を超えた “共創” が一番大切
  39. 39. 「いいじゃん」 リブセンスは、共創できるエンジニア・デザイナーを募集しています
  40. 40. 資料はこちらです HTTP://

×