How to Create Killer Graphics That Don’t Affect Page Speed
It’s common sense that a high page speed score equals great UX. But today’s devices are increasingly complex, and displays like the Apple Retina and Super AMOLED render stunning graphics in ultra-high resolutions.
But how do you allow users to take advantage of high-definition graphics on your website?
On the surface, the answer seems simple. Just upload high-resolution graphics.
But high-resolution graphics often create longer page load times because of their large file sizes. Using a compressed image format such as jpeg is one way to ease overburdened servers, but this format often creates artifacts and pixelation that is very noticeable on today’s high resolution displays.
So what’s a busy tech person to do?
Here are a few suggestions on how to employ website graphics that don’t break your servers.
1. Start with the appropriate file format
If you’re using original photography, most DSLR cameras allow you to import images in RAW format. RAW image files include all data captured by the camera’s image sensor. You’re starting with the highest possible quality image before editing.
JPEG images are processed by the camera before importing into your editing program of choice, meaning you’ll often lose some data along the way.
Technically speaking, all cameras shoot in RAW. But many cameras handle some of the post-processing in the hardware before you import the image to another device, and some quality loss may occur.
Vector images (clipart and images created in programs like Adobe Illustrator) should be in SVG format.
Which leads us to our next tip…
2. Edit or create images in a lossless format
Many free image editing programs only allow you to edit in JPG format. Every time the image file is saved, compression occurs again. You’ll lose data each time a new version is created if you don’t have control over the amount of compression and quality of the image.
If you’re doing minimal edits, a free image editor like Design Wizard or is fine. Otherwise, stick with a photo editor that allows RAW image editing like Adobe Lightroom or the software that came with your camera.
3. Use Custom CSS in WordPress
WordPress 4.4 (and higher) supports responsive images. With responsive images, each image you upload can be scaled using the srcset attribute in CSS. WordPress web host Kinsta has a great explanation, and some sample code, to see what responsive image scaling should look like on a WordPress site.
4. Employ a WordPress image plugin
A variety of image optimization plugins are available on WordPress that do a great job of fixing problem images already uploaded to your site. These plugins save tons of time and resources, since you don’t need to edit each graphic individually to replace the originals that already exist.
Here are a few plugins to try:
5. Delete unused graphics periodically
If your website has volumes of pages, blog posts and more, it’s advisable to do a periodic audit to update or remove obsolete content.
Naturally, checking for obsolete and unused graphics should be part of this audit. It’s amazing the amount of space you can recover by deleting non-essential images.
6. Do a page speed test to find problem graphics
If you’re still unsure how your website graphics are affecting your site’s load time, use a speed test tool. Uptime.com will check your domain from up to 10 locations, as well as provide recommendations for improvement in all areas of your site’s setup.
Our free speed test tool not only covers graphics that are slowing your site down, but also catches problem areas like bloated code, mobile usability issues and slow response times.
We suggest running a speed test to benchmark page load and/or performance issues. If your results show problem images, use the suggestions provided (see screenshot below for a sample result) and the tips in sections one through four of this post to properly optimize your images.
Wrapping It Up
There’s a fine line between a great-looking site and a well-performing one. In today’s ultra-competitive business landscape, great-looking graphics are an important part of your company’s marketing assets. But don’t sacrifice UX in the process.
In addition to the free site speed test and domain health check tools, Uptime.com includes a suite of tools that provide real-time information about your website and app uptime 24/7 with a comprehensive 21-day free trial.
Minute-by-minute Uptime checks.
Start your 21-day free trial with no credit card required at Uptime.com.