Image Optimization Tips For Better User Experience
Home » Blog » 3 Image Optimization Tips For Better Website User Experience
3 Image Optimization Tips For Better Website User Experience
2022 August 24
by Jon Torres
Great images improve social sharing, website dwell time, and overall content engagement. But unoptimized visuals can do just the opposite.
It’s no secret that you’ve got to add images to your content. Not only are visuals more pleasing to the eyes, but many people also learn visually.
In fact, research shows that when people see relevant visuals, they can still recall information 72 hours later, up to 83% of the time. The Occupational Safety and Health Administration (OSHA) has also established that visuals are much more effective at helping people recall information.
So, if you want to provide useful, engaging, and intriguing content, you need to include high-quality images in all of your blogs, social media posts, and web content.
Free Download
Image Source
In some sectors, like ecommerce and coaching, visuals are even more crucial. The same way topical authority adds context and credibility to a post, images draw attention and boost engagement.
Also, whether you run a niche or multi-topic website , adding images to your posts can boost your content’s visual appeal and “page-dwelling power”.
But poor image optimization creates problems
Images make up 75% of the total weight of the typical website page. So, if your site’s visuals are not optimized properly, your page loading time may suffer.
Not good. Why?
A big reason is that slow-loading pages can reduce conversion rates by 7% and increase bounce rates by 39% (a sign of poor user experience). That’s not good for SEO, user experience, or sales.
So, what should you do?
Image optimization tips: 3 ways to increase page speed and improve your UX
The following tips are some of the proven image optimization strategies for faster page speeds and a better user experience.
1. Optimize image size
According to HubSpot, an optimized image should be about 100kbs. This size can help your web pages load faster to reach what 47% of respondents said was a good page loading speed; two seconds.
Other sources suggest keeping your image sizes under 1MB.
In WordPress, consider installing handy tools like Imagify, ShortPixel, and Smush to bulk-compress your images quickly.
Imagify will also automatically compress every other image you add to your library. It has an aggressive mode that compresses PNGs and JPGs significantly to boost page speed.
Imagemin, Kraken.io, and TinyPNG are other image optimization tools you can consider.
But perhaps you are concerned that plugins will slow your site down. Or, maybe you’re using a more open-source CMS.
In either case, consider using Image Optim to convert an entire folder of images to a compressed format. It’s drag-and-drop features ease compressing and uploading images.
So what if compressing images leaves a large file size in your CMS? Then try Affinity Photo or the Adobe Suite, both of which support image compression.
2. Think beyond JPEG and PNG
JPEG, GIF, and PNG images are the most popular formats for visual online content.
But, JPEG files undergo lossy compression. PNG is a lossless alternative, offering the highest quality. GIFs, which are best used for animated images, support lossless compression as well.
Along with the JPEG2000 format, the following image types are also useful for reducing image size without compromising quality.
Consider using Simple Vector Graphics (SVGs)
This file format is excellent for presenting abstract illustrations, like user interface diagrams, background illustrations, and logos.
Unlike JPEGs, PNGs, and GIFs, SVGs are text-based XML files. SVGs describe images and have a fairly small file size.
Moreover, Chrome, Firefox, Opera, Safari, IE, and Edge support SVGs.
Experiment with the WebP
Google’s WebP web image format can help reduce your image sizes by up to 40% while optimizing image quality.
WebP allows for greater compression ratios and reduced file sizes for mobile devices as well, significantly improving page load times.
Several WebP plugins are available. Still, an online converter can also help you transform a PNG or JPEG image into a WebP file.
Replace GIFs with APHG or AVIF
The Animated Portable Network Graphics (APHG) format extends the benefits of the PNG format. That means it supports animations with deeper color depths than GIF file types.
The AV1 Image File Format is a good choice for still images and animations. It can do this because of its high performance, higher compression, color depth, royalty-free image format, and more transparency features than older formats.
But only Chrome, Opera, and Firefox (stills only) support the AVIF image format.
3. Serve high-quality images – without the metadata
Here’s the thing. Many people dislike stock images.
One study showed replacing a stock photo with a real person’s image increased conversion by 34% . Another survey showed that customized video increases website traffic, dwell time, and user understanding (which is great for the UX experience).
Yet, “real” photos and videos are some of the heaviest files online, thus the slowest to load on a web page. So, how do you optimize them?
A simple first step is to remove all unnecessary metadata. For example, many cameras include GPS details, camera specs, color profiles, file descriptions, and more data to images. All of this takes up additional bandwidth to load on a web page.
You can avoid metadata appearing on your images by deactivating settings such as Geo-tagging in your camera’s settings.
Or, head over to Photoshop under “Metadata” and, next to it, select “Save for Web” then “None” to remove the metadata.
Additional ways to optimize images for faster loading speeds and user experience
In addition to the above three tips, here are some more common strategies to optimize website images for faster page loading.
Use lazy-loading to delay visuals from loading immediately. Medium, the online publishing platform, uses this feature a lot. It displays a lightweight placeholder image while the page loads, before replacing it with the actual image when you scroll it into view (browser window). By lazy-loading visuals, you save critical resources for rendering the above-the-fold portion of a page faster (viewport).
Include relevant keywords in the image alt text. Alt text, or alt description, is the text on a webpage that displays instead of an image when the image does not load. Adding human-readable, SEO-optimized image descriptions serves both people and search engines.
Use a Content Delivery Network (CDN). A CDN is a network of proxy servers that help you reduce the distance between your website’s server and visitors’ computers. By hosting your content locally or nearby, it improves content access speed on your site.
Make testing a habit. Routinely test your page load speeds to catch any culprit inefficiencies
With these simple steps, you can take a big step towards serving optimized images on your website. The result; a snappy website that won’t force your visitors to click away in a huff.
Guest author: Jon Torres is a digital marketing consultant, keynote speaker, SEO specialist, and business coach. As the founder of Jon Torres , Jon knows all the highs and lows of online business. When not absorbed in digital marketing, Jon loves raising mental health awareness through emotional support animals ( ESA ).
