質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.92%

投稿系のレスポンシブサイトにおける画像の扱いについて

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 1,421

score 16

「投稿系のレスポンシブサイトにおける画像の扱い」についてお聞きしたいことがあります。

現在、レスポンシブのwebメディア(画像投稿機能あり)を作成しているのですが
スマホ、タブレット、PCの際の画像サイズや解像度の扱いをどうするべきか悩んでおります。

PCサイズでのサムネイル画像などの投稿した場合、
スマホの場合にサイズが大きく、ページ自体が重くなってしまったりするのですが
どう対策するのが運用上正しいでしょうか?

通常のHPなどなら画像自体を切り替えたりcssを組むことはできますが
プログラミングなど知らない人が投稿しても
各デバイスで最適化された画像にする方法が知りたいと思っております。

ちなみにphpフレームワーク(laravel)で作成しており
サーバー側での処理が必要な場合でも問題ありませんし
js(jquery)などのライブラリを利用しても問題ありません。

WEBフロント、サーバーなど運用を考慮した
画像の運用について詳しい方いましたら
ご回答いただければと思います。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

Retinaディスプレイ対応などがあるので画像は複数用意する必要があります。

なので、基本的には各デバイスによって画像を用意するのがベストだと思います。

その方法ですが、サーバサイドをいじることが出来る場合大きく分けて2つあると思います。

  • ファイルアップロード時に複数の画像サイズに変換してストレージに保っておく、mobileやPCでファイルのパスを変更して出し分ける(test_360.jpgとかtest_980.jpgとか)
  • ファイルアップロード時はオリジナルサイズを保持しておき、フロントからリクエストが有った場合、画像をそのサイズにリサイズしたものをリアルタイムで配信する

ファイルアップロード時に画像を生成しておくか、リクエスト時にリアルタイムで画像を生成するかの違いです。

前者の場合、アップロード時に画像を生成するため、リクエスト時にサーバ画像変換処理が走らないため、読み込みが早くなりますが、途中で「やっぱ520pxの画像もサイト内で使いたいな」と思ったら、今までアップロードした画像全てに対して520pxの画像を生成するスクリプトを書かなければならないためめんどくさいです。

後者の場合、メリットとしては様々なサイズの画像を簡単に作り出すことが出来る点があります。非常に柔軟にサイズをリクエストすることができます。ただ、一気に大量の画像を読む混むページなどの場合、画像のサイズ変換の処理が重くなってレスポンスが悪くなることもありますので、その辺のチューニングが必要です。

長くなってしまいましたが、参考になれば幸いです!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/07/26 12:33

    お返事遅れましたが、ありがとうございます。とても参考になりました!

    キャンセル

+1

  • 写真のような出来るだけ綺麗に見せたいものは少々ファイルが大きくなってもよいので出来るだけ大きいサイズ(でも1MB超えるのは流石に大きすぎるかも)
  • 先述したもの以外の画像は可能な限り圧縮する
  • Retinaディスプレイ対策で実表示サイズの2倍のサイズで用意しておく
  • キャッシュを有効活用する
  • gzip圧縮転送を有効にする

等々…まだ色々ありそうですが思いついたものを書いてみました。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/07/26 12:34

    お返事遅れましたが、ご回答ありがとうございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.92%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る