Many people who build websites add photos and images without any consideration of file format and size. The only concern is how the picture looks on the page. This is a big mistake for anyone who wants a fast-loading webpage. Images that load slowly and cause layout shifts are annoying and a terrible user experience. The website’s SEO will certainly suffer. To learn how to properly select the right photo format for your website, keep reading. You will learn about image types and the best image format to make your website lightning fast.
Two Image Types
Images come in two different types, vector, and raster. Both images are comprised of pixels. Pixels are tiny dots of color that combine to form a picture. The difference between vector and raster images is that a vector image has built-in mathematical formulas. These formulas tell software programs to add more pixels as the image size increases to fit a bigger area. As the image size gets bigger, additional pixels are added to fill in the gaps caused by making the picture bigger. The new larger version of the picture looks just as crisp as the original. Large-scale images like those on billboards are always created from vector images.
A raster image doesn’t contain a mathematical formula. As the image size increases, no new pixels get added. As a result, the pixels get separated, and the new, larger version of the picture looks grainy. Think of a vector image as the smarter cousin of the raster image.
3 Popular Raster Image Formats
Photographs on websites can be vector images but are typically raster images. That’s because almost all photographs get created in raster image formats. Raster images can be converted to vector-like images using photo editing software, like Adobe Photoshop, but it’s not usually necessary for website pages. The two most popular raster image formats are .jpg and .png. A third format, .webp, is relatively new and gaining in popularity. It was created by Google in 2010.
Today’s popular content management systems support all three formats, but because each image format produces images with different qualities and files sizes, they impact page speed differently
File Size Matters
Image file size directly impacts page speed. Page speed is perhaps the most important factor in a website’s performance and user experience. According to SeoClarity, “Page speed is important to users because faster pages are more efficient and provide a much better on-page user experience.” Per a recent Kissmetrics infographic, if a page takes longer than 3 seconds to load, over a quarter of users will click away and choose a different search result.
Page speed is also important to search engines. Edge of the Web, a website solutions company based in the UK, tells us, “Page speed is probably the purest of SEO factors because addressing loading times improves your rankings, your user experience, and your conversion rate too.”
File Format Comparisons
So, the question is, which is the best image file format to make your website faster. To figure it out, I took a picture and formatted it in different ways and different sizes. I compared image quality and file sizes to find the smallest file size that still looks great. The smaller the file size, the less time it will take to load on a website. The first version of the image was the one that ran in a magazine, Tampa Bay Business & Wealth. It was created using a .png format, and the dimensions were 3520 X 3520 pixels at 300 pixels per inch. This is a large, high-definition image and the file size is a staggering 19,338 KB. While this is great for a printed magazine, an image of this size should never be used on a website.
The next three images are the same picture as the first. Each one is the same pixel size but in a different file format. As you can see, all four images look the pretty much the same. If anything, the .png looks a little less vibrant than the other two, but all three would work just fine. But, as noted in each image caption, the file sizes are dramatically different. The .png version is the largest file size. The .jpg comes in almost 50% smaller, while the .webp version is the smallest of all.
File Size = 1211 KB
File Size = 663 KB
File Size = 333 KB
Conclusion on Best Image Formats
Images created in the .webp format will load faster than the same images created in .jpg and .png formats. And since there is no visible loss of image quality, the .webp format is the best choice for most websites. This is especially true when page speed matters. Sand Key Ventures offers technical SEO services, including image optimization. I work on websites built using photos with huge file sizes all the time, and it really slows down their load times. If you own a website, it’s important to have one that offers the best user experience possible. Images can play a big role in user experience, so knowing the best image format to make your website lightning fast will make your website visitors happier, Google happier, and convert more sales.
Sand Key Ventures is a website company that creates digital content every day. We create custom photography and produce images in all popular file formats, sized to any custom specification. Give us a call at 727-249-2749 to discuss what Sand Key Ventures can do for you. Thanks for your time, but now we’ve gotta run. We have websites to build and audit, blogs to write, eBooks to create, eCommerce to manage, and photos to edit. Until next time, take care.