Everyone's been there...and then left. Been where? You know, that website that is soooooo slow. The "world wide wait". We've all attempted to visit a website that just seems like it takes forever to load!
According to several studies, you have about 2 seconds to get a website to load without a visitor considering leaving your site. Mobile users are more likely to give you a 6-10 second grace period before they head somewhere else.
People like fast sites and so does Google. Page speed is now a ranking factor in Google's algorithm. When you optimize images, it leads to reducing load time and increasing site speed, even if it's just a few seconds, that could be the difference between your site either gaining or losing countless website leads and sales.
So how do you make your site one of those blisteringly fast sites Google is looking for?
Website Load Time Affects More Than Visitors
Slow website loading time not only impacts the viewing experience, but your website speed is a metric monitored as part of your ranking in search engines like Google.
Slow website loading time can be caused by several factors including the host server’s response time and the visitor’s internet or mobile connection speed. These are often beyond your immediate control. But there is one element of your site that you can definitely control to help speed up your website’s load time, and that's images. Google is actually looking to see if you’ve chosen the right types of files for use on the web so that your site will load as fast as possible.
Related Read: Website Optimization is More than Just Content
Why Does Optimizing Web Images Matter?
How do you know where to meet in the middle so that Google won’t penalize your SEO ranking but visitors can still view great images on your site?
When you click a link to visit a website, the server calls all of the files for the site to load on your screen. Depending on your site, the images could account for the majority of the data that needs to be loaded. That is why it is always important to optimize images for the web. The smaller the file sizes of the images, the faster a website loads.
That's where image optimization comes into play. Knowing the right file formats and how different formats handle different types of images can help you understand when and where to use the right file type to speed up your website’s load time and still produce good quality images. Understanding lossy and lossless compression are important in choosing the type of file format for an image that you want to upload.
LOSSY VS. LOSSLESS Image COMPRESSION
Images are optimized by reducing the data that an image contains, called data compression. Data compression is a technique in which the amount of data in an image is reduced without the loss of information. To do this there are two categories of data compression; lossy and lossless compression.
So what's the difference between lossy compression and lossless compression in images?
- Lossy compression uses inexact approximations and partial data discarding to represent content within an image. Some image file types, such as JPGs will interpret pixels of color and will reduce some of the information in the image, to reduce file size and still maintain as much of the images quality as possible.
- Lossless compression reduces the the size of an image file without sacrificing image quality. No data is lost using this method. PNGs are a good example of lossless compression.
"So wouldn't I just always use a PNG file type then?" That is a fair question. But, depending on the type of image, lossless compression could make a file much larger than it needs to be. Remember the goal in image optimization is to increase load speed for images being uploaded to your website.
Which File Type Do You Use for Web Images?
Currently, the majority of file formats being used on the internet are JPEG, PNG, SVG and WebP. Yes, there are GIF files too, but for creating great images for your website, gifs aren’t recommended. In fact, GIFs are on their way to extinction or at least should be! They have really only been relegated to being used in animations in recent years and even then they are becoming less and less popular to upload to the web due to their size. We'll get to that.
JPEG (.jpeg sometimes seen as .jpg) files are best used for images that are shot with a camera or camera phone because the pixels of color within the image could use millions of colors. JPEG's do a great job of keeping the file sizes small even though many colors may be used within the photo. That's because JPEG's use lossy compression. They can combine some of those millions of colors, removing some information to make the file smaller, reducing the color palette used to create the image and yet still produce an acceptable quality for the web.
However, when optimizing a JPEG, you want to be sure the compression isn’t set so low that you see artifact leftovers in the image that muddle the quality of the image (see example below). And with retina (high) quality images being used for most devices these days, it's very easy to tell when an images quality is too low. Remember with JPEG's, the higher the compression the lower the quality. You need to be sure and strike a good balance between both when optimizing JPEG's for your website.
The Portable Network Graphics (PNGs) format is best used when you’re saving a graphic that has limited colors. Logos and icons are good examples of images that would use the .png file format. Simple graphics with a few colors can be saved as .png files to create high quality images with low file sizes that perfect for use on a website. In fact, the .png formats only purpose should be for use on the internet. It is not recommended to use PNG files for any sort of print purpose unless the dimensions of the image are pretty large. Pixelation will be obvious when printing a PNG unless the image dimensions are saved larger and printed smaller.
PNGs are also used when you are trying to create an image with a transparent background. No more artifacts around an image! For several years now, the GIF format has been going the way of the dodo. Extinct! That's because PNG's can handle transparency much more efficiently and with better results. Just another reason to stay away from GIFs!
The rule of thumb for using PNGs is if it’s a graphic with limited colors or the image needs to have a transparent background, use a PNG.
Before we talk about the SVG file type it's important to understand vector images. What is a vector quality image? Vector images are images that don't use pixel data but rather mathematical code-based data to create an image. Vector files have historically been used for all forms of printing because a vector image retains its quality regardless of size. A logo in a vector format can be printed on a business card and the same file can be used to print the logo on a billboard. The quality of the image will be perfect with no data loss at either size.
The SVG format is a format that provides web developers a way to use vector quality images. Most other file types used on the web are pixel-based (raster) formats that rely on whatever color information they contain at their specific size. For example, if you save a PNG file at 500x500 pixels at 72dpi (dots per inch), upload it to your website and then set the dimensions to 1000x1000 pixels, the PNG will lose some of its clarity. However, SVG images being vector-based, allow you to create images in any size and if through code you increase or decrease their dimensions on the web, don't lose any clarity. SVG's are commonly used for site logos or backgrounds that don't use many different colors. They are typically very small file sizes and help to increase load speed. Note, that older browsers may not support SVGs. That being said, all the latest versions of all the major browsers have basic SVG support.
You may recognize the WebP format if you've recently tried to save an image from the internet that you assumed was a JPEG or a PNG. WebP is a modern image format that Google created to provide superior lossless and lossy compression for optimizing web images. Google says that "WebP images are 26% smaller in sizes compared to PNGs. WebP images are are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index."
WebP images also support transparency, so they provide the best attributes from JPEG and PNG formats at a smaller file size.
Sound too good to be true?
Currently there is one catch. Although WebP is supported in Chrome, Firefox & Edge browsers, it's notably missing from Safari. So if you only provide WebP images, no one on an iPhone will be able to see them.
The workaround is a rather technical hurdle to deliver WebP images to browsers that support them and then fall back to JPEG and PNG for anyone else. We've figured out a way to make this work, so if you want to squeeze every bit of technical SEO performance out of your site, we can help you out.
Should I use GIFs?
Avoid it like the plague! If you haven't noticed in this blog, GIFs are on their way out when it comes to being used for website design. There are many more options that produced better results plus GIFs.
"But what about animated GIFs? I see those all over the internet and in places like Twitter."
Did you know that Twitter actually converts uploaded animated GIFs to video files? That's right video files. Twitter converts any animated GIFs to video file formats such as MP4 to greatly reduce the file size. For example, an animated GIF uploaded to Twitter that is 1MB is converted to an MP4 file that is only 59kb! 94% smaller than the original uploaded animated GIF.
Even GIPHY, an online database and search engine that allows users to search for and share short looping videos with no sound uses MP4 files.
The solution is stop uploading animated GIFs and convert them into MP4 files. There are plenty of tools out there than can be used for any platform you may be using.
How to Make Images for the Web
In most situations, you need to resize a JPEG photo that you have been given or that you’ve taken. Phones and cameras produce images that are several thousand pixels wide. And you may only need an image that’s several hundred pixels wide for a website. Typically, the maximum pixel width you'll need for a website is around 2000 pixels and only in those cases where you might be using it as a full-width display. Resizing the image to the sizes you need for the website before you upload is very helpful in optimizing your images for the web. Don't just download a large image from a stock photography site and uploaded it at its native size. By doing this, you are greatly reducing the speed at which a browser can load your images. That's the "anti-SEO image optimization" lesson for the day!
Adobe Photoshop is our go-to software for image editing. It includes options that allow you to produce good looking images that work well on the web, even retina screens, without creating large file sizes.
If you don’t have Photoshop there are some alternatives.
- If you use a Mac: Preview, included with your computer, will allow you to adjust the size of an image and the DPI (dots per inch) to get a smaller file size.
- If you use Windows: Paint comes with the computer and can be used for resizing.
Try to get any photos you’re using on your site to be 70KB or less, unless it’s a full width banner image where 200KB or less should be your goal. PNGs and SVGs should be in the 5 – 15 KB range but could be larger depending on the graphics size.
One Last Note on Web Image Optimization
Optimizing website images is one way you as a website owner, can help keep website load times as short as possible. A critical component of any SEO strategy should include image optimization. Knowing when to use a WebP, a JPEG, a PNG or an SVG will help you to significantly reduce file sizes that you use on your website. Also, remember to upload images at a reasonable size. Don't upload giant images that kill load time. The better optimized your images are, the faster your website. Oh yeah, and Google will like you better too. And who doesn’t want that?!