質問: **「投稿系のレスポンシブサイトにおける画像の扱い」**についてお聞きしたいことがあります。 現在、レスポンシブのwebメディア(画像投稿機能あり)を作成しているのですが **スマホ、タブレット、PCの際の画像サイズや解像度の扱いをどうするべきか悩んでおります。** PCサイズでのサムネイル画像などの投稿した場合、 スマホの場合にサイズが大きく、ページ自体が重くなってしまったりするのですが どう対策するのが運用上正しいでしょうか? 通常のHPなどなら画像自体を切り替えたりcssを組むことはできますが プログラミングなど知らない人が投稿しても 各デバイスで最適化された画像にする方法が知りたいと思っております。 ちなみにphpフレームワーク(laravel)で作成しており サーバー側での処理が必要な場合でも問題ありませんし js(jquery)などのライブラリを利用しても問題ありません。 WEBフロント、サーバーなど運用を考慮した 画像の運用について詳しい方いましたら ご回答いただければと思います。
回答: Retinaディスプレイ対応などがあるので画像は複数用意する必要があります。 なので、基本的には各デバイスによって画像を用意するのがベストだと思います。 その方法ですが、サーバサイドをいじることが出来る場合大きく分けて2つあると思います。 * ファイルアップロード時に複数の画像サイズに変換してストレージに保っておく、mobileやPCでファイルのパスを変更して出し分ける(test_360.jpgとかtest_980.jpgとか) * ファイルアップロード時はオリジナルサイズを保持しておき、フロントからリクエストが有った場合、画像をそのサイズにリサイズしたものをリアルタイムで配信する ファイルアップロード時に画像を生成しておくか、リクエスト時にリアルタイムで画像を生成するかの違いです。 前者の場合、アップロード時に画像を生成するため、リクエスト時にサーバ画像変換処理が走らないため、読み込みが早くなりますが、途中で「やっぱ520pxの画像もサイト内で使いたいな」と思ったら、今までアップロードした画像全てに対して520pxの画像を生成するスクリプトを書かなければならないためめんどくさいです。 後者の場合、メリットとしては様々なサイズの画像を簡単に作り出すことが出来る点があります。非常に柔軟にサイズをリクエストすることができます。ただ、一気に大量の画像を読む混むページなどの場合、画像のサイズ変換の処理が重くなってレスポンスが悪くなることもありますので、その辺のチューニングが必要です。 長くなってしまいましたが、参考になれば幸いです!