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

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

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

Q&A

解決済

2回答

1932閲覧

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

S_O

総合スコア16

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Laravel 5

Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

0グッド

1クリップ

投稿2017/04/04 10:32

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

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

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

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

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

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

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

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

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

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

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

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

投稿2017/04/05 02:29

MasakazuFukami

総合スコア1869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

S_O

2017/07/26 03:33

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

0

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

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

投稿2017/04/04 14:33

yuki84web

総合スコア1857

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

S_O

2017/07/26 03:34

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問