The speed at which a webpage loads has become more of an issue as businesses increasingly demand more media-rich experiences for their visitors. These experiences require more CSS, JavaScript and HTML, as well as an increase in the frequency and quality of images. While all of this looks great, it can cause a serious slowdown in the time it takes to load pages on your website.
So why is page load speed so important?
As well as creating a better experience for the modern, short-of-attention website visitor, slow page load speeds can also affect the potential for people to find your website in the first place, with Google using the “time to first byte” as a significant ranking factor when it comes to SEO.
Slow page load speed can be a common problem across many websites, and a principal cause is the humble image.
For marketers and designers that are using common design software such as PhotoShop or Illustrator to create or edit images before putting them live on the web, there are steps that you can take when you’re exporting your images that will ensure that they don’t compromise website performance.
Getting the Format Right
There are multiple options while exporting graphics from different design software and the format you choose will depend on the ultimate destination for your image.
The choice that will have the biggest effect on the page speed of your website will be whether to export in CMYK or RGB.
CMYK is principally used when images are going to print. When your images are going to print, they must be exported in CMYK and the resolution must be 300DPI. This gives a higher quality, richer image which is essential for print images to look at their best, but will generate a large image size which would drastically reduce page load speed if uploaded to the web. Also, the colors would automatically change to RGB and as a result the image could be different than what you review in designing software or a PDF file.
If you want to export graphics for web use then it will need to be exported in RGB/sRGB colors & not more than 72 dpi resolution. If a print ready graphic is around 20MB in size then that same graphic for web use should be exported in KBs to speed up the website’s load time.
Design Best Practices
As well as the format, there are a number of other considerations when exporting images for web use. Here are some best practices:
Dimensions are a common mistake when exporting assets for web use. The dimensions should not exceed the size where it is going to be posted. If you design a slider banner where the required dimension is 1600 x 650px and you provide the image in 3200 x 1300px, you would get a clearer version of that graphic but it would increase the size of the file and that would increase the page load time. Try not exceed the required size when uploading your images.
Check the right boxes. While exporting a .jpg format, make sure you export it with the progressive option checked with 3 scans. And if exporting a .png then make sure the ‘interlaced’ option is checked. The main advantage of using a progressive/interlaced image is that at time of page load, it shows the user a very blurry image (more like an image placeholder) to complete the page layout, before presenting the final version of the image once the remainder of the page is in place. This speeds up page load time, especially on media rich pages.
Don't embed color profiles because modern browsers have better ICC profile support.
Export final graphic as sRGB and set metadata to none. This would help you reduce the file size without losing quality.
Set quality between 65% - 75% when you export the image for web or other digital use. This will have no obvious effect on the quality of the image to the user, but it will reduce the file size and therefore increase page load speed.
As content marketing strategies involve increasingly media rich content to help stand out from the competition, it is important that this doesn’t get in the way of the user experience and jeopardise your website’s place in the rankings. By taking a few simple steps, marketers and designers can ensure that the images that are being uploaded to the website not only look great, but they help the website to perform better.
