top of page

How Optimizing The Images On Your Website Can Speed Up Your Website Load Times

It's no secret that one of the biggest factors when determining SEO is the speed at which your website loads is images. This applies to both desktop/laptop and mobile versions of your website.


Why Is Site Loading Speed So Important?


We have all seen the dreaded "loading" symbol (whichever variety it may be) keep spinning and spinning - it's the worst!





Site loading speed is one major factor which breaks down into many other, smaller factors - this is part of why it's so important. One of the more important, smaller factors that ties into site loading speed is the bounce rate of the website. According to UpdraftPlus users tend to leave your site if it takes more than 3 seconds to load the page they want to view. Often times, if you are trying to display a product and it won't load....guess where that potentially customer/client goes? Somewhere else.


For a retail/e-commerce site that makes $100,000 in income per day, UpDraftPlus figures the potential losses from a "1-second delay could potentially cost you $2.5 Million in lost sales per year!" That's a pretty astronomical amount of money to be lost because of 1-second, which underlies just how important site load speed can be!


So How Do Images Tie In?


Quite simply, the things that take the longest to load on your website are the images and/or videos on your site, and the specific reason is due to the size of these files! The way you save and upload an image to a site (such as a JPEG, PNG, SVG, etc...) will significantly affect the load time of your photo, and in turn your website.


What Are The Difference Formats To Save A Photo In?


Adobe goes into more detail in their blog post about the differences between PNG's and JPEG's (can be found here).


JPEG stands for "Joint Photographic Expert Group", and according to Adobe are one of the most common ways to store digital photos. Digital cameras can shoot in this format, and the images are compressed, which reduces the size, can store up to 16 million colours (yup you read that right; I too thought we topped out at like 300 colours but NOPE) and most importantly: makes them easier to load on webpages.

PNG stands for "Portable Network Graphics files, and Adobe explains that in addition to being compressible, and being able to store 16 million colours like JPEGs, that PNGs are "mostly used for web graphics, logos, charts, and illustrations, rather than high-quality photographs, because they take up more storage space than JPEGs." A major bonus for PNGs is that they offer the ability to deal with transparent backgrounds, whereas JPEGs do not.


Image Optimization


Ilya Grigorik from web.dev explains that "Raster graphics represent an image by encoding the individual values of each pixel within a rectangular grid." In more plain terms - the image formats you are likely familiar with: JPEG, PNG, or WebP. These formats should be used when you are putting a complex image onto the site (such as a photo) - these formats forgo a bit of precision and quality when enlarging the graphics, however provide a much more superior UX (user experience) for all site visitors due to much quicker load times.


Keep in mind that while a "much quicker load time" can be 3-hundreths of a second (0.0300), which basically means you blinked a split-second later, it does not mean it can be overlooked - if you have multiple images on the same page that have the extra loading time, your whole page's load time will be slower. It should be noted that Grigorik also mentions that "There are two universally supported raster image formats: PNG and JPEG." which is important as you can typically just focus on these image formats!


Is There a Tool That Scans This For Me?


Yes, and you've got options! Hubspot has a wonderful website grader which I've linked here! I have personally used this a number of times and find it simple and easy to digest - It breaks down performance, SEO, mobile and security into a number of specific categories, which makes like significantly easier when deciding which areas of your site to fix first!


Semrush also provides a great site audit tool which is linked here as well! This one requires you to sign up for a Semrush account however. UpCity provides a free SEO report card for your site which shows certain pain points and goes quite in-depth on your site and can be super useful - I have linked in here!


Once you have done a site-audit, find those photos which aren't optimized, and save your site some loading time, increase your site speed and have better SEO by going ahead and optimizing those photos!


What Should I Do Next?


At this point, it's time for you to head to your website and check how your photos are uploaded! You can also check the database/file folders where the original photos were saved, or your website's content repository. Check for file type and file size, and if there is an image that appears to be oversized, save it in PNG or JPEG and re-upload it to your site!


Prior to making any major changes, you might want to run a site audit using one of the tools above so that you can compare site metrics from before and after any site changes! If you want to see how minuscule the changes can be - you can run an audit in between each change! This is tedious and might take a while, but can illustrate just how important these changes can be!

Recent Posts

See All

Comments


Commenting has been turned off.
bottom of page