We all know the basic rules to follow to ensure a nice, speedy and accessible website: efficient design, architectural and coding good content, well compressed images and good hosting. Today the topic in hand is compressed images and we hope to give you some well timed advice..
Image size was important in the technology space when building websites 10 to 15 years ago when compression was not an option, but now since most of the internet connections have a stabilized and are considered fast it shouldn’t matter.
It should be noted that if your audience are placed in the developing nations, then it is important that you have a fast loading website which does not get bogged down by big and clunky images which will slow down your site. Now, even Google will look at websites which are optimized correctly, ranking it higher than a similar site which has un-optimized images.
Why Image Optimization matters
Most designers and developers enjoy that the website is loaded with well-chosen and optimized images, but it still amuses me to see website which load slowly because images load in three to four stages.
It is no shock to find that the image is a thumbnail image which is 12 MP in size. The images are captured by a camera and transferred to the website to be used as the thumbnail image for a news story.
The original image is 5 MB in size and the dimensions are about 3000 pixels and 4000 pixels in size. In practice the image should be downgraded to 1000 pixels in size and uploaded to the site. This in turn will create another smaller version for use as the thumbnail, thus creating a very small 30 kb file rather than one 1666 times larger.
The thumbnail which is 5 MB in size will take 3 seconds to load while the compressed will take less than a fraction to load. Consider that if the whole page were filled with thumbnails.
Logos and icons
If for logos and icons, use SVGs made from vector shapes. SVGs will scale correctly for all devices. Otherwise, use transparent 8-bits PNGs. Never use and save a single color file as a compressed JPG, it makes them look like them have been bashed.
Use JPG for photos. If you’re using a program like Photoshop, it’s easy to forget to change the output type after saving out a load of PNG files, for example, so check you’re saving out as JPG and reduce the quality down to 50%. The reduction in quality won’t be noticed by the user.
Diagrams and infographics
Like logos and icons, solid color graphics should be saved out as 8bit PNGs or good old GIFs. If you have a PNG files which opens up and shows a lot more details than what is being displayed, upload the file on the suitable page and add a zoom icon to have the full-size file open in a popup. There’s nothing wrong with a pop-up that the user has clicked to open.