写真をWebで表示させよう
by
hibikikudo
Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
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
Slide 41
Slide 41 text
HTML5.1からはpicture要素を使っても出し分け可能に HTML5.1
Slide 42
Slide 42 text
Photoshopでサイズごとに出し分けるには 「書き出し形式」
Slide 43
Slide 43 text
No content