Image Optimization: Detailed Overview, Guide, and Explanation of New Formats (WEBP, AVIF, JPGXL)

Hello, this is going to be a long read, so brace up. In this article, I’d take you through a detailed explanation of image optimization and the newest image formats you need to know. Ready? Let’s go.

Image Optimization and New Formats: Overview

Who doesn’t use images? Practically no one! From memes, infographics, marketing images to personal photos and images of notable places, we all deal with images (some may call them photos or pictures) every day. But there’s one thing about images that many people don’t still understand vividly. Yes, that’s image formats and image optimization.

Image formats are really worth detailing; you could get blocked out from uploading an image on a particular platform because the format isn’t supported. Also, you may have noticed that certain images won’t open when you try opening them with your regular image viewer application; yeah, that’s because the viewer doesn’t support the image format you’re trying to open.

On the other hand, talking about image optimization, it mostly refers to photographers – and also ardent internet users that want to rank their images on search engines or different platforms. Thus, image optimization centers on creating and delivering images in a particular format, size, and resolution.

Many of us know about common image formats like JPG, PNG, and BMP, but there are newer, advanced formats (like webP, avg, etc.) that are reshaping how images are served across the internet. These newer formats are already being supported by browsers, image viewing apps, and of course, social platforms.

This article deeply explains image optimizations: the act, practice, and how you can use newer image formats. Let’s get through this, below.

What Are The Common Image Formats?

As the world moves more and more towards digitalization, we tend to come across a variety of multimedia content, and images are the commonest we use and share. Including proprietary formats, there are pretty many image file formats, and they all serve different purposes.

Formats like JPG and PNG are widely known because they are the best format used for image sharing across the web and most social platforms. Notwithstanding, there are literally over one hundred common image formats. Well, not all of them are commonly used; hence, here are the most important ones you should know.

• JPG
• BMP
• PNG
• GIF
• SVG
• Exif
• TIFF
• WebP
• AVIF
• HEIF

Okay, that’s just a rundown of the commonest image formats you’d encounter timely. To better understand how to use these image formats, hereunder are concise introductions regarding all of the abovementioned formats.

1. JPG

Who doesn’t know about JPG images? Well, this image format has been existing since the early 1990s. The format was developed by the Joint Photographic Experts Group; it is a lossy file format that uses color sub-sampling for its size optimization. to reduce file size.

Also, since the JPG format is lossy, during conversion, JPG images lose basic information that was saved into the image (before the conversion). Regardless, JPG (JPEG) remains the most popular image format used by many internet users.  Quite unknown to many people, JPEG also offers lossless image storage, but it’s not commonly used.

Notes:

JPG images can be viewed on any device, and can also be shared anywhere on the web. However, one major disadvantage of JPG images is that they tend to degrade over time; this means that JPG files decrease in quality and size, each time they are edited and “re-saved.” JFIF is the exchange format in which JPEG images are stored with.

2. PNG

PNG was created to serve as a free, open-source alternative to GIF. The abbreviation is short for Portable Network Graphics. This image file format supports up to eight-bit paletted images, along with optional transparency for all the palette colors. Yes, if you notice, PNG images typically have transparent backgrounds.

Also, PNG images have up to 48-bit true-color; this stands in contrast with the GIF format, which only supports 256 colors, along with one transparent color. More so, PNG images typically have higher quality than JPG images. Professional photographers store photos in PNG format for editing purposes; however, after final editing, the images are typically distributed as JPEG because JPG’s compression technique delivers high-quality images with smaller file sizes.

Furthermore, it may interest you to know that PNGs store gamma and chromaticity data, which is awesome for color-matching on heterogeneous platforms. Yes, you can view PNG files across web browsers and photo viewing apps. The format is robust.

Notes:

Not everyone knows anyway, but there are animated formats gotten from PNG, viz, MNG and APNG; these animated formats are backward compatible with PNG, and can load on web browsers.

3. BMP

Well, there’s not pretty much stuff to say about this image file format, but it is a critical format you should know about. The BMP file format represents Windows bitmap format. It is a file format system for graphic files processed within the Microsoft Windows OS architecture.

Unlike JPG, BMP files are uncompressed, and thus, they are usually very large with lossless quality. Basically, BMP files open on Windows OS applications; regardless, there are several image viewers out there that support the format. But on mobile phones, you may find it difficult to open a BMP file using your default image viewer; you may need a third-party program that supports the format.

Logo designers and other graphic designers’ experts use this format because it guarantees lossless quality, regardless of how many times the BMP file is edited. It may interest you to know that BMP supports up to 16 bits per channel. However, BMP files aren’t transparent, which is in contrast to PNG and GIF format. But then, you can make a BMP file to be transparent by saving the file as a DXF file.

Notes:

The BMP format is Microsoft’s proprietary format for graphics images. It is a lossless format, and so, BMP images are large, you need to convert them to formats like JPG for easy sharing on the web or between devices.

4. SVG

Heard of vector graphics format? SVG (Scalable Vector Graphics) is a vector graphics format. It is an open standard file format developed by the World Wide Web Consortium. This format was created to serve as an all-purpose vector image format for use on the web and across platforms.

Well, unlike other popular formats, SVG doesn’t have a proprietary compression scheme; however, SVG apps can be compressed with programs like Gzip. Furthermore, SVG file formats play a crucial role in developing interactive web pages and web applications.

Notes:

You can optimize SVG files using solutions like Adobe Illustrator or SVGO. This is quite an advanced format, and therefore, not everyone knows how to handle files that are saved as SVG.

5. GIF

GIF, which is the acronym for Graphics Interchange Format, is a format for “animated” images. This format is pretty much similar to PNG – owning that it is transparent – and the quality does not degrade as it’s being re-saved. But, unlike PNG, the GIF format only supports 256 colors (8-bit palette).

However, GIF format can be “technically” upgraded to support 24-bit color depth. Regardless, this format is best for storing graphics with few colors – graphics like logos, shapes, and cartoon-style images. The format uses LZW lossless compression, and you can view GIF files with a wide range of software apps.

Notes:

A lot of people mistake GIFs for video; it’s not a video format. GIF has a low compression ratio when compared with modern video file formats.

6. EXIF

Exif is quite another popular format worth enlightening on. It is short for Exchangeable Image File Format, a format similar to JFIF and TIFF extensions. The Exif format is typically integrated into the JPEG-writing software tech used in most cameras to help retain the metadata info of the captured images when they’re being shared between cameras or editing and viewing software apps.

Thus EXIF saves the following information: camera settings, shutter speed, time and date, image size, exposure, name of the camera, compression, and color information.

Notes:

With the Exif standard, when you view images on any device, you can obtain the metadata info of the images. Well, this is not a standalone image format, rather, it is a standard, and relies on the host format, which can be JFIF (JPEG) or PNG.

7. TIFF

It’s getting more interesting, honestly. The TIFF (Tagged Image File Format) format is a flexible image format. Yes, it is flexible in the sense that TIFF images can be lossy or lossless. The format has .TIFF or .TIF filename extension.

What determines whether a TIFF image would be lossy or lossless is how the pixel data got stored. Though not commonly supported as JPG and PNG, modern digital cameras support TIFFs and use the LZW compression algorithm.

More so, while this format is not widely compatible with most web browsers, it is the standard format for printable files and documents. It may interest you to know that the TIFF format can handle device-specific color spaces like CMYK.

Notes:

Most OCR software programs and apps generate some kind of TIFF image for scanned text pages. TIFF is used for high-quality prints, archival copies, and professional publications. In addition, it can save transparency.

8. WebP

WebP is relatively new – released in 2010. The format is yet to be widely supported as JPG and PNG. But then, notwithstanding, WebP is becoming rapidly adopted as the standard format for images shared across the web. Interestingly, WebP images can be both lossless and lossy.

Well, here’s the intriguing fact about WebP; it is an image file format created by the American tech giant, Google. This format was developed to reduce image file size and speed up web page loading time. IT experts understand the importance of optimizing images for fast loading of web pages, and WebP is Google’s response to this.

Yes, as you may guess, WebP is projected to supersede JPEG (along with other popular formats) as the primary standard format for images (photographs and pictures) shared on the web. WebP uses VP8’s intra-frame coding and a RIFF-based container.

Furthermore, WebP images can be transparent – just as PNG. The truth is, WebP tries to integrate all the core features of old, predominant image formats, such as JPG, PNG, and GIF, to become a “one format for all” format for everyone using the web.

Notes:

One year after the release of WebP, in 2011, Google introduced “Extended File Format” to allow WebP support animation, XMP, ICC profile, and Exif metadata. Hence, it is possible to convert a GIF image to WebP and the image would remain animated.

9. AVIF

Similar to WebP, the AVIF file format is another awesome format you really should know about. Many experts are already endorsing AVIF because of the several benefits it provides for storing and distributing images across the web and other applications.

To start with, AVIF is an AVI image format, open-source, royalty-free, and supports all known image codecs. More so, the AVIF format offers significant file size reduction unlike JPEG, PNG, and WebP. Bothered about how you can open AVIF files? Currently, the format is supported on Firefox, Google Chrome, and Android.

This format was derived from keyframes extracts of AV1 video format, created by Alliance for Open Media (AOMedia) with the joint effort of Xiph.org, Cisco, and Google.

Notes:

The AVIF format supports high-dynamic-range (HDR) imaging, as well as supports 10- and 12-bit color pallets at full resolution. AVIFs are about 10 times smaller in size than other popular formats, and they are either lossy or lossless.

10. JPGXL

JPGXL, represented with the .jxl file extension, is a new image file format created by the developers of JPG and PNG, Joint Photographic Experts Group, in collaboration with Google and Cloudinary. It is a lossy/lossless bitmap image format, which implies that .jxl images can be lossless or lossy depending on the compression technique used.

You may be inquisitive to know the difference between this image format, and the infamous JPG format, right? Okay, here’s a breakdown of the format’s name, JEPGXL:

• JPEG: Joint Photographic Experts Group (the developers)
• X: The letter “X” has been part of several JPEG image standards since 2000, from JPEG XT to JPEG XR, to JPEG XS, and now JPEG XL.
• L: The “L” connoted “Long-term.” This is because developers hope that this format would outlive the native JPEG format.

Notes:

Apparently, JPGXL supports everything the native JPG format supports. However, it advances over the old JPG, PNG formats in the following aspects:

• Supports over a billion (230-1) pixels on each side
• Up to 4100 channels
• Progressive decoding
• Lossless JPEG transcoding
• Supports photographic and synthetic imagery
• Wide color gamut and HDR
• Supports animations
• Faster, royalty-free, and open-source

Understanding The New Image Formats (AVIF, WebP, JPEG XL, etc.)

Apparently, we expect to see new techs every day – new innovations, and improvements to existing techs. Gradually, images formats like JPG, PNG, GIF, and BMP are becoming overshadowed by these newer formats that promise more flexibility, stability, and easiness. What are these newer formats? We’re talking about Google’s WebP, AOMedia’s AVIF, and JEPG’s JPGXL.

These new image file formats support animated images and still images, which contrasts older formats like JPG and PNG (which are only for still images), and GIF (which are only for animated images). More so, AVIF, JPEG XL, and WebP formats have faster encoding and decoding speeds, as well as support lossless compression.

Interestingly, these formats are becoming widely supported on web browsers, image viewers, and other applications where image sharing or uploads are allowed.

Vectors Vs. Bitmaps: What’s The Main Thing?

Generally, graphical images are categorized into two forms: Vectors and Bitmaps. These two categories are supported by virtually all photo editing software applications. Well, as you may guess, they have several unique differences and serve different purposes. Also, there are aspects where vectors and bitmaps seem to be the same – yeah, they’re both images and can be viewed with different apps and browsers. To better understand the difference between vectors and bitmaps, let’s take them one after another.

Vectors

Vector images are birthed from shapes and they contain a geometric description. These types of images are easy to scale, and they render smoothly on any display size. However, you may need to “Rasterize” vector graphics files before they can appear on digital monitors. But, interestingly, you can view vector graphics via analog CRT technologies used in radars, electronic test equipment, laser shows, medical monitors, and early video games.

Furthermore, vector images are typically lossless – they don’t lose their quality or pixelization when scaling. There are 2D and 3D vector image formats, respectively. Regardless, the common, popular formats include SVG, VML, SWF, CGM, XVL, and many others.

Pros:

• Comprises mathematical shapes
• Scalable without losing quality
• Used for more specialized purposes
• Resolution-independent; made of solid blocks of color

Cons:

• Not easily convertible to other common formats
• Not widely supported by image viewing apps and web browsers

Bitmaps

Bitmap images are the regular, common formats we use every day, which include JPG, PNG, and GIF. But unlike vector images, bitmap images tend to lose their quality when resized much larger.  They are made up of pixels arranged in grids; hence, they may become blurry when enlarged more than necessary.

More so, it is easier to convert bitmap images in-between formats; for example, converting JPG to PNG or vice versa. It is also easier to convert vector formats to bitmap formats, but it’s quite difficult to convert the other way round – bitmap to vector.

Since bitmaps are resolution-dependent, it is best not to resize them, so you don’t tamper with the image quality. However, you can scale bitmap images; this means improving the pixels in bitmap images – making them larger. But, still, there’s a level you’d upscale too, then you’d notice that the image is beginning to look “scraggy.”

Pros:

• Easily convertible to any format, be it vector or another bitmap format
• More widely supported than vector formats
• Captures more details with more pixel counts
• Commonly used every day by many people

Cons:

• Loses quality when scaling
• Restricted to a particular shape

Comparing Vector Images and Bitmap Images

With a clear understanding of these two common graphics image types, here’s the comparison.

Vector images are quite advantageous because when enlarged, they maintain a smooth, lossless appearance, and this stands in contrast to bitmap images. Below is a graphical example.

Image 1: A raster/bitmap image enlarges 12x (image credit: FCIT)

Image 2: A vector graphics enlarged 12x (image credit: FCIT Math Illustrations)

This simple comparison shows how vector images are more scalable than bitmaps. Literally, when vector images are enlarged, the image is simply redrawn using the mathematical formula behind it; hence, you’d still get a smooth final image that’s almost like the original.

However, you can’t scan an image and save it as a vector image, but you can scan and save images in bitmap formats. You need to rasterize vector images to become bitmap images before you can view them on most digital displays or monitors.

When To Use Bitmap or Vector Images

There are instances where you should use bitmap images instead of vector images, and the same goes, the other way round. So, talking about when to use bitmap images, that should be when the image is to be shared on the internet, uploaded to a social platform, or used for adverts/marketing purposes.

That said, if you run an eCommerce website, images of your products should be in Bitmap formats, preferable JPG or PNG. More so, if the image is for promotion or marketing, it is best to use JPG, PNG, or GIF formats.

On the other hand, vector images are best if you’re building a web program or application. It doesn’t stop there, for logos, printing, illustrations, signs, animation, and infographics, vector image formats are more suitable. UI/UX designers make use of vector images for project-specific purposes.

Hopefully, this concise highlight explains the scenarios where bitmap or vector image formats can be applied, respectively. Notwithstanding, there could be special situations where vector formats may be used to save an image (which primarily should have been saved in a bitmap format).

Best Image Format For Different Scenarios

As hinted above, there are hundreds of image file formats, and yes, they are not “useless.” Each of those formats is created for a purpose; it’s just that, the purposes are quite specific; hence, until you’re out to achieve those “specific” purposes, you may never come across, or use those image formats.

In contrast, there are formats we use every day, this includes best SVG, PNG, WEBP, AVIF, and JPEG XL. So now, when is it best to use, or save images in these formats, respectively?

1. SVG (Scalable Vector Graphics)

As a vector image format, the SVG format is used to store logos, infographics, and other related graphics works.

2. PNG (Portable Network Graphics)

PNG format is generally used for images that would be uploaded on websites, shared on social media, or images to be used in a graphics design.

3. WEBP

WebP seems to be the image format for webmasters, bloggers – generally people who operate websites. The format aims at creating smaller, yet high-quality images that load faster on web browsers.

4. AVIF

AVIF shares so many similarities with WebP, and as such, it can also be used in scenarios where WebP should be used. This format is 50% smaller than the standard JPEG format. If you want to achieve lossless image quality while keeping the image quality untouched, AVIF is the format to use.

5. JPEG XL

Poised to replace/dethrone the native JPEG format, JPEG XL is suitable for all scenarios where JPG, PNG, or GIF should be used. This new format reduces the image size and still retains the quality.

Image SEO Tags and Picture Tags Explained

Image SEO tags mostly apply to bloggers and content writers who need to rank the images in their blog posts on SERPs. So, what does it imply?

Yoast SEO recommends that the following should be considered when checking out image SEO tags:

• JPEG for larger photos or illustrations
• PNG if you want to preserve the image background transparency
• WebP in place of JPEG and PNG for the same reasons said above.
• SVG format for logos and icons
• Use Captions and “Alt” texts

Captions are “Mini Descriptions” that accompany the image in a publication or article. They help the readers to better understand the messaged being relayed in the image.

ALT texts, on the other hand, are “Alternative Texts” that explain the image to search engines. Also, in situations (such as network failure) where an image can’t be displayed to the viewer, the ALT text would be printed instead.

Picture Tags

If you’re uploading an image to an HTML page, you need to be aware of the tags to use, such as <img> or <picture>picture</picture>.

To upload an image, here’s the tag: <img src=”yourimage.extension” alt=”add_an_ALT_name” width=”auto” height=”auto”>.

The <img> HTML tag consists of two important attributes, the “src” which means “source” and “alt” which hold the ALT text of the image being uploaded.

For pictures, the HTML tag is

<picture>

  <source=”(min-width:500px)” srcset=”the_image.jpg”>

  <img src=”the_image.png” alt=”add_alt” style=”width:auto;”>

</picture>

Unlike the <img> tag, the <picture> tag provides more flexibility and contains two major attributes, the “source” tags (can be many source tags) and one “img” tag. Actually, the img tag acts as a “fallback” resort, just in case the editor or browser is unable to read parse “source” tags.

Optimization Tools For Advanced Formats

Hereunder are tools you can use to optimize, compress these advanced image formats: PNG, WEBP, AVIF, and JPGXL.

• TinyPNG for PNG images
• CWebP tool for WebP formats
• Libavif for AVIF format
• CJXL for JPGXL format

Final Notes and Summary

As technology keeps advancing, apparently, it’s time to switch from native JPG, PNG, and GIF to the cutting-edge formats, AVIF, WEBP, and JXL. These newer formats can be used to store logos, product images, standard pictures, and photos, and they are lossless. Also, these newer formats guarantee up to 50% size reduction, more flexibility, and faster encoding/decoding speeds.

Sources/References:

• https://etc.usf.edu/techease/win/images/what-is-the-difference-between-bitmap-and-vector-images/
• https://cloudinary.com/blog/how_jpeg_xl_compares_to_other_image_codecs
• https://yoast.com/image-seo/
• https://www.w3schools.com/tags/tag_picture.asp
• https://www.w3schools.com/tags/tag_img.asp
• https://en.wikipedia.org/wiki/Image_file_formats
• https://github.com/AOMediaCodec/libavif

Originally posted on October 27, 2021 @ 7:21 pm