画像最適化戦略 AVIF 編 | blog.jxck.io
Intro 本サイトの PNG/JPEG で提供している画像については、よりサイズが小さくなりやすい AVIF 形式を提供し、対応ブラウザに配信するようにした。 フォーマットを出し分けるため、画像の指定は <picture> 要素を用いて対応した。 画像最適化シリーズ第 6 回目のエントリである。 画像最適化戦略 PNG/JPEG 編 画像最適化戦略 Picture 編 画像最適化戦略 WebP 編 画像最適化戦略 SVG/Font 編 画像最適化戦略 Lazy Loading 編 > 画像最適化戦略 AVIF 編 AVIF AVIF は、ロイヤリティフリーなコーデックを目指して AOMedia が開発した AV1 を、画像に転用したものだ。 AV1 Image File Format の略とされ、 AV1 の I フレームを静止画として表示するイメージだ。 Chrome 85, Fire
Using Modern Image Formats: AVIF And WebP — Smashing Magazine
In this article, we’ll highlight how modern image formats (AVIF or WebP) can improve compression by up to 50% and deliver better quality per-byte while still looking visually appealing. We’ll compare what’s possible at high-quality, low-quality and file-size targets. We’ve recently published Addy’s Image Optimization book with everything you need to know about images, how to compress, serve and ma
Imgbot - Automatic image compression
Why should I optimize my images? When you’re shipping code and hitting deadlines, it’s easy to forget about optimizing your images. But the truth is if you don’t optimize your images, you are losing out. Web pages with optimized images load faster. Faster pages have higher conversion rates, lower bounce rates, and happier users. And of course, smaller images reduce bandwidth costs for you and your
Maximally optimizing image loading for the web
In this post I'll outline 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display. I'll present them in the form of an annotated HTML example to make it easy for folks to reproduce the results. Some of these techniques are more established, while others are somewhat novel. Ideally, your favorite mechanism for pub
AVIF for Next-Generation Image Coding
By Aditya Mavlankar, Jan De Cock¹, Cyril Concolato, Kyle Swanson, Anush Moorthy and Anne Aaron TL; DRWe need an alternative to JPEG that a) is widely supported, b) has better compression efficiency and c) has a wider feature set. We believe AV1 Image File Format (AVIF) has the potential. Using the framework we have open sourced, AVIF compression efficiency can be seen at work and compared against
img の srcset 指定時に選択される画像 | blog.jxck.io
Intro <img> や <picture> で srcset に複数の画像を指定することで、デバイスに応じて適切な解像度の画像を提供することができる。 この画像が、どういった条件で選択されるのかを頭では勝手に理解していたつもりだが、理解とは違う挙動があったため、仕様と実装を確認した。 その記録を記す。なお、先に言うがどのブラウザも 仕様に準拠して 実装されている。 srcset attribute まず以下のようなコードを考える。 <style> body { margin: 0; } </style> <body> <img id=hero_image src=320x240.png srcset=" 320x240.png 320w, 640x480.png 640w, 800x600.png 800w, 1024x768.png 1024w, 1280x960.png 1280w
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Chrome Developers on Twitter: "🎨 https://t.co/R8ssqijW2L now supports AVIF! ➡️ Next-generation open image format. ➡️ Significantly outperforms JP… https://t.co/LJM4DlOO2a"
Chrome Platform Status
画像の最適化 | Web | Google Developers