縦長画像は避けよう

　『画像表示のソース』の通り、tarさんの『記事一覧の縮小画像用の画像を別の画像にする方法』を読んで思い立ち、ブログ記事と「記事一覧」のソースを見てみたところ、「記事一覧」のソースは次のようになっていることが分かった。

　<img border="0" width="48" src="/_images/blog/self/s_175519.png">

　新しい画像をアップロードするとブログに表示するための「175519.gif」の他に「記事一覧」で使うための「s_175519.png」が作られるのである。（このファイル名は私の前の記事で使った画像の場合です。以下でも同じです。）
　私は「記事一覧」のソースで「width="48"」と画像の幅しか指定していないことに問題があると感じた。以前に誰かが指摘しているかもしれないが、私もここで指摘したい。

　「width="48"」と画像の幅を指定すると記事一覧用の画像「s_175519.png」を幅48pxに拡大・縮小して表示する。てっきり「175519.gif」を「width="48"」にしているのだと思っていたら、違っていた。それでも同じ問題が生じるが…。では、「s_175519.png」が細く縦長の画像だったらどうなるか。次のＵＲＬの「記事一覧」の「アイコン遊び」の記事の所を御覧あれ。（私のブログで示そうと思ってもっと細長い画像を用意しましたが、やめました。似非ブログ内検索でSo-net blog全体の中を「記事一覧　縦長」で検索したら縦長の画像を載せている記事が見つかりましたので利用させていただきました。）

　http://blog.so-net.ne.jp/_action?u=squareman_blog

　非常に見苦しいことが分かるだろう。縦の長さの指定がないから、アスペクト比を固定したままで、幅を広げると縦に長くなる。これは改善した方が良い。
　私が開発者なら「s_175519.png」を作る段階で幅を48px以内、高さを〜px以内に制限する。アイコンを作る仕組みと同じである。そして、「記事一覧」では画像の幅も高さも指定しない。そうすれば、改善される。
　さらに、「記事一覧」では細い画像が分かりにくくなる問題に関しては、今の所、tarさんが紹介してくれた手法しかないが、これも「s_175519.png」を作る段階で次のような候補から選んでもらうようなプログラムにする。

　・「記事一覧」用アイコンの作成方法を次の中から選んでください。

　　「縦横比固定」（デフォルト）
　　「縦に縮める」「横に縮める」
　　「下をカット」「上をカット」「右をカット」「左をカット」
　　「左上選択」「中上選択」「右上選択」
　　「左中選択」「中中選択」「右中選択」
　　「左下選択」「中下選択」「右下選択」

　Adobe Photoshopなど画像編集ソフトに同じような機能がある。「縦横比固定」と「下をカット」（幅を縮小して下をカット）と「右をカット」（縦に縮小して右をカット）以外を使う人は少ないかもしれないので、その３つがあれば良いかもしれない。tarさんの記事で示したサンプルの場合は「右をカット」に近い。彼の手法ならカットする場所をもっと柔軟に自分で選べるのだが…。

　さて、私が指摘するまでもなく、この問題はSo-netの方でも気付いていると思われる。改善されるだろうか。それまでは、縦長の画像を記事の一番先に表示しない方が良い。そんなことをする人はいないかもしれないが、縦長の画像を横に並べて一つの画像にするなど、ちょっと変わった使い方をする人がいるかもしれないので…。

　私のこの記事に書いてあることを確認したい方は、自分のブログで「下書き」を使って確認してみてください。「記事一覧」は上記ＵＲＬの「squareman_blog」の部分を自分のＩＤに変えれば「下書き」を含めて自分の記事の一覧だけを表示することができます。

追記：
　私は見ることがなかったので気付かなかったが、「ユーザー一覧」でも同じことが言えそうである。

追記：
　横に細長い画像（300 x 20）、縦に細長い画像（20 x 300）を用意して、「記事一覧」用の画像のサイズがどのようになるか確認してみた。次の通り。

　横に細長い画像（300 x 20）→「記事一覧」用の画像（48 x 3）
　縦に細長い画像（20 x 300）→「記事一覧」用の画像（20 x 300）

　どうやら「記事一覧」用の画像を作る際に幅だけを48px以下に縮めているらしい。それよりも細い画像は48pxに広げずにそのままである。しかし、縦の長さに関しては全く考慮していないようである。私なら記事本文のように考えるが、少なくとも縦の長さも48px以下に縮める。もちろん、それよりも細い画像は48pxまで広げずにそのままにする。
　また、「記事一覧」用の画像を48pxに縮めているのなら、「記事一覧」で「width="48"」を指定するのは無意味なだけでなく、記事本文のようなトラブルを生じさせる「蛇足」である。