Q&A
こんにちは。
Laravelで料理画像をアップロードできるようなアプリケーションを作っているのですが、画像をアップロードする際にサーバーの容量節約のため、画像をリサイズしたいです。
ここで疑問に思ったのですが、アップロードされた写真を気持ちよく閲覧でき、かつ、サーバーを圧迫しないちょうどいいバランスの画像のサイズってどれくらいなのでしょうか。いろんな記事を読んでみて、スマホで閲覧する場合、横幅300pxくらいがいいのかなと考えているのですが、ご存知の方いらっしゃいましたらアドバイスをいただきたいです(pxでもMBでも、どちらでも大丈夫です)。
回答1件
0
ベストアンサー
スマホ横幅はpixelでいうと350px-420pxくらいですが、Retinaディスプレイ対応のものはpixelの2倍のサイズで表示しないと綺麗に表示されません。
iPhone XRだと横幅は414pxですが、横幅いっぱいに綺麗に表示するには828px必要になります。
その分、ダウンロードするのにも時間・容量を使ってしまいますが、これから5G時代になることですし、横幅828px以上の画像は用意しておいた方が良いと思います。
加えて、ユーザ体験を最適化するには横幅いっぱいだけではなくサムネイル表示で小さい画像をたくさん表示したいというユースケースも出てくると思います。画面表示を変えるたびに全画像を最適なサイズにリサイズするのはかなり手間になります。
画像変換まで行ってくれるCDNを使えば、URLの末尾に画像のサイズを付ければ自動で変換してくれるのでめちゃくちゃ楽です。
https://sample-url.com/a.jpg という画像があれば、
https://sample-url.com/a.jpg?width=80 とすると横80pxの画像を作ってくれるという具合です。
下記が画像変換CDNの例です。
ImageFlux (https://www.sakura.ad.jp/services/imageflux/)
imgix (https://www.imgix.com/)
特にimgixは日経電子版や一休.comも利用しているサービスになります。
参考)
CDNを使って表示速度を2倍に
日経電子版リニューアルの舞台裏
imgix導入で画像最適化とサイトスピードを改善した話
まとめると、私がその料理サービスを作る場合は念のため幅1200pxぐらいの画像を保存しておいて、画像変換CDN経由でアクセスできるように設定します。
画像変換CDNは有料なので予算との関係もありますが...
投稿2020/08/18 14:37
総合スコア209
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/18 15:29