【超カンタン】ワードプレスで画像サイズのレティーナ対応

アイフォンというかマックというか、そもそもアップルっていう会社自体あんまり好きじゃないんでアップルの端末を一個も持ってない。

なんかアップル信者って村上春樹信者、いわゆるハルキストと同じ香りがして…。どうにも苦手なんですよね。手提げ部分のない茶色いワッシワシ紙袋にスーパーで買ったレモンと瓶入りミルクを入れ、左わきに抱えて歩きたがってる連中というか。

すげー偏見ですね。申し訳ない。

なものでレティーナディスプレイ対応っていうのも正直あんまりやり方が分かってなかったんですよね。レティーナってなんか2倍のサイズの画像がいるやつでしょ？じゃないとぼやける的な。ワードプレスなら適当にプラグイン放り込んでおけばいいんじゃない？くらいのアバウト対応でどうにかやってきてました。

ただ依然としてアイフォンのシェアは高いし、ここらでいっちょレティーナディスプレイ対応を学んでみました。んじゃワードプレスがものすごいお利口で、プラグイン一切使わなくてもたった一行追加するだけでいいことが分かったんで紹介したい。

1. ワードプレス、レティーナ対応はこれだけ
2. ワードプレスのすごいトコロ
1. srcsetとsizes
3. 縦横比（アスペクト比）はどうなんの？
4. まとめ

ワードプレス、レティーナ対応はこれだけ

functions.phpにこの一行を追加するだけでワードプレスのレティーナ対応が完了します。

add_image_size( 'thumb-retina', ○○○, △△△, true );

○の所と△の所は、それぞれ今使ってるワードプレスの「設定→メディア設定→サムネイルのサイズ」で設定している、サムネイルサイズの縦と横の数字を2倍にしてくださいね。

（例：サムネイルのサイズ200×150の場：○に400、△に300）

ちなみに後述になりますが、サムネイル以外の画像についてはワードプレスがそれなりに初期状態でレティーナ対応してくれてるんでやる必要がないです。

ワードプレスのすごいトコロ

ものすんごい簡単にワードプレスでレティーナ対応できちゃいましたが、いったい何をしたのか、を最後にちょろっと紹介しておきますね。やっぱり何やってるかわからないってのは少々気味が悪いもんですよね。

まずワードプレスはエディタで画像を挿入するときも、index.phpとかで関数叩いて画像を読みだすときも、自動でsrcsetとsizesという属性を出力します。

srcsetとsizes

ワードプレスが自動で吐き出すsrcsetとsizes。これって何なん？というのをちょっとだけ。

ワードプレスのsizesはこんな感じで出力されます。

sizes="(max-width: 200px) 100vw, 200px"

これは記事を見てる人が使ってる画面のサイズが200pxより小さかったら（max-width:200px）画像サイズは画面いっぱい（100vw）にしてね、そうじゃなくて200px以上だったら200pxにしてね！という指定です。

つまりぶっちゃけmax-width:200pxみたいな処理です。

んで次にワードプレスが吐き出すsrcsetはこんな感じ。

srcset="https://xxx.png 200w, https://xxx-400x300.png 400w"

この場合だと、ユーザーに合わせて①「200w用の画像」と②「400w用の画像」の二つから好きな方を1個選べるぜ！ということになります。たぶんもっとたくさんsrcsetの中身が出力されている場合も多いと思います。その場合はそのたくさんの選択詩の中からどれか1個選んで表示する、てことになります。

ちなみになんですが、srcsetに書かれてる画像ファイルぜんぶ読みこんじゃってんじゃないの？画像たくさん読みこんだら表示遅くなるって聞いたけど？と不安なあなた。ずいぶんサイト構築におくわしい。非常にいい目をしていますね。

srcsetのいいところはこの中の”1個だけ”しかダウンロードしないトコロなんです。だから表示速度を犠牲にせずにユーザーごとにきれいな画像を提供できる。素晴らしい仕組みですよね。

ちょっと脱線しましたが、このどれがピッタリか、というのはユーザーごとの端末が勝手に判断してくれます。

自分の横幅が200wなら200wの画像を、自分の横幅が400wなら400w用の画像を読み込む。

…ん？ちょっと待ってよ。さっきsizesで最大200pxまでしか読みこまないって言ったじゃん。んじゃ400wなんてどの端末も読み込まないんじゃ？というあなた。本当に素晴らしい。世が世なら感のいい子は嫌いですよ、で始末されている所でしょう。

種明かしをすると、それぞれsizesは「px」そしてsrcsetは「w」と単位が違う所に注目してください。

これこそがレティーナ対応といってもいいんですが、レティーナは1pxを表すのに縦2w横2wの計4w使う（厳密には物理ピクセルと論理ピクセルていうらしい）んですね。本来なら写真の4つの画素（4w）はそのまま4pxなのにそれをぎゅっとして1pxとして表示する的な。

てことはです。さっき400wというのはレティーナディスプレイさんからすれば200pxなわけです（400w x 300w → 200w x 150w）。

そしてレティーナディスプレイはちゃんとpxではなくwで自身に最適なsrcsetを判断してくれるので、400wの方の画像を選んで表示してくれる、という仕組みです。

縦横比（アスペクト比）はどうなんの？

こっから下は体感で「どうやらワードプレスはそうなってるっぽい」な内容なんで、詳しい人にぜひ逆に教えてほしい部分。コメントお待ちしておりますね。

さて、そんな風に異なる画像をユーザー側の端末に選ばせられるsrcsetとsizes。めっちゃ便利でお利口です。

でも例えばサイズごとに縦横比（アスペクト比）が違ったりするとけっこう大変な気がしませんか？縦横1:2でサイトのデザイン設計してたのに、見る人によっては1:1で表示される場合がある、そうなってくるとデザイン作るのがむずくなるというか、あれ？オレが作ったデザイン大丈夫か？とちょっとヒヤッとしてる人も多いかもしれません。

ワードプレスは、たぶんなんですがsrcsetを出力するときに同じ縦横比（アスペクト比）の画像しかsrcsetに選択しないようになっています。

なのでサムネイルとして同じ縦横比で画像を作っておけばその縦横比だけのsrcset（今回の場合だと元からあるthumbnailと追加したthumb-retina）が出力され、そうではないfullとかlarge、middleといった元画像と縦横比が同じものはそいつらだけのsrcsetとして出力してくれます。

記事の最初の方でサムネイル画像以外は勝手にレティーナ対応できちゃってるっていうのはこういうことです。記事挿入時にfull選んでもsrcsetにはlargeとかmiddleも入ってるから、すでになんにもしなくても各端末が一番適したの選んでくれてるんです。

サムネイルについては他の画像と縦横比が違う（トリミングしてるはず）んでそのままではsrcsetが出力されない。てことで新たに同じ縦横比の「thumb-retina」を追加したわけです。

実験はしたんで実機動作上はそうなってるけど、そう設計している、という確たる証拠が見つからなかったんで、たぶん、なんですが。

まとめ

ワードプレスでアイフォンに代表されるレティーナディスプレイに対応する方法を紹介しました。

ワードプレスのimgタグ出力は本当に優秀だなというのが改めてわかりました。一つ上げるならやっぱりアスペクト比の部分の証拠が見つけられなかったところ。縦横比ごとにsrcsetの中身を出しわけているのは出しわけているけど、それがどこまで保証されるものなのかが分からないのがちょっと不安。

くわしい方がいましたら下記Messageよりコメントよろしくお願いいたします。

Message 書き込む