ブログ立ち上げに際して新規の記事の投稿と並行して過去の記事の再掲のための記事の添削も行ってきました
サイト自体をインデックスされないようにしていじっています
そのため自分しか見ないということでPCファーストで制作しています
現在はオリジナルスキンで制作していますが記事スペースの横幅はマージンを除いて800pxとなっています
記事中の写真は2カラムでリサイズなく表示されるよう基本的には横幅400pxで指定しています
写真を挿入する時にリンクをなしにしているのでフルサイズなど使われない画像が大量にサーバーに生成されている「だけ」って状況です
自鯖なので容量については不問としていますが、近いうちにレンタルサーバーに移行することも検討しているので容量についても少しだけ気になり出してきました
以前はcocoonに添付されているスキンを使っていましたがスキンをいじって使うことが多くカラム数なども変えたりしていたので画像サイズはちょくちょく見直しては再生成を繰り返していました
オリジナルスキンに変える直前は記事本文中に中サイズの画像が2つリサイズされずにきちんと並ぶように画像サイズ「中」を392pxと変更していました。全く無駄なことだったんですけどね
オリジナルスキンに変えてから中サイズを400に戻してサムネイルの再生成を実施するとリンクエラーが大量に出ました
フルサイズをCSSとかでサイズしているしているものと勝手に解釈していましたが実際には a00000.jpgのように画像サイズをファイル名に含んだものが生成されてそれをHTMLに直接埋め込まれるわけですからそりゃリンク先がないというエラーになりますよね
これってフルサイズ以外のサイズを指定しようものなら後々は変更できなくなるってことと同意なのではと考えます
インデックスなどのサムネイルサイズはcocoonのサイトに書いてあったようにfunction.phpに記述することで専用サイズのサムネイルを生成し利用しています
そこで今一度画像サイズについて調査してみると大きく分けて2つの方向で検討するべきかと考えました
1つは今まで通り「中」で表示しクリックして大きく表示されるようにする
基本的には「中」とフルサイズのみを生成させるパターン
もう1つは画像ギャラリーを使うパターン
ありがたいことに他サイト様で速度・転送量などの検証をしていただいていたので使用に耐えうるものと判断
それにしてもギャラリー機能っていつからついたんでしょうかね
10年くらい前ですとプラグインを利用して専用ページで「アルバム」みたいにして用意していた記憶あるんですが調べているとめちゃくちゃ簡単に見栄えのする状態で使えるようになっていますね
どうせリンク切れが大量に出ているので腹を括って両方とも試していきたいと思います
パソコンでは4Kモニタを等倍表示、スマホはiPhoneSEを特別拡大もせずに見ていたのでしたが拡大してみたら見事にジャギジャギな画像が・・・
Retinaディスプレイ対応は2倍のピクセルで用意すればいいんだよなと記憶していたんですが一応調べてみるとSuper Retinaだと3倍、一部のAndroidで4倍になっているとか
アイキャッチは100×100で表示にしてあるので、ブログ中でいらすとやさんで利用させていただいている画像はすべて横幅400px以上だったので画像のwidthを100pxに決め打ち
ボックスメニュー用の画像は小さく作っていたので4倍に耐えれるようなサイズに調整してアップロードしこちらもCSSで画像サイズを決め打ちして対応しました
あとは本文中の画像ですが、古い記事はガラケーや150万画像〜数百万画像なので2倍が精々
記事の横幅は800pxにしてあるので最低で1600px、可能なら2560pxで用意することにしました
wordpressのメディアで「サムネイル、中、大」の生成はやめて、Image Quality Controlプラグインで画質を思いっきり下げました（ImageOptimの最低設定と同等になるくらいに）
あとはCSSの設定で調整となります
functionに書いて自動でやる方法を紹介されている記事もありましたがCSSで可能だったのでこれでやっていこうと思っています
あとは適宜対応かな
EWWWは停止です
コメント