Upgrade to Pro — share decks privately, control downloads, hide ads and more …

写真をWebで表示させよう

Fc3c7542bb05937f27f146b3e893cfd1?s=47 hibikikudo
October 06, 2017

 写真をWebで表示させよう

2017/09/27(水)
@Iret株式会社
【デ部会】初心者歓迎! 第6回 撮影から実装まで、webデザインにまつわる写真の1・2・3 登壇資料
https://devkai.connpass.com/event/64677/

Fc3c7542bb05937f27f146b3e893cfd1?s=128

hibikikudo

October 06, 2017
Tweet

Transcript

  1. 写真をWebで表示させよう!

  2. qiita@hibikikudo

  3. 今日お話しすること 様々な画像形式~JPEGについて 画像をHTMLで実装する - webサイトの品質とは - ハイ・パフォーマンスを実現するテクニック ※デザイナーさん向けの内容です

  4. 1. 画像ファイル形式の 特徴を知る

  5. なるほど… JPEG PNG GIF BMP SVG RAW TIFF

  6. 写真をwebで表示するならJPEG

  7. JPEGͷಛ௃ フルカラー(約1,677万色)を扱える 高い圧縮率=ファイルが軽い ブロックノイズ ISO団体が作り特許使用料をとらなかった
 (The Joint Photographic Experts Group)

  8. None
  9. ブロックノイズ

  10. 動画の静止画もJPEG(JPEG2000)

  11. JPEGの苦手なこと コマ送りアニメーションしたい→GIF 背景を透過させたい→PNG どんな解像度でもくっきり表示→SVG 他のファイル形式とうまく分業させよう!

  12. 新しい画像フォーマット HEIF  => Appleが開発。iPhone7~Xに搭載 WebP(ウェッピー)  => Googleが開発。Chromeで表示可能 ともにJPEG以上の高圧縮を実現しているが、ライセンス戦争の危惧も?

  13. 2. HTMLで実装する

  14. テクニックの話に入る前に 大切なそもそも論

  15. Webサイトの品質ってなんだろう?

  16. Webサイトの品質ってなんだろう? 素晴らしいデザイン リッチなインタラクティブ性 完璧なSEO対策

  17. Webサイトの品質ってなんだろう? Performance - 素早く表示できる Accessibility - 誰でも、どんなデバイスでも理解できる Security - 安全である

  18. 3. ハイ・パフォーマンスを実現する 画像テクニック

  19. 3. ハイ・パフォーマンスを実現する画像テクニック 0. まず計測してみよう

  20. None
  21. None
  22. None
  23. 3. ハイ・パフォーマンスを実現する画像テクニック 1. 圧縮

  24. 画像圧縮のメカニズム DCT (離散コサイン変換) ハフマン符号化テーブルの最適化 連長圧縮(ランレングス符号化) 各自調べてね❤

  25. おすすめ画像圧縮プラグイン タスクランナーで使うなら => imagemin JPEGを圧縮するなら => mozjpeg

  26. None
  27. mozjpeg -Quality:90%で圧縮 1.6MB 377KB

  28. 3. ハイ・パフォーマンスを実現する画像テクニック 2.Progressive JPEG

  29. JPEGには、「プログレッシブ」と「ベースライン」がある。

  30. JPEGには、「プログレッシブ」と「ベースライン」がある。

  31. Photoshopでプログレッシブ化するには 「Web用に保存」

  32. なお mozjpegに突っ込むと自動的に プログレッシブ化されます。

  33. 3. ハイ・パフォーマンスを実現する画像テクニック 3. Responsive Images

  34. 昔:インターネットはPCで見るもの

  35. 現代:様々なデバイス・解像度・比率

  36. ←͜ͷը૾Λ

  37. ←͜͏

  38. HTML4 までのimg要素 =>画像の出し分けができなかった。 HTML4

  39. ↑のように、PC用スマホ用二つの画像を並べていた。 CSSで非表示を指定するが、二つともロードされてしまう。 HTML4

  40. HTML5 から srcset属性、sizes属性が追加された。 =>画像の出し分けができる! しかも余分なリソースはロードされない。 HTML5

  41. HTML5.1からはpicture要素を使っても出し分け可能に HTML5.1

  42. Photoshopでサイズごとに出し分けるには 「書き出し形式」

  43. None