{"id":6385,"date":"2020-09-21T09:49:00","date_gmt":"2020-09-21T08:49:00","guid":{"rendered":"https:\/\/www.bronco.co.uk\/our-ideas\/?p=6385"},"modified":"2020-09-16T14:52:13","modified_gmt":"2020-09-16T13:52:13","slug":"whats-a-webp-and-other-image-formats","status":"publish","type":"post","link":"https:\/\/www.bronco.co.uk\/our-ideas\/whats-a-webp-and-other-image-formats\/","title":{"rendered":"What\u2019s a WebP? And other image formats"},"content":{"rendered":"\n

Based on Internet mentions you\u2019d imagine that the humble GIF (hard-G) is the only image format anyone uses. But 33 years after its initial release the only thing it\u2019s good for is poor quality animations, and even then, there\u2019s better alternatives.<\/p>\n\n\n\n

There\u2019s actually a huge range of different image file formats, some like .psd (Adobe Photoshop) are more like documents and specific to a particular application. Meanwhile JPEG\/JPG is probably the most universal image format, itself 27 years old, and widely used on the web and beyond.<\/p>\n\n\n\n

Modern image formats<\/h2>\n\n\n\n

For raster images we\u2019ve been mostly limited to either JPG, GIF or PNG (23 years old) for a number of years. Yet in recent years we\u2019ve seen newer image formats launch looking to supersede this trinity of image powerhouses.<\/p>\n\n\n\n

Below we\u2019re going to recap the existing formats as well as introduce a couple of newer formats that can be used today\u2026<\/p>\n\n\n\n

GIF \u2013 Graphical Interchange Format<\/h3>\n\n\n\n

Good<\/strong><\/span> \u2013 Keyframe animations | Bad<\/strong><\/span> \u2013 Everything else<\/p>\n\n\n\n

Though GIF\u2019s can be used for various types of images, today it\u2019s really only utilised for simple keyframe animation due to its ubiquitous support.<\/p>\n\n\n\n

With a limited colour palette of 256 colours and only binary transparency (no semi-transparency) the GIF doesn\u2019t offer many benefits over other image formats when creating non-animated imagery. Before PNG support become more widespread the GIF would be the go-to format for icons and transparent images, but with some exceptions most would tend to gravitate towards using PNG nowadays. Leaving GIF resigned to strange animations like this\u2026<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

PNG \u2013 Portable Network Graphics<\/h3>\n\n\n\n

Good<\/strong><\/span> \u2013 Transparency & flat\/limited colour images | Bad<\/strong><\/span> \u2013 Complex photography<\/p>\n\n\n\n

Not supported in early web browsers, PNG became the alternative to JPG when transparency was required within an image. It also supports keyframe animation, but through extensions that aren\u2019t as widely supported as the GIF and so this has never really taken off.<\/p>\n\n\n\n

Though the ability to add semi transparency to images is the key benefit of the PNG format, its lossless compression means any photographic imagery with lots of colour or complexity often results in a larger file size than JPG. This usually means a better-quality image, but the resulting file size often means it\u2019s a no go for anyone wishing to keep their website lightweight.<\/p>\n\n\n\n

Instead PNG images are best reserved for images with a lot of flat colour and sharp lines, like the example below. But in this instance, some would suggest the SVG image format would be a better option.<\/p>\n\n\n\n

\"\"
JPEG (36kb with artifacts) vs PNG (32kb with minimal blur)
Both images zoomed to 150%<\/figcaption><\/figure><\/div>\n\n\n\n

JPEG\/JPG – Joint Photographic Experts Group<\/h3>\n\n\n\n

Good<\/strong><\/span> \u2013 Photography | Bad<\/strong><\/span> \u2013 Transparency, also becoming obsolete<\/p>\n\n\n\n

The JPG used to rule supreme when it came to photographic imagery. Depending on the quality selected you\u2019d often find a better balance between image quality and file size than the formats we\u2019ve mentioned thus far.<\/p>\n\n\n\n

It\u2019s lack of support for transparency has limited the kind of images you\u2019d use this format for, and its lossy compression can result in artifacts on images that include text or other sharp lines, leaving photography the JPG\u2019s main domain.<\/p>\n\n\n\n

Attempts have been made to update the format (JPEG 2000) but these have never gained traction and though new encoders like Mozjpeg are producing smaller file sizes it appears, on the web at least, that the JPG\u2019s days are numbered.<\/p>\n\n\n\n

\"\"
JPG Image @ 10% quality, accentuating the pixelation around crisp lines, such as text<\/figcaption><\/figure><\/div>\n\n\n\n

WebP \u2013 [Website Picture? Even wiki doesn\u2019t know]<\/h3>\n\n\n\n

Good<\/strong><\/span> \u2013 Almost everything | Bad<\/strong><\/span> \u2013 Potential to be superseded quickly<\/p>\n\n\n\n

Utilising both lossy and lossless compression, as well as transparency, the WebP image format produces smaller file sizes of comparable quality to both JPG and PNG image formats. It\u2019s one of a growing number of competing formats that are derived from video compression techniques in an attempt to produce ever smaller file sizes without sacrificing quality.<\/p>\n\n\n\n

Though released in 2009 the format has only recently been gaining traction online, largely in part to the type attribute of the <picture><\/code> element allowing developers to provide multiple image formats for the browser to select the best one it supports.<\/p>\n\n\n\n

But as we\u2019re about to see, WebP isn\u2019t the only new image format, and it might just find itself superseded before it\u2019s even reached widespread adoption.<\/p>\n\n\n\n

<picture>\n    <source src="image.avif" type="image\/avif">\n    <source src="image.webp" type="image\/webp">\n    <img src="image.jpg" alt="Image of April Identiti2 1 Door Offset Quadrant" width="560" height="560"> <!-- fallback -->\n<\/picture><\/code><\/pre><\/div>\n\n\n\n
AVIF \u2013 AV1 Image File Format<\/h3>\n\n\n\n
Good<\/strong><\/span> \u2013 Everything | Bad<\/strong><\/span> \u2013 Exporting images can take a little time<\/p>\n\n\n\n
Like WebP, the AVIF image format is based on a video compression engine; AV1 to be more precise. First appearing on Netflix in December 2018, with an in-depth article<\/a> following in February 2020 this format has gained traction really quickly.<\/p>\n\n\n\n
Though only fully supported by default in the Chrome browser (at time of writing<\/a>), support can also be enabled in Firefox with other browser makers likely to provide support soon.<\/p>\n\n\n\n
With WebP offering a new format that somewhat combines everything that\u2019s great about the JPG and PNG formats into a smaller file size, the only benefit that new formats (which offer the same features) can bring is how well they compress a image and balance quality against file size; AVIF really nails this<\/a>.<\/p>\n\n\n\n
As the link above shows, AVIF delivers far smaller file sizes than other formats, at a quality that most would find acceptable across a range of different image types, but as the format is so new it\u2019s yet to be proven when in the hands of designers & developers.<\/p>\n\n\n\n
One downside of AVIF appears to be that exporting images can be a little CPU intensive and so takes a little longer than other formats to compress. But unless you\u2019re batch processing numerous images you\u2019re unlikely to be deterred and be more than happy to benefit from the reduced file size, especially on the web.<\/p>\n\n\n\n
SVG \u2013 Scalable Vector Graphic<\/h3>\n\n\n\n
Good<\/strong><\/span> \u2013 Vectors | Bad<\/strong><\/span> \u2013 Photography and file size can easily balloon<\/p>\n\n\n\n
SVG is a vector image format rather than a raster format like the above formats. This makes it especially useful for logos and icons where sharp lines, irrespective of zoom or pixel density, are a must have.<\/p>\n\n\n\n
One downside to SVG is it can be easy for the file size to balloon if the image is complex and contains a lot of paths\/points. Vector images sourced from stock image websites often lead to large SVG file sizes as these have often not been well optimised for the web.<\/p>\n\n\n\n
Unlike some other formats SVG has undergone continued development so you might find yourself selecting a particular format (1.0, 1.1 or 2.0) when exporting these in applications like Illustrator. But even when using software as feature rich as Illustrator you\u2019ll find the file size can be further reduced by using SVGO.<\/p>\n\n\n\n
Any more?<\/h2>\n\n\n\n
There are other images formats we could list, such as JPEG-XL or WebPv2 but with the small file sizes that AVIF can achieve it\u2019s tough to imagine how much improvement these new formats could deliver in terms of file size vs quality.<\/p>\n\n\n\n
For now, the image formats listed in this article are your go to for delivering images on the web.<\/p>\n","protected":false},"excerpt":{"rendered":"
Based on Internet mentions you\u2019d imagine that the humble GIF (hard-G) is the only image format anyone uses. But 33 years after its initial release the only thing it\u2019s good for is poor quality animations, and even then, there\u2019s better alternatives. There\u2019s actually a huge range of different image file formats, some like .psd (Adobe […]<\/p>\n","protected":false},"author":2,"featured_media":6386,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[2],"class_list":["post-6385","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-and-ux"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/posts\/6385","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/comments?post=6385"}],"version-history":[{"count":0,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/posts\/6385\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/media\/6386"}],"wp:attachment":[{"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/media?parent=6385"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bronco.co.uk\/our-ideas\/wp-json\/wp\/v2\/categories?post=6385"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}