Published: 9th Nov 2017 | Words: 1,121 | Reading Time: 6 minutes

Page Speed

Optimise your images to improve page speed

Images can be one of the main reasons behind slow page loading. An image can cause a very long drag on your page load if it is very large. Multiple images that are very large can cause a serious drag on your page load. When you build any webpage consider the imagery within the page and work out what is the most effective way to build the page using the smallest number of images and also the smallest images in terms of size. Images can be a trade-off between requests to the server and image size. While it may seem like a good idea just to have let’s say one image as it will only be one request to the server, if that image is 1mb it will take forever to load. JPEG’s and PNG’s are two great image types. Each has their own attributes that make them ideal for certain types of images. A good rule to live by is have images as low quality as possible. If you have an image which really doesn’t need sharp detail, something like the background image on a body tag, then you probably can look at blurring the image slightly. Reducing the sharpness of an image through blurring it will really bring down your file size even if you only blur it slightly.

JPEG images

JPEG’s are great for things like photos and detailed imagery, however they don’t support transparency. A very good quality large image can be rendered on screen at a fairly small file size using a JPEG. When saved at 100% JPEG’s can be very large, however you can decrease the quality of the image and in turn the size. In Adobe Dreamweaver you can use the “JPEG High for maximum compatibility” setting to decrease the file size usually by about 70% while keeping almost the same level of detail. When you use this across all your JPEG images the saving is massive and you can significantly increase your page speed.  JPEG images probably should make up the majority of your images within your webpage unless you need a lot of transparent effects in which case PNG images may be a necessary option.

PNG images

Because of transparency PNG’s can be used to create very stunning visual effects. Having transparency allows your page to have elements that float within it that are not just the solid shape of squares or rectangles like divs. They’re great for things like logos as you can have the background behind your logo transparent and if you have to change the background colour of the containing element, you do it separately without having to resave your logo with a different background colour.  The issue with PNG’s can be which PNG type to use. There are two types of PNG’s you should be aware of, PNG8 and PNG24. PNG24 can be looked upon as a highly detailed and in turn high file size type of file that should be used sparingly on images that are small and that need to be incredibly sharp; things like logos. Using PNG24 images really does add an extra level of detail on your web page but they should only be used for small elements within the page. If you tried to save a very large image as a PNG24 the file size would come out massive, much bigger than the same image saved as a JPEG, and this essentially makes them unsuitable for a lot of situations. PNG8’s keep a lot of the attributes of PNG24 images however you can tweak them just like reducing the quality on a JPEG. There are various options available to you. Bringing down the amount of colours within an image can greatly reduce its file size and you will be surprised how little colour can actually be in some images. If you have an image that is only two colours then using 256 colours is a crazy idea. If you are going to use PNG’s as images within your page always look to using PNG8 image types unless you absolutely need high quality. There will be situations where low quality won’t do and you need to use PNG24’s like with a detailed logo as stated before. The only real issue with PNG8 images is they can become pixelated if you bring down the quality too much. If the image has a transparent effect this can lead to pixelated edges around the objects within it and can ruin things like shadow effects.

Image optimisation

If you have never done any sort of image optimisation there is a large selection of tools available online to compress images for you but if you would like to experiment with compressing images yourself, things like Adobe Photoshop can be used. “Save for web” in Photoshop brings up a nice interface with an image preview and you can select which file type you would like and tweak settings accordingly. Files can be saved in more formats than just JPEG and PNG. GIF is another file type that can be used. Combining images into CSS sprites is a great way to save requests and you can also optimise the CSS sprite quality. A combination of optimising requests and optimising images quality can turn a slow loading web page into an extremely fast loading web page. If you want an easy way of optimising your images install the Google PageSpeed extension for chrome, scan your page, and download the optimised images.

Repeating pattern images

If you’re using any sort of texture or repeating effect on a body, div, or similar tag always look at the most efficient way of repeating the pattern and just use a small image instead of a large one. It’s crazy to use a 1200px x 1200px image if you can use something that is 50px x 50px and you can just repeat it. If you think about the fact that you can optimise the smaller repeated image also you can stop a huge amount of waste. If you need a transparent background across a div or similar you can just save a 1px x 1px transparent PNG image and repeat it on the x and y axis. This will create a smooth transparent effect across the entire area and the 1px image will be tiny.