5.7 Common Web Image Formats and When to Use Them

Why Visuals Matter

I am not sure how popular the internet would have become if it remained textual. Most people browsing the web are using one main sense to navigate themselves through pages of content, their vision. We might be caught by an interesting title that leads us to a website, we might even stay to read the article if we see an image that keeps our interest. Incorporating visuals in your website can attract readers, it also helps clue in your audience to the content of your article or website. J. David Eisenburg is a programmer and instructor. He gives an overview of the main image formats (JPEG, GIF, PNG, and SVG) used for the web in his Linked Learning course, “HTML: Images and Figures“. He says JPEG is the format for photos, Gif and PNG are the formats for line art, and SVG is the format for vector line art. I wanted to share a simplified explanation of each format and the best uses for them.

Key Terms:

Vector- Graphics created using math equations that translate to paths with a start and endpoint in lines, curved lines, and shapes.

Raster– Graphics made up of a grid of pixels, or bitmap. Every pixel has a defined color, point, and section based on its resolution resulting in a blurry or distorted image when resizing as the original design and pixels stretch to fill in extra space.

According to Samual Lundquist, author of “Image file formats: when to use each file type“, every online graphic is an image file. This may be, but not every image file is created equal. I want to take you through some of the main types of image formats used on the web and when to use each type.

What format do I use?

JPEG: Photos/Pictures

This format has a lossy compression which means that it trims the “fat” of the data in the image file. Using JPEG is best to use for photos or pictures on your site. Keeping it at the original resolution will keep the integrity of the image without pixelation or distortion. The smaller file size will not take up much disk space or bandwidth. Most sites use JPEG or PNG image files. In my experience JPEG is best for photos or pictures, but should be avoided for anything that displays text, especially small detail text that is enlarged. This usually results in a pixelated mess.

Gif: Animated Images

This format doesn’t rely on pixels for clarity, instead, it uses XLM (Extensible Markup Language) text. It has small file sizes and can be scaled up or down without losing quality. It’s recommended for logos, icons, and simple illustrations.

PNG: Textual Graphics

Another lossless compression graphic maintains detail and contrast between colors. This also means the file size is much larger than the JPEG, using too many PNG graphics on your site can cause delay and slow down speeds. Using PNG in infographics, banners, or displaying images with text is recommended. They have built-in transparency which allows images to appear without a solid background.

SVG: Logos, Icons, Simple Illustrations

This format doesn’t rely on pixels for clarity, instead, it uses XLM (Extensible Markup Language) text. It has fairly small file sizes and can be scaled up or down without losing quality. It’s recommended for logos, icons, and simple illustrations.

I see your point

Images and graphics can be used to support your content and help tell the story in a clear and effective way. They can also help break complex information down into digestible bites or save readers time by identifying icons for specific services without being fatigued and overloaded. Being able to choose the right image format will give the best chances for clear images and will elevate your content through its aesthetic appeal. Your readers won’t be distracted with blurry images, unreadable text, and prevent slow speeds.

This chapter is a revised version of a blog post titled “Common web image formats and when to use them” on Mau Does Web Publishing.