Optimising website images
Want your website to be fast? yes! Want your website to be pretty? yes, can’t it be both?
Website users are an impatient lot and will be turned off by having to wait for your site to load. You can lose up to 40% of your viewers if your page takes 3 seconds to load. Google will also apply a penalty to slow sites when ranking search results. Images take up more than half the size of your webpage so it is important that these images are optimised so you aren’t wasting load time on unnecessarily large images.
How big should my webpages be?
The average web page is 1.7mB. Ideally pages would be smaller than this. The survey below from csstricks shows how big the web developer community think a webpage should be, the majority of respondents believe a webpage should be below 1mB in size.
Creating optimised images
How do i choose what image format to use?
This depends on what kind of image you have
- PNG images – This format is best for images with flat colour, allows transparency. No loss of quality, the resulting image tends to be larger.
- JPEG (.jpg) images – JPEG is best for photos and images without large blocks of flat colour. The resulting image will be smaller but of lower quality.
My images need to look pretty though, no one wants a blurry low quality image!
There is a balance to be achieved here. The save for web feature of photoshop allows you to preview the image in different formats and compression settings, showing you the quality and size of the output message based on the settings selected. Images can be compressed without any loss of quality, this doesn’t give as small a final result as decreasing image quality so I recommend that you combine both methods. WordPress users can use the plugin EWWW Image Optimizer to compress images as they are uploaded (bulk image compression also available for images already uploaded). If you are not running WordPress you can use PunyPNG to compress your images.
What other tricks do I have at my disposal?
For WordPress users a plugin such as BJ Lazy Load will speed up your pages by loading images further down the page as they get closer to being shown on the screen.
Using optimised images
Those pretty features images, they are important. How big should they be?
As with all images these images shouldn’t be much larger than the maximum size they will displayed in the browser. If an image is going to be displayed in a div that it is 700px wide it is a waste of load time to make the image 2000px wide.
What about my social media images?
This can be best summed up in this beautiful infographic from paperlarkdesigns.com
Can I use images to score SEO points?
Putting your keywords in the alt tags of your images can improve your page’s SEO score. Also be sure to use descriptive filenames for all images.
What about mobile?
This can be tricky as the img tag can only reference one image source. To load different images based on the screen type your images need to be set as the background image of a div as this can be altered in CSS. Note that setting display: none or visibility: hidden will not stop images from loading.
And that as they say in the classics is that. Good luck and enjoy your super speedy streamlined website.