高精細対応させた写真を1枚公開します。
画像のサイズは、1600px×1600px 64.68KBです。
下が高精細対応していない画像です。800px×800px 63.22KBです。
iPadで確認したところ、ぼんやり感が少なくなります。私のブログは、800px×495pxの画像を中心に実施していましたが、今後は1600px×990pxを中心に実施します。
高精細対応させるならPhotoshopを使って中画質で保存しましょう!
今でも1ファイルあたり50KB未満が望ましいと思っています。800px×495pxだと以下より3割程小さくなるはずです。1600px×1600pxの中画質が一番バランスが良いと思いました。
もし1600pxサイズをPhotoshopで「やや高画質」で保存すると215.4KBになってしまいます。50KB未満なら3G環境でもギリギリ我慢できます。200KBで3G環境だと表示されるまで時間がかかりすぎて機会損失が発生する可能性があります。
| 800px×800px | 1600px×1600px | |
|---|---|---|
| 低画質 | 18.03KB | 46.48KB |
| 中画質 | 25.04KB | 64.68KB |
| やや高画質 | 60.36KB | 215.4KB |
| 高画質 | 113.9KB | 512.5KB |
| 最高画質 | 302.3KB | 1,370.1KB |
WordPress 4.4から勝手にsrcsetとsizesが挿入されることが判明
いつのまにかWordpressもブラウザもネイティブで高精細対応されています。
イマイチ原理を理解していないのですが、横幅が1600pxの画像をアップロードすると自動的にsrcsetが挿入されて最適なファイルがダウンロードされるようになっています。
ここまでソースが複雑になるとCMSでないと対応が不可能な状態ですね。
src="https://pcmanabu.com/wp-content/uploads/2017/07/20170725-800x800.jpg"
srcset="https://pcmanabu.com/wp-content/uploads/2017/07/20170725-800x800.jpg 800w,
https://pcmanabu.com/wp-content/uploads/2017/07/20170725-198x198.jpg 198w,
https://pcmanabu.com/wp-content/uploads/2017/07/20170725-480x480.jpg 480w,
https://pcmanabu.com/wp-content/uploads/2017/07/20170725.jpg 1600w"
sizes="(max-width: 800px) 100vw, 800px"
無知って怖い
いつの間にかネイティブ対応しているので恐ろしいことが起きています。
高精細のディスプレイで画像をデスクトップにドラックすると以下がダウンロードされます。
https://pcmanabu.com/wp-content/uploads/2017/07/20170725.jpg 64.6KB)
通常の解像度で画像をデスクトップにドラックすると以下がダウンロードされます。
20170725-800x800.jpgは、WordPressが自動的に作成した画像です。サイズからPhotoshopの「やや高画質」相当です。
https://pcmanabu.com/wp-content/uploads/2017/07/20170725-800x800.jpg (49.1KB)
まとめ:HPの記事の含めて高精細対応させよう
いつのまにか高精細対応がネイティブになって自分のサイトも時代遅れになっていました。
文字以外の画像等も高精細対応させてクックリ表示させたいですね。