Website Optimizations - Images
Websites are getting "fat" and slow. This article aims to tackle the bandwidth side of the issue in which websites appear slow because they take too long to load, and not because they are too CPU intensive on the client.
It is almost never appropriate to use an image that is larger than it is going to be displayed as. For example, if the image is only going to be shown in a tiny 200px x 200px box, there is no point using a 1024px x 1024px image and then just setting the width and heigh elements to 200. The browser will still be fetching the original image, but it will only look as good as if you had scaled the image down to 200 x 200 before sending it to the user. If you are trying to cram a lot of images on a page, such as for a gallery, use thumbnails for the images, and load the original full size image at the last second with an ajax call once the user has clicked on a thumbnail.
Use Vector Images If Possible
Vector based images are images that are literally made from maths and are saved in a textual form. This can be seen by opening the file in a text editor. Here is the contents an SVG image I created in Inkscape of a red circle.
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" width="210mm" height="297mm" viewBox="0 0 744.09448819 1052.3622047" id="svg2" version="1.1" inkscape:version="0.91 r" sodipodi:docname="drawing.svg"> <defs id="defs4" /> <sodipodi:namedview id="base" pagecolor="#ffffff" bordercolor="#666666" borderopacity="1.0" inkscape:pageopacity="0.0" inkscape:pageshadow="2" inkscape:zoom="0.35" inkscape:cx="375" inkscape:cy="520" inkscape:document-units="px" inkscape:current-layer="layer1" showgrid="false" inkscape:window-width="694" inkscape:window-height="539" inkscape:window-x="168" inkscape:window-y="181" inkscape:window-maximized="0" /> <metadata id="metadata7"> <rdf:RDF> <cc:Work rdf:about=""> <dc:format>image/svg+xmldc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:title>dc:title> cc:Work> rdf:RDF> metadata> <g inkscape:label="Layer 1" inkscape:groupmode="layer" id="layer1"> <ellipse style="fill:#ff0000;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" id="path3336" cx="428.57144" cy="543.79077" rx="154.28572" ry="145.71428" /> g> svg>
Since these images are made from maths and stored in textual form, they are a fraction the size of other formats such as jpg, bmp, gif, and png which have to store data for each of the millions of pixels. This also means that they scale gracefully to any size which is perfect for a website that wants to look great across mobiles and desktops.
Use JPG Compressions Where Appropriate
JPG is fantastic exported format for web images. It can keep the images the same size in terms of pixels wide and high, yet reduces their filesize dramatically through compression. Gimp is a fantastic tool for finding the correct compression ratio for you as it allows you to drag a slider to select the compression level whilst seeing a preview of what the file will look like, along with its file size. I find that between 80 and 90 percent is ideal as this can save you 80+% of the filesize, but going beyond this doesn't save much storage space, but will noticeably degrade your image.
If you have lots of images to convert, or you want to target a certain file size, then it may be faster to use a CLI tool, such as jpegoptim.
Be warned though, JPG is a terrible format for images that have text in them as explained in the video below:
... for those types of images (and computer screen grabs), you probably want to use the PNG format.
First published: 16th August 2018