We often say marketing is a marathon, not a sprint. But if there is one place where you need to do your best cheetah impression, it is with your website load time. When it comes to building websites – we’ve got the need for speed!
We know that it goes without saying how important website loading time is. We’ve all visited that website that seems to load like a puzzle falling into place – little bits and pieces of the image and content downloading slowly. One word: Frustrating. And Google feels the same way! A website that loads at a fast speed makes happy users. Happy users makes Google a happy search engine and we all know that a pat on the head from Google is a big deal in the form of improved SERP rankings.
So, how can we keep our users and search engines like Google happy? It’s all about balance! Here are three things you need to balance to optimize your images for web:
File Size
Let’s start with file size – a huge determinant for website speed. If it’s too large, it takes up a lot of space on your server and it slows your website down. Not good! Our friends at Moz (you know we love Moz, right?) tells us that a compressed file saved in the right file format is the key to a good file size. Compressing an image in a program like Photoshop, where you can still retain control of the quality, is a great way to keep your file size under control. As we mentioned above, the right file format is important too! PNGs are better for graphics with fewer than 16 colors while JPEGs are better for photographs.
Image Resolution
You’ve probably heard about high-resolution and low-resolution but what exactly is resolution? Image resolution is the amount of detail an image holds. To put it simply, resolution represents the number of dots (or pixels on your computer) an image contains. The more dots or pixels an image has, the more vivid, detailed and crisp it will be. Anything 300dpi (dots per inch) or more is considered high-resolution. Anything under 300dpi is considered low-resolution with the typical low-resolution file being 72dpi. You would think the higher resolution the better to make images look awesome on your site, right? Well, the challenge is the higher the image resolution, the larger the file size, the longer it takes to download on your website. In our experience, a low-resolution image is better when building a website to keep website speeds optimized. There is always that photo or two that needs to look even sharper so this is one area where your best judgment comes into play.
Image Size
On the web, image dimensions are described in pixels instead of inches, like 160×160 pixels (which happens to be the image size we use in our newsletters). Your image size really depends on your design so this is again where the balance part comes in. When you have a decent file size and an appropriate image resolution, your image should be crisp, clear and fast loading no matter the size.
With mobile search growing more each day, designing a website on a phone is just as important as desktop. The same rule applies – faster is better. Google published a piece in 2017 to compare industry benchmarks for mobile page speed. Find out how your website stacks up here.
Like anything else, getting your images perfectly optimized for your website may take a few tries, but with these tips you’ll be optimizing like a pro in no time! And if you have questions, ODEA is always excited to help! Have you found other useful hints when optimizing your images for web? We want to hear about them! Drop us a line at [email protected].