Website load time is an important factor to its success with 40% of people abandoning a website that takes more than 3 seconds to load. A large percentage of bandwidth taken up, especially with ecommerce sites, is images.
So here are 6 hints and tips to reduce your images time impact and keep your website running fast:
There are three main file types that you should be considering when creating images for your website.
INSERT IMAGES OF FILE TYPES next to text
JPG: This is your basic image filetype. If you are using anything that is photography based JPG is your best choice as it compresses well while retaining a good amount of detail.
PNG: If your image requires a transparent background and has photographic and graphic elements it is best to use a PNG as you can achieve the transparency. These come in two different flavours depending on how many colours are involved.
SVG: SVGs have only recently started being used a lot in web design but are very powerful file types. They are only used for graphics such as icons or logos and have small file sizes, can be scaled to any size without losing resolution and can even be animated.
To achieve the smallest filesize possible it is best to save your images at the size they need to be. If you have an image that is 2000x2000px but it only needs to be 200x200px, the user is still downloading the larger image which will take longer. So make sure you are saving images to the correct size. With some clever coding you can even have different image sizes ready to download depending on the size of screen to optimize even further.
Bonus hint: To get your images looking fantastic across any screen, save them at double the size you want them, this means on high density screens like Apple Macs they will still be sharp. It will increase your load time slightly, but if you are optimizing your images it won’t make too much difference.
If you are using more advanced programmes to create your images you can tweak the way you save the image to wring every last kB out of the file size. If you are using the Adobe applications you can use the ‘Save for web’ function.
This converts it to 72dpi (screen resolution) and RGB colours so that it is already optimised to work on screen. You then have many option to tweak that can reduce the file size, all whilst live previewing the image to make sure you don’t lose too much quality.
Using on image multiple times on your website can help reduce load times across subsequent pages as your browser caches the image ready to quickly load again if needed.
Doing this might make it sound like your website is going to look boring, however it is the small images that will be repeated such as logos, blog images and for textured backgrounds you can repeat a square of texture multiple times.
Sprites and preloaders can be used to great effect if done properly and used sparingly.
Sprites: These combine multiple images into one single image and are typically used for buttons and rollover states if they require an image. This creates a single image file instead of having multiple. If you are using a large amount of images it can really help load time, it works in conjunction with HTTP requests.
Preloaders: For large websites with a lot of images and content these can be useful as it gives the user an indication that the site is loading so they are more likely to stay rather than being faced with a blank screen.
Sometimes the best way to reduce your overall website size is to scrap images and use CSS instead. CSS can now be used to create graphic elements by completely using code. There is no reason to make button images anymore when you can use CSS, making it a quicker load time.
Some great sites to look at your website performance are:
These both give you a great indication of how fast your website is and how well it performs overall. You can then look into the areas you need to improve upon.
If you need some help on where to improve your website get in touch for your free audit!
Banks Mill Studios,
Derby, DE1 3LB
Office: 0133 2343 112
86-90 Paul Street,
Office: 0203 962 0609