A commonly overlooked aspect of website optimization is image quality. Whether they are directly on your homepage, featured in a blog, or in an image gallery, low quality images can slow your website down and increase load times across the board.
That’s not to say images should be avoided altogether, however. In fact, quite the opposite. Visuals are a crucial component to your online presence and can actually help visitors remember your content up to 72 hours later. The key is making sure they are optimized to the fullest, which you can do by taking the following into consideration:
First, it’s important to note that image size and file size are two different things. While image size describes its literal dimensions (i.e. height and width), file size is actually the amount of space your server needs to store it (i.e. kilobytes or megabytes). Too much of both, unsurprisingly, can and likely will slow down your site.
Compress your images, but not too much. Decreasing the file size is good, but it could result in poor image quality, and vice versa. Not compressing your images enough will preserve image quality, but result in a huge file size. It takes a little bit of experimenting depending on the images you’re using (Adobe Photoshop is a great tool to help with exactly this).
Arguably the most commonly used file types are PNGs, JPEGs, and GIFs, each with their own benefits. SVGs (simple vector graphics), on the other hand, are somewhat lesser known, but great for more abstract visuals and logos.
Unlike the aforementioned file types, SVGs are text based and therefore a smaller file size without compromising image quality. It also helps to know that these files are supported by Google Chrome, Firefox, Safari, and Internet Explorer.
After choosing the right file types for your website and compressing each of them, they should be good to go and optimized for all devices. However, how they display on mobile may not be up to par.
Considering over half of all internet traffic comes from mobile devices, you’ll want to ensure your images are displayed clearly on iPhones, tablets, and Android devices (all of which may size your images a little differently). Luckily, Google has a mobile-friendly test that allows you to see if your website and images are optimized accordingly.
There’s nothing wrong with using a good-looking stock photo, but any time you have the opportunity to use an original image, use it. In the same vein of unique written content being best for SEO purposes, unique images can separate you from the pack while also allowing for more manipulation, should any resizing or compression be required.
Following these simple guidelines can take your website from good to great. Optimized images and a resulting speedy site directly translates to fewer visitors clicking away out of frustration.