はてなブログのAMP配信で、imgからamp-imgへ変換する際の表示サイズの継承ルール

img要素には width属性とheight属性とがあります。

これらは通常は指定していたほうが良い、と言われています。

あらかじめ表示サイズを指定することで、レイアウトの計算がしやすくなり、体感的に表示が速くなるからです。

まあ、CSSでも指定できるので、絶対どちらも書いておかなければならない、という訳では無いそうです。ケースバイケースですね。

ですが、はてなブログのAMPでは話が変わります。

はてなブログのAMPでは、AMPで表示させるamp-img要素に変換するときに、あるルールがあるのです。

width属性・height属性のどちらも指定している場合

はてなブログのAMPでは、width属性と height属性のどちらも指定していると表示サイズを継承してくれます。

例えば、こちらの画像はおなじみぱくたそさんの画像です。サイズは幅300ピクセル、高さ200ピクセル。

サンプルの画像

それに、width と height を画像の半分（width="150" height="100"）に指定したのが、こちらです。

<img src="300 x 200 の画像.jpg" width="150" height="100" alt="サンプル画像">

サンプル画像

画像はAMPでも元の画像の半分のサイズになっているはずです。

確認用として、このページのAMP表示確認用ページのリンクを貼っておきます。

リンク：AMPページ

AMPはスマホ向けの機能です。表示する画面の大半は高画素密度の Retina ディスプレイ。

その画面で画像を綺麗に表示させるなら、表示サイズの倍の画素数の画面を使いたいところです。

ちなみに Retina ディスプレイでの表示の違いがどれくらいかと言うと、実は背景のような画像では分かりにくいのです。

なので、次の画像を用意しました。

この2つの画像は同じ画像を編集したもので、上が幅220ピクセル、下がその倍の440ピクセルにしています。特に文字の表示に違いが大きく出ているので、分かりやすいかと思います。

幅と画像が同じ画素の画像

幅は同じで画像が倍の画像

ちなみに写真の納豆は、ディスカウントドラッグコスモスで売られているプライベートブランドの納豆「あじわい納豆 ON 365」です。

この納豆の味の感想とかは、また別途記事にします。

※追記、書きました。

指定していない、または width か height どちらかの属性だけ指定している場合

先ほどと違い何も指定していない。または、width、height のどちらか片方だけだったときは、AMPでは画像サイズいっぱいのサイズになります。

つまり表示サイズ＝ピクセル数となるのです。

なので、widthだけ指定すると、こうなります。

<img src="300 x 200 の画像.jpg" alt="サンプル画像" width="150">

サンプル画像

こちらにも先ほどのように確認用のAMPページのリンクをご用意しています。

リンク：AMPページ

Retina ディスプレイに合わせて倍の画素数で画面を用意している時は注意が必要です。

解決策としては、width 属性と height 属性のどちらも記述するか、max-width:150pxなどとCSSで指定する必要があります。

max-width:50%という方法もありますが、この指定方法では画面の横幅いっぱいの画像を表示させるのには不向きです。

はてな記法は要注意

特に注意してほしいのが、はてな記法での画像の貼り付けです。

はてな記法では次のように幅や高さを指定できるのですが

[f:id:はてなID:20170101012345j:plain:w150:h100:alt=サンプルの画像]

この記法で指定した場合、幅や高さの指定はインラインの style属性で記述されます。

<img src="画像URL" alt="サンプルの画像" class="hatena-fotolife" style="width:150px;height:100px" >

これは当然、AMPに変換するときに消えてしまいます。

参考リンク：

これはほんと盲点だったのですが、まさかstyle属性だったとは（汗）

道理で表示サイズの値を継続しない訳ですよ（苦笑）

表示サイズを指定して画像を貼る方法

では、Retina ディスプレイ用に表示サイズ2倍のピクセル数の画像を、サイズを指定して貼り付けるにはどうすればいいでしょうか？

実は難しくはありません。

見たままモード、HTMLモードの場合

この二つの場合、画像を貼り付けてもHTMLが編集できるので、直接width属性・height属性を記述できます。*1

なので、この二つのモードは特に難しいことはありません。

はてな記法モード、Markdownモードの場合

これらの場合、HTMLのimg要素で記述する必要があります。

気をつけなければいけないのは、フォトライフを使って画像を貼り付けたときです。

従来どおりフォトライフを使って画像を貼り付けると、はてな記法で記述されるからです。

はてな記法（fotolife記法）をimg要素（画像URL）に変換するのは意外と簡単で、以下のようにすればimg要素で表示できます。

要はsrc属性に画像を置いてあるURLを記述すればオッケーです。

基本的にURL前半のhttps://cdn-ak2.f.st-hatena.com/images/fotolife/は共通です。

cdn-ak.f.st-hatena.comというもの（cdn-akに2が無い）ありますが、転送されるのか上記のらURLに飛びます。

次の一文字（本来はアルファベット1文字）は、はてなIDの先頭一文字のアルファベットです。

その次にアップロードした日付、そしてファイル名へと続きます。

ファイル名の数字はどうやらアップロードした日時のようです。この数字の最初の8文字からアップロードした年月日が分かります。

最後一文字の英字はファイル形式です。jがJPEG、pがPNG、gがGIFです。

また、画像が1024ピクセルを超えると、フォトライフの設計で【オリジナル画像を保存】にチェックが入っていないと、大きな画像は1024ピクセルに縮小して保存されます。

チェックが入っている場合、画像はオリジナル画像として保存されますので、そちらを指定しなくてはいけません。

なので、1024ピクセルより大きな画像を表示させる際には【オリジナル画像を保存】にチェックを入れて、以下のように指定する必要があります。

src="https://cdn-ak2.f.st-hatena.com/images/fotolife/は/はてなID/20170101/20170101012345_original.jpg"

URLで変わる部分は日付やファイル名といった数字部分だけですので、慣れれば変換するのは非常に簡単です。コピペなどを駆使すれば1分も掛からずに画像が貼れます。

まとめ

最後にまとめますと、このようになります。

width属性とheight属性の両方に指定があれば、その表示サイズを継承
それ以外は原寸大値が最大表示サイズ

この「AMPで画像表示サイズを継承する」というのは最近偶然見つけたのですが、これが出来るのと出来ないとでは大分ちがいます。

Retina ディスプレイで原寸大で表示すると、どうしてもボヤけた画像になります。

これにより、AMPで画像が綺麗に表示できるので、たいへん重宝しています。

*1:見たままモードでは【HTML編集】から編集できます。

わたしと納豆ごはん

納豆、Web、雑記など