Blog

ブログ

大きな画像をCMSにアップしたときのことを、考えたことはあるかい

ネットをしているとよくある経験。

美しい写真がたくさん掲載されているブログを見に行って、何気なく記事中のサムネイルをクリックしたら、ものすごく大きな原寸写真が表示された…

最近の光回線に慣れっこで、ネットの経験が浅い人は「大きな画像をアップすると読み込みに時間がかかる」ことを理解できません。

これまで多くのCMSサイトを扱ってきましたが、
更新担当者がデジカメ写真を原寸サイズでアップしてしまう
という問題は、なかなか解決できないでいます。

その場合はWebサービスや画像縮小ソフトの存在を教えるのですが、CMSの操作の他に覚えなければならないことが増えると、やっぱりストレスになるようです。

私が扱っているCMSに高解像度画像をアップした場合、どうなるかを調べてみました。

MovableType

クリック後の画像は、原寸ママで表示されます。
表題の件で相談を受けたのは、MTの案件なので当然ですな… (´ー` 三

ですが「LightBoxプラグイン」を入れると、クリック後の限界値も指定可能になるらしいです。

LightBoxプラグイン(改良版)。 – Junnama Online

次回の案件から標準で入れようと心に誓う私でした。

尚、カスタムフィールドにすれば、最大サイズをmt:AssetThumbnailURLタグで固定してしまうことができます。

大規模案件などでこのような問題を出したくない場合は、本文に自由に画像を貼らせるのでなく、カスタムフィールドでの計画的な構築を検討した方が良いでしょう。

WordPress

WordPressも原寸ママです。↓↓↓↓クリック注意

まだ調べていませんが、シェアの高いCMSですから、限界値を管理するプラグインが出ていそうです。

a-blog cms

私がa-blog cmsをプッシュしている理由のひとつに、ユーザーのことを考えた細かい投稿画面設定ができる点があります。

a-blog cmsはクリック後の限界値をデフォルトで管理でき、PC用・携帯用で別途設定可能です。
また、モーダルポップアップも自動で行われます。

SOY CMS

初期バージョンでは画像の自動縮小ができなかったSOY CMS。
正直これが私にとって最大のネックだったのですが、バージョン2ベータでは、アップロード後に大・中・小の3サイズのサムネイルを作成するようになりました。

クリック後の画像へのリンクはやっぱり原寸サイズなのですが、開発元が私のTwitterのつぶやきを聞いて対応を検討してくれるそうなので、次のバージョンでは限界値が実装されるかもしれません。

Joomla!

最近改めて勉強をはじめた、中0大規模案件向けのCMSです。
海外でシェアが大きいので期待していたのですが…

Joomla!は初期状態では画像の自動縮小もできません。
本文欄に巨大な写真がそのまんま貼り付けられてしまいました。

TinyMCEをエディタに採用してる時点でだめだろJK…

どうもJoomla!は、有志のプラグインを組み合わせることで真価を発揮するタイプらしく、いくつか公開されている画像管理プラグインを試す必要がありそうです。
WordPressと同様に、バージョンアップ後の不具合の可能性などを視野に入れなければいけないのは悩ましいところです。

Jimdo

無料で開設でき、直感的なUIで更新できるレンタルCMSです。
機能的には他のCMSと比べるとシンプルですが、画像をアップしたときの限界値がちゃんと指定されています。
クリック後の画像サイズは1024ピクセル×786ピクセルとなります。

実際に↓↓↓↓このページでやっているので参考にしてください。

デジカメの超巨大画像をアップしたらどうなるのか


そんなこんなで、開発元のみなさんには重箱の隅を突くような話で申し訳ないのですが。

クライアントはCMSに関して、特に画像を絡めたレイアウトに期待を持っているようなので、レンタルブログからは一歩進んだ機能を期待したいところです。

補足:a-blog cmsのおまけ

地味なことですが、a-blog cmsは画像を「中央寄せ」にしたときに画像の左右までリンク範囲が広がってしまったりもしません。

MovableType・ WordPressの場合は制作側が中央寄せの場合のCSSを指定するのですが、自動出力されるタグの関係で、画像幅にぴったり添った状態で中央に寄せることができないのです。
(display:inline-blockでもだめでした…CSSでできる方法知ってる人がいたら教えてくださいorz)

a-blog cmsの場合、インラインスタイルで画像幅が入るので、制作側が特に何もしなくてもその問題を回避してくれます。