Web用の画像サイズって、どうしていますか？Retinaのような高解像度ディスプレイにも対応した方がいいのかなと思い、大体いつも大きめに画像を作って縮小させて表示しているのですが、容量の無駄が気になってます。JSを使うなど、他の方法もあると思うのですが、皆様はどの方法で対応していますか？また、画像サイズで対応する場合、レスポンシブ対応で、PCでの最大表示サイズの更に倍のサイズで画像を作るのは、Retina対応を考えると仕方のないことなのでしょうか？
極力画像を避けるのも手ですね。CSSでできるところはCSSで。またretina対応は有料対応で、容量に関してはあまり気にしていません。仕方ないこととして割り切っています。
ファイルサイズが同じならでかい画像で品質落としたものと、高品質で表示サイズの画像だと前者の方が綺麗にみえるはず。
HTML5のpicture要素を使って環境ごとに表示する画像を分ける事ができます。勿論写真ではない、ベクターで表現可能なものはSVG等を使います。
いつのまにそんな要素が…
でもさ、実際のところ、3G通信の割合が一定数いるんだから、Retina端末に強制的に4倍画像は少し強引だと思う。個人的にはテキストを含む画像でない限り、4倍画像は必要ないと思ってる。そんなことより、画像ファイルサイズの最適化やリクエストの削減の方がよほどユーザーの身になる気がする。
MVNOはもっと流行ると思うし、ページ読み込みの速度はSEOにも関係してくるからな
まとめての返信ですみません。皆様、ご回答ありがとうございます。やはり倍サイズの画像を作るのはちょっと古くさそうですね。SVGは気になっていたものの、全く知らないので、勉強してみます。
所詮ブラウザのシェア次第、もうちょっと世の流れを待つしかない
みんなの回答 5 件
極力画像を避けるのも手ですね。CSSでできるところはCSSで。またretina対応は有料対応で、容量に関してはあまり気にしていません。仕方ないこととして割り切っています。
ファイルサイズが同じならでかい画像で品質落としたものと、高品質で表示サイズの画像だと前者の方が綺麗にみえるはず。
HTML5のpicture要素を使って環境ごとに表示する画像を分ける事ができます。
勿論写真ではない、ベクターで表現可能なものはSVG等を使います。
でもさ、実際のところ、3G通信の割合が一定数いるんだから、Retina端末に強制的に4倍画像は少し強引だと思う。個人的にはテキストを含む画像でない限り、4倍画像は必要ないと思ってる。そんなことより、画像ファイルサイズの最適化やリクエストの削減の方がよほどユーザーの身になる気がする。
まとめての返信ですみません。
皆様、ご回答ありがとうございます。
やはり倍サイズの画像を作るのはちょっと古くさそうですね。
SVGは気になっていたものの、全く知らないので、勉強してみます。
関連するトピックス