写真をWebで表示させよう

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

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)
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. まず計測してみよう
23. 3. ハイ・パフォーマンスを実現する画像テクニック 1. 圧縮
24. 画像圧縮のメカニズム DCT (離散コサイン変換) ハフマン符号化テーブルの最適化 連長圧縮（ランレングス符号化） 各自調べてね❤
25. おすすめ画像圧縮プラグイン タスクランナーで使うなら => imagemin JPEGを圧縮するなら => mozjpeg
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でサイズごとに出し分けるには 「書き出し形式」