Speed is a very important factor that affects how your visitors view and interact with your website.
Did you know, according to kissmetrics.com, that almost half of web users expect a page to load in 2 seconds before clicking away? This proves that page load time is a very important factor to avoid losing potential customers and visitors to your site.
According to zoomph.com the number one cause for slow website performance is unoptimised images.
There are many things you can do to speed up the load time of your webpage but a very easy way to improve speed is to optimise the images on your site. The images you create and use may look amazing but the file sizes could be very large slowing down the load time of your webpage.
What does it mean to optimise an image?
Optimising images for the web involves converting or compiling your images to a web friendly format that keeps similar or exact quality but at a lower file size.
Images hold data other than what you see on screen and this data can add unnecessary size to an image. By optimising your images, visitors to your website will not have to wait as long for the image to load. It will also save you greatly on bandwidth if you have a limited quota to your website’s hosting service provider.
Below is an example of an image that started off at 3.94MB, which would’ve taken a long time to upload and is not necessary as the image doesn’t need to be viewed at full size.
Once at 50% the size and load time is reduced drastically but the quality of the image is still the same. And even at 25% the quality of the image is still intact and the size of the image (now 79.55K) is equal to 0.077MB. This size reduction will save valuable load time.
How do I know if it’s my images that are slowing down my load time?
There are a number of free tools that you can use to test page load speed. One of the most popular is the Google Developers PageSpeed Insights, which will give you a ranking out of 100 for mobile and desktop devices and suggestions of how to improve your load speed. Visit www.developers.google.com/speed/pagespeed.This is a great tool to test on as it’s the same tool Google uses as a factor in your website’s rankings.
However, bear in mind that every device’s load time will be different based on the browser they’re searching in, their internet connection, the location of your hosting provider’s server and the list goes on.
How does it work?
Simply put, optimising an image involves removing all the unnecessary data that is saved within the image to reduce the file size. Images are saved into two types of compressions, lossy and lossless.
Lossy – Images saved in the lossy format will look slightly different than the original image when uncompressed, but is good for the web since these images use small amounts of memory but can look almost identical to the original image. The most common lossy image format is JPG.
Lossless – Images saved in the lossless format retain all pixel data to product the original image. For this reason, it contains a lot more data which in turn increases the file size. Some popular image formats include PNG and GIF.
How to optimise your images
Full optimisation of images requires much time and fine tuning to get that perfect balance between quality and file size. Most images may only require basic optimisation, however any image that has a large resolution or file size may require more advanced techniques.
Basic image optimisation involves:
- Reducing the white space around images. Cropping your images to remove the borders will allow easier manipulation of padding using CSS.
- Use of proper file formats. If you have detailed graphics involved, use the JPG file format. For logos or smaller icons that require transparency, use the PNG file format. If you have simple graphics that don’t use too many colours, use the GIF file format.
- Resizing your image to proper dimensions. Best web programming practice is not to use HTML or CSS styling to resize your images. Saving the image in its proper size will reduce the file size.
Advanced image optimisation involves:
- Using an image editor program like Photoshop to fine tune the quality and file size of your image. Adobe Photoshop has a helpful ‘Export as…’ feature that allows you to select the file format, change the quality of the compression, and change the size of the image.
- Using an image optimisation tool such as TinyJPG or TinyPNG. These tools further optimise your images by analysing the image to apply the best possible encoding to the image.
- Considering the replacement of any decorative images with CSS styling. Decorative images may look appealing but may increase file size and page loading times. Most web elements such as backgrounds, buttons and borders can easily be created and customised using CSS.
What we do at Fireworks
Our developers at Fireworks ensure that images used in all our projects are fully optimised for the web using the above mentioned optimising techniques.
If you would like help optimising your website or improving page load speed, give the team at Fireworks a call on 1300 660 160.