How To Make Sure Your Images Are Web Appropriate

A very common mistake that lot of new content editors make is to upload inappropriately large images into Umbraco. The aim of this article is to explain why inappropriately large images are bad and what you can do to upload web appropriate images instead.

When you try and open a web page in your browser, your web browser makes multiple requests to download everything required by your page, e.g. the HTML, all the images etc... obviously, the more images you use and the larger each images file size is, then the longer it will take for your webpage to load.

A study involving Amazon and Google, found that a 1 second delay in page load time, can result in a 7% loss in conversions, 11% fewer page views, and 16% decrease in customer satisfaction. So uploading inappropriate images will mean less people will use your website.

Why Are Images So Large?

There are two reasons why images are usually too large. First, is width. Take your mobile phone for example, an image taken on a mobile can easily be 4-5mbs in size, so why so big? The width of the image taken on your phone will be much wider than you will need to use on a web page. For example, 1440 x 2560 pixels is not an uncommon image size for a phone. However, this is also usually the same width as the whole of your web page total.

If you are uploading an image that only takes up a quarter of your page, but you upload the image in it's full-width, your page performance will suffer.  The browser will automatically shrink it to fit correctly. Scaling the image down does not crop it or reduce it's file size.  As it's scaled you also don't see all the extra detail, so by using a really big width and then shrinking it you get the worst of both worlds, large image sizes where you can't see the full detail anyway.  In this set-up the only thing that happens is that your page loads slower.  Simply uploading your images in the correct size will massively reduce its size.

Second, most images are large to capture as much picture quality as possible. If you want to do any graphical manipulation, add effects etc.. you need all this extra data. However, if you simply want to display a picture on your website, in 99% of the times this extra detail is unnoticeable to the normal eye. When you use images, saving them in a web-friendly format can result in a 80-90% file size reduction within any notable difference in quality.

How Should I Upload Images?

 

I would recommend that all of the images you import into Umbraco should never be more than 1000-1200px wide.  In most cases 600px of less is more than enough.  If you know the size of the area you want to display the image then you should upload the image in the correct size.   Images should always be under 1mb.  

Before adding any image into Umbraco, you should also make sure you've saved it in a web appropriate format (usually jpg or png). Simply doing this, I regularly see a reduction in file size from from 5mb+ to less than 100K.  I tend to use FastStone Image Viewer on Windows, it's free and can batch photos.  I won't go into the details here on how to use Faststone here, but most people should be able to get to grips with it in under an hour.  

Takeaway

So hopefully you now understand why large images are bad and the things you can do to reduce file size.   Simply by changing the width and saving the image in a web appropriate format (like png), you'll make your web pages load a lot quicker.

submit to reddit

Jon D Jones

Software Architect, Programmer and Technologist Jon Jones is founder and CEO of London-based tech firm Digital Prompt. He has been working in the field for nearly a decade, specializing in new technologies and technical solution research in the web business. A passionate blogger by heart , speaker & consultant from England.. always on the hunt for the next challenge

Back to top