Why Do We need to Optimise Images for Web use?
Digital cameras produce very large-quality photos. fantastic stuff! however, if left untouched and raw, they contain a lot of heavy load information that does not need to be served on a website. If unoptimized, your website images will weigh down on the web page speeds. Each time your page attempts to load for your visitors, the browser and/or server will take way too long to respond because there is so much data to read and download.
This is especially critical right now since a huge chunk of our visitors will no doubt be using their mobile phone, tablet, or another mobile device to view your website. (62% of all web traffic is mobile) Besides eating unnecessarily through your visitor’s data mobile bandwidth speeds may not be that of a desktop computer on wifi and take even longer to load, if at all before someone decides… Nope, this is taking too long, I’m outta here! this can even happen on desktop-served visitors and people WILL NOT wait around for your page to load. They will find the information elsewhere or give up together. Learning how to optimize images for faster page speeds will give you a much faster website site, which is more search engine friendly, and more SEO friendly.
How to Optimise Images For Web Use
First of all, it is not just about throwing your images through an program.
If you have dabbled trying to optimise your website before, you may have seen penalties stating “Served Scaled Images” Huh!? in a nutshell, this means that somewhere you are using an image size that is been resized by another means to be displayed at a smaller resolution than required. There isn’t one simple cookie-cutter solution to this, but it begins with asking yourself what resolution (size) will the image actually needs to be displayed as. Resizing your images to the correct usable resolution first will shave off a portion of the overall size before you even begin to ‘optimise’ them.
The bottom line is, do you need that huge image size? ok, the header image will be quite large as it needs to be, but an in-page image? think and plan with this in mind.
Secondly, Carefully Choose Your Image Type.
In learning how to optimize images for faster page speeds you need to learn the pros and con’s of different image file types. JPG, PNG, and GIF are your best options.
JPG is the most compressible image type
PNG allows adequate compression but not so much as JPG BUT enables you to use a transparent background.
GIF will allow you to use animation within your image but is largely incompressible after creation ( although Google is on the verge of allowing the use of animated PNG files so watch this space – See APNG)
Choosing and using the correct file type will allow you the best results from your optimization efforts.
Finally, The Crunch, A Squeeze, The Compression, Image Optimisation Machine!
When you use a program (for which there are many) to optimise images, these programs are essentially compressing your data. There are 2 main types of compression levels available, Lossy and Lossless. Basically, choose lossy if you prefer a more optimized image weight (faster image). The program will do its best to retain maximum quality in doing so. Lossless is a little bit fancier, so if you rely on high-quality images ( photography websites ) to be served, and still require optimized images, this is a better choice for you. The majority of users should go with Lossy.
After preparing your image files, it is usually easiest to optimize them in bulk. I don’t recommend optimizing every single image on your website in one go, even if you can. Instead, perhaps do it in chunks, maybe page by page. this allows you the due diligence to break a large job down and check your images post-optimisation to ensure the compression applied is satisfactory and has not gone past the point where you have lost the quality of the image you wish to display.
Even after using Adobe Photoshop ‘Save for Web’ function which is already essentially optimizing the image for web use I find separately optimizing again often gets the image file size down again even further without losing quality.
How do I do this? by using TINY PNG Image Optimiser.
There are different programs for both MAC and Windows users which you can use locally but the TINY PNG website can be accessed and used by either and the results, in my opinion, are far superior to most of the alternatives.
With TinyPNG you can upload and download your images for optimization. The catch here is that you can only upload 20 images at a time and none of them can exceed 5MB each. I say catch, but if you have followed my previous advice about choosing the correct resolution and file type pre-optimization, I very much doubt you will be attempting to “optimise’ a ‘WEB’ image that is more than 5MB. Even the largest of images I use online already at a file size measured in KB (kilobytes) by the time I get to this stage, never MB (megabytes) in most SEO images you should be aiming for a file size BELOW 100kb per image on average, certainly below 1 MB if not.
I Know What Some Of You Are Thinking…
Some of you reading this blog are probably thinking, well, Andy, this is very well and nice when creating images to upload to the website, but what if I have already uploaded them and want to optimise?
I think it’s much easier for me to use one of those WordPress plugins that like a gold-flaked unicorn can magically whisk away my woes and worries and do all my optimisation needs without any hard work! To this end, I’m simply saying good luck… This is not the most ideal way to optimize large images. Preferably, as you have read above already, optimized before you upload is the way to go. Besides producing far better results, using on-site mass optimisation plugins that do fancy jobs like this, also produces a risk, like crashing your website. So be careful.
Anything Worth Doing, Is Worth Doing Well.
If you are working backward in your on-site page optimization, I would seriously consider going the long and hard way around to correct your mistakes. Yes, it’s very time-consuming, and yes it may involve more hard work and be a more complicated endeavor than you wished to take on but ultimately, besides teaching you a valuable lesson (wags a finger) it will pay off in the long run. Can’t be doing with such a task? Ask a professional 😉
Ok, folks, that’s it for this how to optimize images for faster page speeds.
