ALiS記事の読み込みを速くする方法を考えた

こんにちは、エンジニアのkyo asahinaです。
ALiSに限らない話ですが、ページ読み込みが速いほうが読者にはより親切なのは言うまでもないですね。
読み込みが遅くなる原因は、たいていは画像サイズが大きいことであると思います。

で、過去の自分の記事を見ると読み込みが遅い記事があったりするんですね。こうした記事の写真を右クリックし、「検証」を選択するとこんな画面が見れるはずです。※Chromeの場合です。

ラーメンの写真を検証したところ。
640 x 360 pixels (intrinsic 800 x 450 pixels)
とあるのがわかりますね。intrinsicというのは、「固有の」とか「本質的な」と言った意味。
そして、この意味するところは「本当は800x450の画像を、表示するときに640x360に縮めて表示するよ！」ってことなんです。
つまりどんな大きな画像でも横幅640にしてしまうイメージですね。
なので640pxを超える画像をアップロードしても、ページの読み込みに時間がかかるだけでメリットが無いということになります。

「じゃあどうするの？」ですが、単純にアップロードする前に横幅を640pxで縦幅はその比率を維持するようにするといいと思います。
Windowsのペイントを使っているなら、「サイズ変更」から単位をピクセルにして、「縦横比を維持する」にチェックして「水平方向」の値を640にするといいです。

コマンドで変換したいという、エンジニアな人であれば、ImageMagickを使うのもいいでしょう。というか僕も使ってます。
参考にコマンドを挙げておきますね。

magick convert -resize 640x img/ramen.jpg img/ramen_mini.jpg

これはimgフォルダに入っているramen.jpgを横幅640px、縦幅は比率を維持して縮小するというコマンドです。
大量に画像がある場合は、phpのプログラムからループでこの処理を実行するようにしています。

-----　宣　伝　------

テンプレートエンジンTwigを覚える本 Kindle版

Smarty 3を覚える本 Kindle版