写真をWebで表示させよう

by hibikikudo

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

qiita@hibikikudo

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

ブロックノイズ

Slide 10

Slide 10 text

動画の静止画もJPEG(JPEG2000)

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

2. HTMLで実装する

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Webサイトの品質ってなんだろう？

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

No content

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

No content

Slide 27

Slide 27 text

mozjpeg -Quality:90%で圧縮 1.6MB 377KB

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

昔：インターネットはPCで見るもの

Slide 35

Slide 35 text

現代：様々なデバイス・解像度・比率

Slide 36

Slide 36 text

←͜ͷը૾Λ

Slide 37

Slide 37 text

←͜͏

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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