What Is the Right Image Format for Your Website?

Image format selection and optimization: Best practices for website images

Key Points

• Correctly selecting the image format and optimizing the image is crucial for the correct use of website images. Incorrect use can lead to slow website performance and poor user experience.
• JPEG, GIF, PNG, SVG, and WebP are commonly used website image formats. JPEG, GIF, and PNG are long-used formats, while SVG and WebP are relatively new, but are becoming increasingly popular because of their suitability for responsive and fast-loading websites.
• The selection of image format depends on image type, file size, and browser compatibility. For example, JPEG is great for photos due to its quality and compression, while PNG is great for logos and icons due to its support for transparency.
• WebP is a modern image format developed by Google that combines the advantages of JPEG and PNG without producing large file sizes, making it ideal for network use. However, it is not universally supported by all browsers.

This article is part of a series of articles created in collaboration with SiteGround. Thank you for supporting the partners who made SitePoint possible.

As of March 2017, images accounted for more than 65% of the web content.

It's not surprising: images add beauty, convey information, tell stories and connect with your website visitors.

On the other hand, if used improperly, images are often the main reason for slow website speed and poor user experience.

The correct use of images on the Internet mainly involves two things:

• Select the correct image format
• Optimized image

In this article, I will discuss the first point. In particular, I will cover the best image formats on the web and the type of image they are most suitable for.

But before further discussion, let's briefly clarify some terms.

Radic/bitmap and vector images

Radical or bitmap image consists of a two-dimensional pixel grid. Each pixel stores color and transparency values.

The zooming effect of the raster image is not very good: if you zoom in, it loses clarity and quality. Commonly used raster image types on the network are JPEG or JPG, GIF, and PNG formats.

The following are two raster images (JPGs) from Apple. The first is the natural size of the image. The second shows details of the same image enlarged version.

Example of natural size of raster images.

Raster image details that are much larger than natural size.

Note that the enlarged image version has a deterioration in quality relative to the original copy.

In contrast, vector images are composed of lines, shapes, and path points. The information of the vector is not stored in the pixel. Instead, they are stored in mathematical drawing instructions that are completely unrelated to the pixel. Alex Walker said it very well when she mentioned SVG (the most popular vector format on the web):

SVG is not an image format—it is more like an image "recipe".

Why JPEG is like McDonald's Apple Pie (and SVG is not)

One meaning that is not related to resolution is that you can scale vector images at will: they will always look clear and bright, perfect for retinal screens.

Small scale SVG graphics.

Zoom in SVG graphic details.

The two images above are views of the same vector graphic, but in the second image, the rendering size of the vector is more than twice as big as the first image. However, there is no loss of quality.

Lossy and non-destructive

"Lossy" and "lossless" both refer to file compression techniques applied to digital media (i.e. images, audio and video).

Lossy compression:

The digital data will not be decompressed back to 100% of the original data. Lossy methods can provide a high level of compression and produce smaller compressed files, but some amount of the original pixel, sound wave, or video frame will be lost forever.

PCMag.com Encyclopedia

This means in practice that the more lossy files you compress, the smaller it will be. However, as the file size decreases, you can also irreversibly lose the quality of some original files. Lossy compression involves a trade-off between file size and quality.

One lossy image type you often see on the web is JPEG.

In contrast, lossless compression does not cause any data loss between the compressed resource and the original resource. This means that compression does not cause file quality to decline. However, because of this, lossless file formats are usually larger than those with lossy file formats.

The lossless image formats you can easily find on the web are GIF and PNG.

This preliminary information is very useful when deciding on the best image format for content.

The first three image file types I want to introduce below, namely JPG, GIF, and PNG, have been used on the website for a long time. The last two, namely SVG and webP, are not entirely new formats, but have not become mainstream yet. However, their popularity has been increasing since they are well suited for the demand for responsive and fast loading websites.

JPEG

JPEG or JPG is a lossy image format developed by the Joint Image Expert Group

Almost 3% of all content types on the website are composed of JPG images. This is why this image format is so popular:

• JPG format can display millions of colors. This makes it an ideal choice for displaying photography works on the web
• As a lossy file type, you can use compression to significantly reduce its file size. JPG files offer a variety of compression levels: approximately 60% is enough for network images, and any compression above 75% will result in image quality degradation.
• All internet-enabled devices support the JPG image format, which makes it easy to use on the website.

One obvious thing missing in JPG files is the support for transparency. So if you plan to use a transparent background to blend the image with the background color or texture on the web page, a JPG image is not a suitable choice. It's better to choose one of the options I listed below.

GIF

GIF represents the graphical exchange format. It is an 8-bit lossless format that supports up to 256 colors. This limitation makes GIF files unsuitable for displaying wide gamut and photographic images.

The following are some of the key points that play a huge role in the long-term use of GIF files on your website:

• File sizes are usually very small given the limitation of 256 colors
• Support transparency
• Support animation. This makes it suitable for displaying loop animation images such as icons, emojis, banners, etc.
• Fit for simple images with flat colors, but not for photos

PNG

PNG stands for portable network graphics. It is an alternative format for GIFs developed by W3C. Like GIF, it uses a lossless compression algorithm and has an 8-bit or 24-bit format. Both formats support transparency. However, transparency in 24-bit PNG images is achieved using alpha channels as well as red, green and blue channels. So, while GIF and 8-bit PNG images are either completely opaque or completely transparent, each pixel in the PNG image provides up to 256 opacity levels.

You can use 24-bit PNG format for

• Network images with various levels of transparency
• Complex pictures and graphics
• Graphics you need to edit and export frequently: their lossless format ensures no degradation of quality.

Unlike GIF formats, PNG image types do not support animations, and their file sizes may be quite large.

SVG

SVG stands for scalable vector graphics, which is an XML-based vector file type. Although it has been around since 2001, it has only recently become very popular among web developers. The reason for this belated love is that SVG has enjoyed poor browser support for years. Fortunately, I'm happy to say that at the time of writing, SVG is supported in all major browsers, despite some inconsistencies and bugs.

SVG format has many features and can be recommended as an excellent choice for web graphics formats, especially when used for simple images such as logos, maps, icons, etc. It is especially suitable.

Advantages of SVG format

• SVGs are usually smaller in file size than their raster counterparts, especially if you optimize them for your network and provide them in gzip format
• They are scalable, which means they look sharp regardless of the screen resolution
• You can use SVG code within HTML tags and save HTTP requests
• SVG code itself can be customized using CSS
• You can animate SVG images and their parts using CSS and JavaScript, which is very cool.

Because the file size may become quite large, try to avoid overly complex SVG images for network usage. Finally, for photographic images, SVG does not work, and you'd better stick with JPG format or webP.

WebP

Although it has been around since 2010, I wouldn't say that webP still feels new and not as well-known as JPG or PNG. However, this image format contains the network in DNA: it is designed to be used on the network, which makes it very interesting

WebP is an open source image format developed by Google. The following are its main functions:

WebP is a modern image format that provides excellent lossy and lossless compression for images on the network. ...The size of WebP lossless images is 26% smaller than that of PNG. WebP lossy images are 25-34% smaller than comparable JPEG images... Lossless WebP supports transparency... only an additional 22% of bytes are required. Lossy WebP also supports transparency for situations where lossy RGB compression is acceptable, usually offering 3 times smaller file sizes than PNG.

WebP Website

The advantage of WebP is that it combines the advantages of JPG and PNG formats without creating huge file sizes.

At present, browser support is very good: Blink-based browsers have supported it from the beginning, after all, webP is one of Google's products. For backward compatibility of unsupported browsers (i.e. IE/Edge, Firefox, and Safari), some clever people have designed appropriate workarounds.

The following are some great resources from which you can learn more about webP and how to implement it now:

• WebP FAQ
• What is the WebP image format (and why it matters)?
• How to choose the perfect image format to optimize your website
• Guide to Using WebP Images: Case Studies
• Using WebP Images

Conclusion

In this article, I outline network image formats and briefly discuss the image types that they are more suitable for.

JPG, GIF and PNG are very popular and have been used for a long time. SVG and webP are newer, exciting alternatives. SVG is great for illustrations and simple images, and webP is great for all cases where JPG and PNG can be used.

Have you used SVG or webP in your development work? What challenges do you face? Have you experienced any significant performance gains?

Click on the comment box to share!

FAQs about website image formats (FAQ)

What are the key factors to consider when choosing a website image format?

Selecting an image format for your website depends on several factors. First, consider the type of image you are working on. For example, photos are best saved in JPEG format for the best quality and compression, while logos and icons can be used in PNG format to support transparency. Secondly, consider file size. Smaller file sizes load faster, which improves your website's speed and performance. Finally, consider browser compatibility. While most modern browsers support formats such as JPEG, PNG, and GIF, newer formats such as WebP are not supported by all browsers.

How does the image format affect my website SEO?

Image formats can significantly affect your website SEO. Search engines such as Google prioritize sites that load faster, while smaller image file sizes can help achieve this. Additionally, Google prefers certain image formats such as JPEG 2000, JPEG XR, and WebP because of their superior compression and quality properties. Using these formats may improve your website's search engine rankings.

What is the difference between lossy compression and lossless compression?

Lossy and lossless are two types of data compression used in image formats. Lossy compression reduces file size by eliminating "unnecessary" data bits, but this can lead to image quality degradation. JPEG is a common lossy format. Lossless compression, on the other hand, reduces file size without sacrificing image quality, but generates

The above is the detailed content of What Is the Right Image Format for Your Website?. For more information, please follow other related articles on the PHP Chinese website!