Image sizing & optimising
Published:
So why should you bother with either resizing or optimising? Because as far as you can see that photo you took looks just fine and dandy on your website...right?!
Well, that maybe so, but have you ever considered that overly large images will slow down your webpage creating a less than optimal user experience?! I'm sure we've all at some time gone to a website only to wait while a image slowly materialises bit by bit (yawn)! Perhaps you've started scrolling or reading only to have the page annoyingly jump about as everything finally appears!
Now annoying as this behaviour is, for some it can be costly too. As a huge percentage of web traffic these days is from mobile devices who are likely using their data allowance, which can be either limited or expensive to use so your large image / webpage downloading will be costly to your user. And its not only a problem to your users, this could also be costing you more money too. Of course this is all depending on your hosting allowance, but it stands to reason the smaller the file the more page downloads are possible before exceeding your bandwidth allowance.
Nowadays you also need to be aware that your webpage speed can seriously effect your search engine ranking (SEO), as it is a parameter they measure your website by, meaning a slow website will be ranked down. A costly mistake if you are a business and not one paying so called 1st page SEO experts will manage to improve.
I hope you'll agree these are good reasons to why you should consider reducing the size of your image files. But how do you do it, does it take long to do and will it cost me money? I hear you ask.
Resizing
The first step we suggest is to resize your image. Now some may argue that resizing your images is optimising them, and to some degree it is. But we really see resizing and optimising as two equally important but very different and separate steps, towards making your image file size suitable for the web.
To resize photos you don't need any additional fancy or costly editing software, only the photo editor that comes on your computer or laptop. You can see a practical demonstration we made using this process here on our Imagefunction website Sized Example Page. The photo we used for our example was originally 4160px wide x 3120px high, and needed to be resized to 500px x 375px.
Okay so lets say you have a photograph you took with your phone and it's now stored as a .jpeg in your Photos. Obviously you could download and use it as is, but the chances are like ours it will be much bigger in actual width and height than it'll be displayed on your webpage. So you need to decide the largest size it will be displayed at and resize accordingly.
So start by opening the photo in the editor, select resize and custom dimensions, add the width or height wanted and tick the maintain aspect ratio box, then save it as a new file. This new file should now be greatly reduced in size like ours which went from 1.49mb to just 142kb, but the picture quality like ours shouldn't have noticeably changed.
Optimising
We can now go a step further and optimize our jpg images. Optimizing an image is the process of decreasing their file size by using compression either with the lossy or lossless methods. The term image compression is used to describe the process of reducing the amount of space an image takes up. A compressed image takes up less storage space, less bandwidth and is faster to serve. Which will be a cost saving for both you and your users.
Lossy & Lossless are two of the main methods used for image compression though they both work slightly different.
- Lossless compression the data file is only compressed in size so there is no loss in quality.
- Lossy compression the data is accessed and parts are then stripped away permanently producing a smaller file with slightly less quality image.
All this talk of compressing and stripping data sounds kind of drastic right, but to be honest a jpg's quality can be considerably reduced and the changes still be undetectable to the human eye! You can see and compare examples of compressed and uncompressed images side by side our Imagefunction Picture Image Page.
You can optimize your own images by using any of the online tools available, many of which offer a free service, though there maybe a limit to how many images they will process free for you.
Generally these online tools work by opening in your browser, then you either click on the Add file option or just drag and drop your file into the box provided, some tools have pull down options to choose image quality (though if this is new to you it's probably a good idea to go with their default settings). The tool will then compress your image within seconds, though this will depend on the number of images it is processing for you. Here are two online tools we used for our Imagefuction example pages tinyjpg.com & CompressImage.io.
Image CDN & CMS
It's also possible to have this process automated such as using an image CDN or an addin to your CMS, both are ideal options if you have a large number of images to process.