Adding images and files to your site is simple but one thing that customers often have a little trouble getting used to is making sure that images are the correct size. Images often get uploaded which are very large - after all, modern phones and cameras capture great quality images with huge megapixel sensors - and while they look fantastic, large images will result in delays to your users as they wait for files to download from your site site. Users won't hang around too long before abandoning so it's important to make downloads as quick as possible.
What do we mean by size?
When we talk about image size, there are a few attributes we're referring to: specifically, we're looking at the image dimensions (measured in pixels) and the file size (measured in Kilobytes [KB] or Megabytes [MB]). It's important to adjust dimensions and file size to make sure that your images load quickly.
See my image below - it's a bit too big (original image here). We'll use this as an example of an image that needs optimised for use on a web page.
This is the amount of space that an image takes up on your web page. It's measured in pixel area e.g. 300px x 200px (300 pixels wide by 200 pixels high). Ideally you want to have images that are no wider than the maximum width of the content on your website. So for example, if you have a page, whose content area is 700 pixels wide, you don't want (or need) to have an image that's 1000 pixels wide.
To reduce the dimensions of an image, you should use an image-editing application. There are many of these available - from the fully-featured Adobe Photoshop right down to Microsoft Paint. You can use whatever you have access to or are comfortable with, but some good free packages you can use are:
- Paint.Net (Windows)
- Preview (Installed on Macs)
- Fotor (Online editor)
- Pixlr (online editor - requires Flash)
- Don't scale images in the Mercurytide CMS. Although you can scale images in there, that's not changing the file size - a 10MB image at 500 x 500 pixels that's scaled down to 250 x 250 pixels within a web page is still a 10MB image and will take the same time to load. This is designed for minor adjustments, not optimisation.
- When you scale images in your chosen image editor, look for an option that allows you to scale 'proportionally'. Scaling proportionally means that when you reduce the width of an image, the program will also scale the height by the same proportion. This avoids images being stretched or distorted.
When you reduce the pixel dimensions of an image, you will automatically reduce the file size of the image (in KB or MB) at the same time. This is because you are reducing the amount of image data in the file.
See how my original image has changed now that I've reduced it to 500 X 375 pixels. 68KB down from 3.27MB. A reduction of 97%!
Whilst this will help reduce the size of the image, you shouldn't stop there and the next step is to optimise it further to compress it or remove any unnecessary colours. Doing this means that fewer bytes are needed to store the data. To the naked eye any change is practically invisible but can further help to reduce file size.
Your image editing application of choice may already have this functionality but there are free tools online which will allow you to optimise. The following are widely used.
Using my example above, I've used Paint.Net to optimise my JPEG file to save a further 18% without making too much of a compromise on quality.
- If using image editing software (e.g. Paint.Net, Photoshop etc.), where you have a lot of control over compression and colour reduction, don't over-compress JPEG images or you will notice a degradation in the quality of the image.
Using TinyPNG or TinyJPG doesn't give you as much control on the reduction as other software but won't over-compress and therefore any quality reductions won't be visible to the naked eye.
Use the above as a guide and always re-size and optimise before bringing images into your site. If you do, you'll have good-looking images that'll load as quickly as possible - making your users' experience of your site the best it can possibly be.
As always, if you need advice or help, get in touch with Sponge.