Definitive guide
Image Format Selection
Design 101: Image Format Selection For Faster Load Times On Websites
Last March, I shared an easy guide on how to make photos load faster on your website and touched on the different file formats that make that possible. But that post is more on photos. What about other types of images? No worries! I’ll now share tips on image format selection for faster load times on websites.
Before that, let me introduce the different image formats a little more. This is important to understand if you’re an entrepreneur or business owner. Doing so enables you to work more harmoniously with your website designer or come up with a better-designed website yourself.
An Overview of Image Formats
Did you know that image file formats fall under two major categories? That’s raster and vector file formats. Let me discuss each a little.
I. Raster
Raster images are pixel-based images with either lossless or lossy compression. This means that the image is produced by pixels put together. The more pixels in an image, the higher is its resolution. RAW, BMP, JPG, TIFF, PNG, PSD, WebP, and HEIF are examples of raster images.
II. Vector
Vector images, on the other hand, are curved-based graphics whose resolution are dependent on the created image. PDF, AI, EPS, and SVG are some examples of vector images.
Corel expounds that vector images store data through mathematical equations to come out with an image. Vector images are scalable without losing image quality since the mathematical rules are enforced so that the values retain its exact proportion. This is why vector graphics remain crisp, sharp, and colorful no matter the image dimensions and despite compression.
With that said, let’s now have some fun by taking a look at each of these image file formats in detail.
Image Formats: Up Close and Personal
You’ve probably been dealing and saving images in the file formats enlisted below without having a basic background of their differences. What makes each of these unique on its own? Here’s what I found out:
1. RAW
RAW is an image file type often used for photographs or any image in its original, unprocessed format. RAW files have the highest resolution, making it the best format for an image file since it is capable of being edited yet result in better quality. RAW files can be converted into other image file formats such as TIFF and JPEG.
Most high-end digital cameras like Canon and Nikon automatically saved photographs in RAW format in the early 2000s but now have the option to save it in JPEG and HEIF.
2. BMP
BMP is an image file type that’s short for Bitmap. According to PDFCandy, Bitmap was created by Microsoft in the 1990s for use in the Windows Operating System. BMP image formats are raster graphics with 24bits per pixel of uncompressed data.
Cloudinary adds that BMP files are able to store two-dimensional images that may or may not include alpha channels. Since it stores colored data as it is (meaning it can be compressed without losing quality), BMP files are best for high quality digital artwork and photographs with millions of colors.
Due to its big file size, BMP files are only used by 0.1% of all websites as of May 2024 as per W3Tech.
3. TIFF
Similar to the BMP format, TIFF image file types have lossless compression capabilities resulting to high quality images. TIFF, which stands for Tagged Image File Format, comes with higher resolution than BMP since it has more than 284 trillion colors.
Images with this file format come with very high quality—sharp and clear—and are best for printing photographs, scanned documents, and Xrays. Interestingly, 0.1% of all websites use TIFF as of May 1, 2024 as per W3Techs.
4. GIF
Wikipedia reports that GIF, which stands for Graphics Interchange Format, was introduced in June 1987 by CompuServe Computer Scientist Steve Wilhite to enable easy download of low quality file sizes for slow modems. GIF uses lossless compression but up to 256 colors using the 24-bit RGB palette only. It enables animation of several images with good visual quality using the Lempel-Ziv-Welch algorithm patented by Unisys in 1985.
Accordingly, there was an issue in the use of the patent between CompuServe and Unisys and eventually lead to the development of the Portable Network Graphic (PNG) in 1994. There has been several versions of the GIF over time and is now able to support looping animations, transparent backgrounds, and even videos.
GIF’s features has made its use in the World Wide Web widespread since its introduction almost four decades ago. But the onset of better file formats with better quality and low file size has decreased its usage over time. In fact, W3Tech reported that, as of May 2024, only 20.5% of all websites use GIF.
5. PNG
Speaking of PNG, this image file format developed by Thomas Boutell and company is used by 81.5% of all websites as of May 2024. It is the leading file format in use because of its ability to display 16 million colors using the 16,777,255 ARGB palette at a small file size, as per Quora.
PNG image files have transparent capabilities and is good to use for banners, icons, infographics, logos, simple graphics, and screenshots. It also uses lossless compression so it maintains the high resolution quality of the image.
6. APNG
APNG, on the other hand, is the animated version of PNG. So it’s basically the same as PNG except that it allows transparent animated graphics like the GIF but in millions of colors. The animation is, therefore, vibrant and smoother in transition as compared to GIF.
In addition, APNG is more flexible since it allows speed and timing controls, frame delays, and variable frame rates for animations.
7. JPEG / JPG
Unlike the PNG, JPEG or JPG do not allow transparency and has a lossy raster format resulting to a lower file size. This lower file size has made JPEG the second most-common used image format on the web with 77.1% of all websites as of May 2024.
99Designs explained that lossy formats assess the unnecessary data in a file, remove it, and decreases the number of colors in an image to come out with a lower file size. Despite the low file size, JPEG produces high-quality images with millions of colors.
JPEG was named after the Joint Photographic Experts Group, which introduced the image format in 1992 as a standard. The Joint Photographic Experts Group is a subcommittee of the International Standards Organization (ISO), the worldwide body from 167 countries that assesses, certifies, and governs quality standards in processes of all kinds.
JPEG and JPG are interchangeable and refer to the same image format. JPG came to existence since Microsoft only allowed a three-letter filename for Windows when it was released. So they had to remove the “E” in “JPEG” for the file to be supported in the said operating system. Eventually, Microsoft supported both file types.
8. PSD
PSD stands for Adobe Photoshop Document. PSD became known after the then-Adobe Systems Incorporated developed Photoshop in 1990 as its file format.
Adobe said PSD can hold a maximum of 30,000 pixels in width and height. It is an image file resulting from several layers of images, which are capable of being edited.
PSD files are high resolution images with big file sizes that require to be converted to JPEG, PNG, and other file formats for it to be viewable outside of the Adobe Photoshop software.
9. SVG
SVG stands for Scalable Vector Graphics, which is a commonly used open-sourced file for vector graphics. It was created in the latter part of the 1990s by the World Wide Web Consortium (W3C). W3C’s goal was graphics creations that can be seamless integrated with supplementary web technologies like HTML and CSS; web applications; and websites.
Since an SVG is created through a mathematical equation, web designers and developers can simply use scripting languages like JavaSCript to edit the image according to their needs. SVG, being a native of the World Wide Web, is used by 56.4% of all websites as of May 2024 due to its high quality yet low file size.
Other vector graphics change their file names because they are solely owned by a company. Examples of these are as AI for Adobe Illustrator vector graphics, CDR for CorelDRAW vector graphics, and PDF or the Portdable Document File vector graphic also from Adobe.
As you know, PDF is the result of converting documents into high-quality image format. While AI and CDR are vector formats used for designing or creating high-quality digital graphics and artwork.
10. EPS
EPS or Encapsulated PostScript Files was introduced as an open source image format 15 years before SVG. But it was Adobe in 1982 that modified EPS into having large-format printing capacities using lossless compression technology. This became useful in creating high-resolution posters and billboards.
In addition, EPS can contain both raster and vector graphics. It is then good to use for creating graphics with complex effects, gradients, or patterns due to its high visual quality though at a bigger file size than SVG.
11. ICO
ICO is short for icon since it pertains to images created for Microsoft Windows computer icons. It is a small image normally 256 x 256 pixels in 8 bits of transparency and 24 bits of color representing a computer application in Windows.
Developed by Microsoft in 1985 in its Windows 1.0 release, ICO has undergone several modifications and is now used in web development for the favicon.ico files. The favicon.ico file is 16 x 16 pixels in size that is normally seen at the topmost part of a web browser beside the page title. It is scalable and may contain several tiny images of varying sizes.
The favicon.ico file usually shows the logo of the company owning the website being browsed. Thus, it is used to identify a website and is useful for branding and SEO. Yet only 0.2% of all websites use ICO as of May 2024.
12. WebP
WebP is a raster image capable of lossless and lossy compression. Created by Google in 2010, WebP combines the features of a PNG to that of a GIF. Thus, WebP are high-quality transparent images with ability to display 16 million colors and be animated at a lower resolution or file size.
WebP is the counterpart of the WebM video format of Google, as per PC Mag. This is why Google calls WebP as “an image format for the web”, which is obviously seen through its name.
According to this Big Tech company, they created WebP with the web developers and designers in mind and the goal of faster websites through richer-quality yet smaller-sized images. WebP allows web developers and designers to choose the type of image compression according to their needs.
Data show that lossless WebP images are smaller in file size than PNG images by 26%. Lossy WebP images, on the other hand, are smaller in file size yet of the same quality with JPG images by 25% to 34%.
In terms of transparency, WebP lossless images using transparency contains only 22% more bits than PNG images. While WebP lossy images using transparency is thrice smaller in file size than PNG. This is the reason why more websites have been using WebP, though this is still comparatively fewer (12.4%) than PNG and JPEG usage as of May 2024.
13. HEIF
HEIF or High-Efficiency Image File Format was launched five years after WebP as a direct and more optimized version of JPEG. HEIF was developed by the Moving Pictures Expert Group (MPEG)–a committee of ISO—as part of the MPEG-H media suite. It was initially a part of ISO’s Base File Media Format in 2001 as part of the development of JPEG 2000 and MP4.
As indicated by its full name, HEIF has the same visual capabilities of JPEG but at a relatively lower file size by as little as 37%.
14. AVIF
AV1 Image File Format or AVIF is the youngest image file format on the block since it was only developed in 2019 by the Alliance for Open Media (AOM). The Alliance for Open Media refers to AVIF as the “next level image file format” since it accordingly resolves the shortcomings of PNG, JPEG, and WebP.
AVIF was based on AV1 codec used for video streaming applications that provide better image quality and compression. This makes AVIF revolutionary in its color profile, compression techniques, and smaller file size.
AVIF is 78% smaller on average than standard GIF files since it supports transparancy at a 3-colorspace-channel of having 12 bits maximum color depth (16 million colors), AOM said. This translates to exceptional visual beauty at finer quality per bytes, making them the most prominent in performance at the smallest file size.
Despite its superior features, AVIF is only used by 0.1% of all websites as of May 2024.
What are the factors to consider in image format selection for faster load times on websites?
Now that you have come to know each of these image formats in detail, it’s time to identify the factors to consider in which ones work best for faster load times on websites.
There are two main factors to consider for image format selection for faster load times on websites. These are based on the type of website you have and the type of images you will use in the website.
1. Type of Website
Is your website an e-commerce or a corporate type of website?
Corporate websites normally have fewer images in it as compared to e-commerce websites that have voluminous images due to product pictures, product thumbnails, product close-up or zoomed photos, and call-to-action buttons on top of regular images like background graphics, logos, icons, and photos to accompany copy or text.
This does not include product specifications and details that comes as a downloadable catalogue, which would normally be in .pdf format. Or videos that are usually come with thumbnails, too.
2. Type of Image
Thus, the type of images you will use in your website will also be a factor to consider for the format selection for faster load times.
There are several types of images used in a website: backgrounds or full-width, hero, banners, blog, favicon, icons, thumbnails, featured, slideshow or scrollers, featured images, icons, logos, thumbnails, and graphics.
Since 60% of a webpage’s typical download size comprise images as per Pingdom, it would be wise to choose the right image format for your website. This is important for SEO ranking since the number of images and their respective sizes is a factor Google looks into.
These are the same factors that affect bounce rates because visitors often leave immediately when a website takes too slow to load. Higher bounce rates may mean poor user experience, lower site traffic, and lesser conversion rates.
In general, designers suggest having file sizes of not more than 500 MB per image but dependent on its type. Shopify recommends backgrounds or full-width images to have a file size of 20MB, hero images with 10MB, banners with 150KB, blog images with 3MB, and logos with 1MB.
I personally prefer using less than 300MB in my website with images having a 1200 x 800 dimension. I used to optimize these images using TinyPNG before uploading it to WordPress. However, I installed an image optimizer plugin and that does wonders in compressing the images automatically once uploaded into WordPress.
Now that you are aware of these factors, let me discuss the pros and cons of image format selection.
Image Format Selection: Pros & Cons
Looking at the advantages and disadvantages of using each image format would help you better decide on which to use for faster loading speeds. Here are the advantages and disadvantages of each type of image format:
1. RAW
Pros:
- Contain the most detail in contrast to other vector and raster and vector image formats
- Accommodate millions of colors with higher RGB tonal values compared to JPEG
- Retains compression quality despite changes in size or specification
- Greater control in editing or modifying the image at no risk of changing image quality
- Capability to merge with another RAW file for panoramic and HDR editable images
- Great for high-resolution photographs
Cons:
- Readable from cameras and special User Interface (UI) editing software only
- Comes in very large file sizes, which means larger storage space and higher memory usage
- Takes time to load and work with
- Requires conversion into JPEG, TIFF, or PNG to be printed or viewable as a stand-alone file
- Not supported by or compatible with many software, systems, and internet browsers
- Not for easy-viewing and sharing
2. BMP
Pros:
- Great for icons, 2D photos, digital art, screengrabs, and technical drawings
- Stores both color image and monochrome data in various bit/color depths
- Normally comes in large file sizes but capable of lossless compression
- Stores complex, high-quality images while maintaining image detail and accuracy
- Compatible with various software, systems, and browsers
- Comes with a simple structure where the color data of each pixel is stored in a straightforward array, making it easy to deciper
- Stores color data without losing image quality despite editing and multiple resaving
Cons:
- Comes with very large file sizes
- Has limited features: no layer capabilities and transparency
3. TIFF
Pros:
- Produces first-rate quality pictures
- Best for creating cool graphics and designs
- Ideal for saving digital copies of documents and reports, X-rays, and scans
- Great for printing sharp and clear non-fading photographs
- Keeps image details and special effects intact at no loss of quality even after compression
- Compatible with various software, systems, and internet browsers
- Supports layers and complex designs using various color profiles like CMYK, LAB, RGB, etc.
- Capable of transparency for better visual effects
- Powerful security features for storing delicate data or information.
Cons:
- Comes in a enormous file size (up to 4GB)
- Requires more computer storage space or memory usage
- Difficulty in sharing or takes slower in transfering or loading
- Complicated editing requires experts
4. GIF
Pros:
- Supported on all web browsers. Low file size for an animated image
- Ideal for creating simple animated graphics with solid colors
- No need for scripts and plugins for animation
- Best for buttons, banners, cartoons, emojis, icons, internet memes, loaders, logos, stickers, email animations, and text animations
- Uses lossless compression (maintains quality after compression)
- Compatible with various software, systems, and internet browsers
Cons:
- Limited color palette and forced compression mean GIFs aren’t always great quality.
- Negatively affects SEO and website accessibility if used extensively in a website
- Limited to 256 colors that result to dithered or poor-quality images
- Comes in a large file size compared to PNG or JPEG
- Limited functionality and appeal since it does not come with sound or audio
5. JPEG / JPG
Pros:
- Supports millions of colors
- Produces high-quality, detailed photos with gradients
- Comes in small file size, making it easy to share and quick to load
- Compatible with many software, systems, and internet browsers
- Good for complex images or photos (e.g. uses gradients or many colors)
- Easy to compress or optimize without losing resolution or quality
- Good for printing artwork and photos
Cons:
- Does not have transparency or layered features
- Does not allow animation
- Too much resizing and compression results to blurriness or noise in the image
- Reduction of quality after every editing or saving
6. PNG
Pros:
- Comes with transparency features of up to 360-degrees
- Produces high quality (crystal clear) photos and graphics
- Smaller in file size than TIFF and BMP
- Equipped with lossless compression
- Compatible with various softwares, systems, and internet browsers
- Easy to edit and modify
- Works best with RGB colors
- Best for cutouts, digital drawings, illustrations, icons, interface design, logos, overlays, website graphics, and professional-looking visuals
- Good simple graphics with solid colors and sharp edges like diagrams, charts, and screenshots
Cons:
- Limited color combination (not all CMYK colors)
- Limited color depth (8 bits per channel: 24 bits RGB, 32 bits RGBA)
- Limited
- No layer and animation capabilities
- Not ideal for printing images or photos
- Comes in a larger file size than GIF and JPEG
7. APNG
Pros:
- Better color depth than GIF
- Comes with alpha transparency and animation capabilities
- Similar resolution and color features to PNG
Cons:
- Not compatible with all software, systems, and internet browses
8. EPS
Pros:
- Resolution is not affected by file size, image quality stays the same
- Compatible with most vector editing softwares
- Capable of working with raster images
- Best for creating vector images that are responsive to different devices
- Ideal for designing website design and templates
- Equipped with lossless compression
- Creates high quality images with smaller file sizes
Cons:
- Requires conversion to PNG, GIF, or JPEG for viewing and sharing outside of UI vector editor
- Not compatible with all softwares, systems, and internet browsers
9. PSD
Pros:
- Retain up to 30,000 pixels in both height and width
- Capable of storing large amounts of color and image quality
- Easily editable across multiple layers
- Importable into other Adobe products, like Illustrator or Premiere Pro
Cons:
- Comes in large file sizes (max of 2GB)
- Can be used only in Adobe products
- Uses more computer storage and memory
- Not easy to share and slow in loading
- Not compatible with other softwares, systems, and internet browsers
10. ICO
Pros:
- Great for making Windows icons and website favicons
- Makes it easy to find software and website tabs needed by users
- Great for branding, particularly brand awareness and association
- ICO favicons increases website usability and Google searchability
Cons:
- Limited to basic design and features
11. SVG
Pros:
- Best for creating digital graphs and diagrams, icons, and interface designs
- Fluid high-quality designs with low file size
- Easy to share and loads quickly
- Lossless compression
- Compatible with various software, systems, and internet browsers
Cons:
- Requires conversion to other formats for printing
12. WebP
Pros:
- Offers better compression than PNG, JPEG, and GIF
- Uses both lossy and lossless compression
- Has transparency and animation capabilities
- Produces high-quality images at very small file size compared to PNG, JPEG, and GIF
- Easy to share and loads faster
- Requires small computer space and memory
Cons:
- Not compatible with all software, systems, and internet browsers
- Needs different software for creating, editing, and converting
- May affect the accessibility and SEO of a website if a visitor uses a device that does not support it
- Requires websites to have fallback images for incompatible browsers
13. AVIF
Pros:
- Superb image quality at a lower file size than PNG, JPEG, and GIF
Cons:
- Not compatible with most internet browsers
- Negatively affects SEO since Google does not support it
- Not capable of progressive rendering (displayed only after fully downloaded)
By now, you have a clearer idea which image format is most suitable for faster loading in websites. Let me wrap things up from here.
Wrapping Up
Websites load slowly if the images used on it have big file sizes and are not optimized according to the user’s viewing device. This affects a websites Search Engine Ranking, user experience, and overall performance.
Choosing the right image format is the initial step to ensure faster loading websites. Based on the above features, advantages, and disadvantages of each image format, it is easy to see which is best to use on your website for this purpose.
These are PNG, JPEG, GIF, APNG, SVG, and WebP. Using these image formats in combination depending on the type of images needed by your website will meet your SEO goals and allow faster load times for your website.
FAQs
1. Which loads fastest among the image formats used in websites?
WebP loads fasted among image formats used in websites. But due to its limitations, more websites use JPEG liked mine.
2. How to do image format selection for faster load times on websites?
To select the image format for your website’s loading speed, you have to consider the type of website you have and the type of images you will use on your website. As mentioned in the article above, different image formats have their particular use, advantages, and disadvantages. Using a combination of images formats guarantees faster load times than using only one type.
3. Is it important to optimize images for web performance and SEO?
Definitely, Google takes into consideration the number and size of images used in a website. The more images a website has, the longer it loads. Netizens also prefer faster loading websites. Thus, it is best to compress images, select the right image formats according to your content, and optimize them for SEO.