はてなブログでPC、スマホに合わせて最適な画像を出したい！
レスポンシブなウェブデザインについて完璧に理解はできなくても、はてなブログで使えるレベルの知識の獲得を目指します。
レスポンシブってなんだ？？
ユーザが見ているブラウザの種類やサイズによって、表示するものを切り替える手法のことをいいます。 表示する位置を変えたり、表示するサイズを変えたり、場合によってはあるパーツだけ表示しないことをします。
はてなブログのCONTETNSというテーマが、レスポンシブに対応しているので、記事を書くときに何か意識をする必要もなく、PCで表示してもスマホで表示してもきれいに表示できます。 ただ、画像だけは工夫しないといけません。
何が問題か
レスポンシブなブログデザイン（テーマ）で見た目を変えることはできますが、記事内で使う画像を切り替えることはできません。
スマホで見るときでもPC用の画像を通信し（ギガを削って）、小さな枠に収まるように見せているだけです。小さい画像なら大した差にはなりませんが、幅が大きいアイキャッチ画像などの場合、表示速度に問題がでます。遅くなりますね。
これはあまりよくない。
ということで、せっかくレスポンシブ対応しているテーマを使っているので、記事内の画像もレスポンシブ対応をしてみようと思います。
画像もレスポンシブに対応する
レスポンシブはブラウザの横幅に合わせて、使うCSSを切り変えてブラウザ上での表現を変える仕組みです。
画像もレスポンシブにする場合、タグを工夫する必要があります。
具体的には、複数のサイズの画像を用意しておき、その時に表示されている画面サイズに最適な画像を使ってもらう形をとります。
↓レスポンシブに設定した画像。ウィンドウサイズを変えるとA、B、Cの画像に切り替わります。
どうやるのか？
「レスポンシブ 画像 表示」あたりで調べてみましたが、最近のブラウザは普通にimgタグを使えばできるみたいです。力技ですが、この方法でやってはみたのですが、スマホでの切替が上手くいきませんでした。
すごく簡単に言ってしまえば、<img>タグにsrcsetとsizesを書くだけです。srcsetとsizesの書き方にルールがあるので、勉強した範囲で書き残します。
<picture>タグを使って、PCとスマホの画像の出しわけを実現します。
どんないいことがあるか？
これをやると、スマホのときに大きな画像を持ってこなくなるので、使用するギガが減ります。 通信するデータ量が小さくなるので、画面表示が早くなります。
この先でやっていること
<img>や<picture>を使って、複雑なことができるのは分かったけど、面倒なので以下のところまでにします。
- 1つの画像に対して2サイズだけ用意（PC用、スマホ用）
- 表示幅420px以上はPC画像、420px未満はスマホ画像にする
- 画像を表示するサイズは、画像サイズの横幅100％
もっと細かくキメたいひとは、参考資料をみて応用きかせてください。
作業順序はこうです
- どこからか画像をもってくる
- 横700pxにアスペクト比を維持して変換
- 横420pxの画像を用意する
- はてなブログの画像置き場（フォトライフ）にアップロードする
- 画像フルパスを調べる（はてな記法はだめ）
<picture>タグを組み立てる
画像を探してくる
いつもどおり、Unsplashからこの画像を使いました。
https://unsplash.com/photos/J6mySj3wntg
元の画像は1920x1378pxの大きさです。ニューヨークです。かこいい。いつもありがとうございます。
PC用の画像幅（横幅700）を作る
ツールは何でもいいですが、いつもどおりScreenpressoを使って画像サイズを変更します。変換した画像がこれです。
700px
元画像をそのまま縮小したものなので、全部の景色が見えている状態です。
この画像をはてなフォトライフの画像入れに保存して、はてなの記事作成画面に持ってきます。
[f:id:kanaxx43:20200611204036j:plain]
スマホ用画像（横幅350px）を作る
次は、スマホ用の画像を作ります。スマホ用は画像の横幅は350pxにします。 ブレイクポイントが420pにしているので、420pxでもよいのですが、ズレてても大丈夫なことを確認するのに350pxとしました。
スマホ用の画像は、ニューヨーク全景ではなくて真ん中のタワーを拡大表示したものにしました。
350px
はてなの記事作成画面内だとこのように記載されます。
[f:id:kanaxx43:20200611204132j:plain]
画像のURLを調べる
はてなでブログ内に埋め込んだ画像のURLを調べるのはちょっと面倒です。
方法はいくつかありますが、いったん記事に画像を埋め込んでしまい、プレビューから画像URLを調べるのが簡単で確実です。
結果は、こうなります。
| 横幅 | URL |
|---|---|
| 700px | https://cdn-ak.f.st-hatena.com/images/fotolife/k/kanaxx43/20200611/20200611204036.jpg |
| 350px | https://cdn-ak.f.st-hatena.com/images/fotolife/k/kanaxx43/20200611/20200611204132.jpg |
タグを組み立てる
さて、最終工程です。<picture>タグを組み立てます。
pictureの構造はこうなります
| 名前 | 値 |
|---|---|
| <picture> | 一番外側はpicture |
| <source | pictureの中に1つだけsourceタグを入れる |
| media | "(max-width:420px)" |
| srcset | スマホ用の画像をURLを入れる |
| <img | pictureの中、sourceのあとにimgタグを置く |
| src | PC用の画像のURLを入れる |
| class | hatena-fotolife |
ちょっと分かりにくいですけど、実際に記事内の置く<picture>タグです。
<picture>
<source
media="(max-width:420px)"
srcset="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kanaxx43/20200611/20200611204132.jpg" >
<img
src="https://cdn-ak.f.st-hatena.com/images/fotolife/k/kanaxx43/20200611/20200611204036.jpg"
class="hatena-fotolife" >
</picture>
画像の表示
<picture>で表示した画像です。
420px以上でニューヨーク全景、画面が小さいとタワーの拡大画像
スマホでみるか、ウィンドウサイズを小さくするかすると、表示される画像が変わると思います。うまくいきましたか？
まとめ
ということで、はてなブログで画像を最適化する方法を紹介しました。 こんな方法でも画像を2枚用意する必要があるので、それなり手間です。記事内の全部の画像でやるとさすがに疲れます。比較的大きめなサイズの画像を狙ってやるのがいいと思います。
なんでこんなことをやったかというと、一番やりたかったことは、PCとスマホで動画を最適に表示することです。今回はその前段の基礎勉強部分のアウトプットです。
参考にした資料
レスポンシブ画像
https://developer.mozilla.org/ja/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
HTML 5.1のsrcset・sizes属性とpicture要素の使い方 レスポンシブイメージで画像表示を最適化
https://ics.media/entry/13324/
もう逃げない。HTMLのviewportをちゃんと理解する https://qiita.com/ryounagaoka/items/045b2808a5ed43f96607
