This article is part of a series created in partnership with SiteGround. Thank you for supporting the partners who make SitePoint possible.
As of March 2017, images make up over 65% of web content.
This is not surprising: images add beauty, communicate messages, tell stories and create connections with your website visitors.
The flip side is that, if not used correctly, images are often the main cause of a slow website and poor user experience.
Using images correctly on the web mainly involves two things:
- Choosing the right image format
- Optimizing your images.
In this article, I discuss the first point. In particular, I introduce the image formats that work best on the web and what kind of images they are most suitable for.
But before I go any further, let’s briefly clarify some terminology.
Raster/Bitmap vs Vector Images
Raster or bitmap images are made of a two-dimensional grid of pixels. Each pixel stores color and transparency values.
Raster images don’t scale very well: if you enlarge a raster image, it will lose sharpness and quality. Popular raster image types for the web are JPEG or JPG, GIF and PNG formats.
Here are two raster images (JPG) of an apple. The first one is the image at its natural size. The second one shows a detail of an enlarged version of the same image
Notice the degradation of the enlarged version of the image with respect to the original copy.
By contrast, vector images are made of lines, shapes, and path points. Information for vectors are not stored in pixels. Rather, they are stored in mathematical drawing instructions, which are completely pixel-independent. Alex Walker puts it very well as he refers to SVG, the most popular vector format for the web, as follows:
SVG isn’t an image format — it’s more of an image recipe.
One implication of being resolution-independent is that you can scale vector images to your heart’s content: they will always look crisp and awesome, perfect for retina screens.
Both images above are views of the same vector graphic, but in the second one, the vector is rendered at more than double the size with respect to the first. Yet, there is no loss of quality.
Lossy vs Lossless
Both Lossy and lossless refer to file compression techniques applied to digital media, i.e., images, audio and video.
does not decompress digital data back to 100% of the original. Lossy methods can provide high degrees of compression and result in smaller compressed files, but some number of the original pixels, sound waves or video frames are removed forever.
What this means in practice is that the more you compress a lossy file, the smaller it gets. However, with smaller file size you also irreversibly lose some quality with respect to the original file. Lossy compression involves a trade-off between small file size and quality.
A lossy image type you see a lot on the web is JPEG.
By contrast, lossless compression involves no data loss between the compressed asset and the original. This means that compression does not result in a decrease in file quality. However, because of this, lossless file formats usually have a larger file size than lossy ones.
Lossless image formats you can easily find on the web are GIF and PNG.
This preliminary info is helpful when it comes to decide on the best image format for your content.
The first three image file types I’m going to introduce below, i.e., JPG, GIF and PNG, have been in use on websites for a very long time. The last two, i.e., SVG and webP, although not being exactly new formats, are not mainstream yet. However, because they are highly suited to the demand for responsive and fast-loading websites, their popularity has been considerably growing.
JPEG or JPG is a lossy image format developed by the Joint Photographic Experts Group
Almost 3% of all content types on websites is made of JPG images. Here’s why this image format is so popular:
- The JPG format can display millions of colors. This makes it the ideal choice for displaying photography on the web
- Being a lossy file type, you can use compression to reduce its file size quite considerably. JPG files offer various compression levels: around 60% is fine for web images, while anything higher than 75% produces some quality degradation in the image.
- All internet-enabled devices support the JPG image format, which makes it easy to use on websites.
One noticeable thing missing from JPG files is support for transparency. Therefore, if you plan on using a transparent background to blend your image with the background color or texture on your webpage, JPG images are not a suitable choice. Better go with one of the options I outline below.
GIF stands for Graphics Interchange Format. It is an 8-bit lossless format which supports a maximum of 256 colors. This limitation makes GIF files unsuitable for displaying wide color ranges and photographic images.
Here are some points that have played a huge part in the long-standing use of GIF files on websites:
- Given the limit of 256 colors, file size is usually pretty low
- Support for transparency
- Support for animation. This makes them suited to display looping animated images like icons, emoticons, banners, etc.
- Good for simple images with flat colors, but not for photos
PNG stands for Portable Network Graphics. It’s an alternative format to GIF, which was developed by the W3C. Like GIF, it uses a lossless compression algorithm and it is available in 8-bit or 24-bit format. Both flavors support transparency. However, transparency in 24-bit PNG images is implemented using an alpha channel alongside the red, green and blue channels. Consequently, while both GIF and 8-bit PNG images are either completely opaque or transparent, each pixel in a PNG image offers up to 256 levels of opacity.
You can use the 24-bit PNG format for
- Web images with various levels of transparency
- Complex photos and graphics
- Graphics that you need to edit and export often: their lossless format ensures that there is no quality degradation.
Unlike GIF formats, PNG image types don’t support animation, and their file size can be quite large.
SVG stands for Scalable Vector Graphics, and it is an XML-based vector file type. Although being around since 2001, it has only recently become quite popular among web devs. The reason for such belated love lies in the poor browser support SVG has enjoyed for a number of years. Fortunately, I’m happy to say, at the time of writing, SVG is supported in all major browsers, although not without a few inconsistencies and bugs.
The SVG format has tons of features to recommend it as an awesome choice of graphics format for the web, especially when used for simple images like logos, maps, icons, etc., for which it is particularly well suited.
Pros of the SVG Format
- SVGs usually have a smaller file size than their raster counterparts, especially if you optimize them for the web and deliver them gzipped
- They are scalable, which means they look sharp whatever the screen resolution
- You can use SVG code inside the HTML markup and save HTTP requests
- SVG code lends itself to being customized using CSS
Because the file size can grow quite a bit, try to avoid overly-complex SVG images for web use. Finally, for photographic images, SVGs are not suitable, you’d better stick to the JPG format or webP.
Despite being in existence since 2010, I wouldn’t go far wrong in saying that webP does still feel quite new and it’s not as well-known as JPG or PNG. However, this image format has the web in its DNA: it was born to be used specifically on the web, which makes it super interesting
WebP is an open source image format developed by Google. These are its key features:
WebP is a modern image format that provides superior lossless and lossy compression for images on the web. … WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images … Lossless WebP supports transparency … at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3× smaller file sizes compared to PNG.
The beauty of webP is that it combines the advantages of both JPG and PNG formats without the hefty file size.
At this time, Browser support is quite good: Blink-based browsers have all been on board from the start, after all, webP is one of Google’s creatures. For backward-compatibility in non supporting browsers, i.e., IE/Edge, Firefox and Safari, some smart folks have devised appropriate workarounds.
Here are some great resources where you can learn more about webP and how you can implement it right now:
- WebP Frequently Asked Questions
- What is the WebP Image Format (And Why Does It Matter)?
- How to Select the Perfect Image Format to Optimize Your Website
- Guide To Using WebP Images Today: A Case Study
- Using WebP Images
In this article, I’ve presented an overview of image formats for the web and briefly discussed the types of image they are more suited for.
JPG, GIF and PNG are very popular formats and have been in use for a long time. SVG and webP are newer, exciting alternatives. SVG is great for illustrations and simple images, webP covers very well all the instances where JPG and PNG can be used.
Have you used SVG or webP in your development work? Which challenges did you face? Did you experience any significant performance gains?
Hit the comment box to share!
Maria Antonietta Perna is co-Editor of the HTML/CSS Channel at SitePoint and a front-end web developer. She enjoys tinkering with cool CSS standards and is curious about teaching approaches to front-end code. When not coding for the web or not writing for the web, she enjoys philosophy books, long walks and good food.
The Principles of Beautiful Web Design, 4th Edition
Docker for Web Developers
HTML5 Games: Novice to Ninja