画像最適化戦略 SVG/Font 編 | blog.jxck.io
Intro 本サイトで使用している UI アイコン系の画像を、ギリギリまで最適化した手書き SVG に置き換えた(ただしソースは 観賞用 なので、インデントは残す)。 また、装飾に画像ではなく CSS の contents を利用することで、ローカルフォントデータを利用し、画像転送を減らす工夫にも言及する。 画像最適化シリーズ第 4 回目のエントリである。 画像最適化戦略 PNG/JPEG 編 画像最適化戦略 Picture 編 画像最適化戦略 WebP 編 > 画像最適化戦略 SVG/Font 編 画像最適化戦略 Lazy Loading 編 ベクタ画像とラスタ画像 ここまでの画像最適化では、 PNG/JPEG/WebP など ラスタ形式 の画像について記述した。 しかし、 UI アイコンなどについては、 SVG や Font といった ベクタ形式 を用いる方が、良い場合がある。 ラスタ
画像最適化戦略 WebP 編 | blog.jxck.io
Intro 本サイトの PNG/JPEG で提供している画像については、よりサイズが小さくなりやすい WebP 形式を提供し、対応ブラウザに配布するようにした。 フォーマットを出し分けるため、画像の指定は <picture> 要素を用いて対応した。 画像最適化シリーズ第 3 回目のエントリである。 画像最適化戦略 PNG/JPEG 編 画像最適化戦略 Picture 編 > 画像最適化戦略 WebP 編 画像最適化戦略 SVG/Font 編 画像最適化戦略 Lazy Loading 編 WebP 従来の Web において、画像は用途毎に PNG/JPEG/GIF などを使い分けていた。 一般的には以下のような使い分けが行われている。 WebP は Google が開発した画像フォーマットであり、これら三つの用途全てに適した上で、さらに小さいサイズに圧縮できる場合が多い。 また、 WebP
画像最適化戦略 Picture 編 | blog.jxck.io
Intro 本サイトで使用している PNG/JPEG 画像を、対応デバイスと、 Device Pixel Ratio に対して最適なサイズで出し分けるために、 <picture> 要素を適用した。 画像最適化シリーズ第 2 回目のエントリである。 画像最適化戦略 PNG/JPEG 編 > 画像最適化戦略 Picture 編 画像最適化戦略 WebP 編 画像最適化戦略 SVG/Font 編 画像最適化戦略 Lazy Loading 編 画像の出し分け 本サイトでは、それぞれの画像のサイズを、適切にリサイズしている。 しかし、例えば Device Pixel Ratio が大きい Retina 対応端末などには、 大きいサイズのファイルを提供しなければ、拡大表示による画像の荒れが発生してしまう。 そこで、同一画像でいくつかのファイルサイズを用意し、ブラウザの DPR などに応じて出し分けるの
画像最適化戦略 PNG/JEPG 編 | blog.jxck.io
Intro 本サイトで使用している PNG/JPEG 画像に対し、メタデータ削除、減色、リサイズなど基本的な最適化処理の適用戦略と、その方法および結果について。 画像最適化シリーズ第 1 回目のエントリである。 > 画像最適化戦略 PNG/JPEG 編 画像最適化戦略 Picture 編 画像最適化戦略 WebP 編 画像最適化戦略 SVG/Font 編 画像最適化戦略 Lazy Loading 編 サイズ最適化 画像において最も無駄なのは、サイズの大きい画像を小さく表示している場合である。 これはネットワークでの転送上も、ブラウザのレンダリング上もオーバーヘッドになる。 逆に小さい画像を拡大して描画すると、細部が荒れてしまう。 したがって、表示するサイズぴったりにリサイズすれば、データ量も最適となる。 また、見た目上の変化/劣化が生じなければ、減色や余計なメタ情報の削除などによって、サイ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Website security, made easy.
