The hidden cost of high res photos in web development

They say that a picture is worth a thousand words, but if that picture causes your website to load slow, Then it isn’t worth anything. It could be costing you greatly. Studies show that to prevent users drop off your website should load in 1–2 seconds. Any longer than that visitors become highly impatient and leave. One of the biggest and easiest to fix mistakes I’ve been seeing is new web developers not optimizing their image sizes for the web.

It’s great that you found some 4k high res 6000×5000 pictures that you can see every follicle of hair in that horse’s mane. However, not everyone is sitting at a workstation likely hard wired into a fast internet speed. More likely your visitors will be on a mobile device and using their data. The last thing they want is to watch your website sit and spin as you force them to download some 5MB high res photo that the web browser is going to downsize on the fly anyway to fit their tiny screen.

So what can we do about it? Well, we can attack it at two different angles. The first angle is image optimization is the act of decreasing file size without losing quality. The second angle would be implementing a lazy loading feature to allow the rest of your website’s content to load without having to wait for the bigger data files such as images to come across.

Image optimization can be done either at creation using a photo editing software like Adobe PhotoShop or GIMP. In that, you can reduce the photo resolution and size to be more web-friendly. Reducing a massive Photo from a DSLR into something more consumable like a 500×500 image can save possibly whole seconds and lots of data.
You can save even more data by running the image through an image optimizer such as TinyPNG.

The second prong attack will come from lazy loading. You can find an awesome lazy loading example here: Css Tricks Tutorial s. In summary, you are going to use a super low resolution and lightweight photo, slap a blur effect on it, then replace the image with a high-quality one once it has finished loading across the network.

Utilizing these techniques can easily save you seconds off your load time, and drastically improve your sticking power with users. This will also improve your site’s SEO score which helps determine how it ranks in search engine results. Try out these methods and let me know how much time you shaved off!

Originally published at http://blog.p3rishable.com on March 16, 2022.