Sure, images speak louder than words, but are you using them right? Online image optimization is key to leveraging the power of images on the web.
Images attract attention and help convey a message. They are also essential when it comes to driving sales and engagement.
However, you need to optimize them for the web. What does that mean? It’s all about reducing their weight, filling tags, as well as choosing the right format.
Here are essential online image optimization tips to generate more traffic and conversions.
Why Image Size Matters
Did you know that images take up the most space on webpages? This means that images are a crucial factor in determining how fast your webpage loads.
According to a Google study, you want to shoot for fewer than 500 KB in terms of webpage size. Lower page weight means faster page speed and happier prospects. So, keep those webpages trim and lean!
Each second of page load time will increase the number of visitors who LEAVE your website. Three seconds is the best practice for page speed, by the way. At that speed, most visitors will likely remain on your website.
To avoid losing customers because of a large and slow website, you need to compress your images. But first, run some performance tests using Google’s Test My Site tool for mobile and Google’s Page Speed Insights for desktop testing.
These tools show you your website’s weaknesses and how you can eliminate them. You’ll also see which images take up the most space and how much you can reduce them.
Compressing images for your website is easy. If you’re using WordPress, the Smush WP plugin is all you need for image compression. The plugin can automatically “smush” images you upload, reducing them to acceptable sizes while preserving their quality.
On the web, you can use free tools such as compressor.io and Compress JPEG. Just upload your images, individually or in a bulk, to drastically resize them. Once again, the quality of your images won’t be altered. Neat, right?
You can also resize images for the web through Phostoshop. Just go to File > Export > Save for Web when saving files. You’ll see resizing options and other online image optimization features in the window that opens up.
Writing Tags and Captions
Online image optimization also includes filling out the tags, caption, and description fields.
In the alt tag field, briefly describe the image using your targeted keyword. Screen readers for the blind and visually impaired will read out this text. For example, if you have an image that’s used as a button to go to product Y, the alt text would say “button to visit product Y”. You should always add alt attributes to your images for SEO and accessibility purposes.
The title tag is a bit different. It’s shown as a tooltip when hovering over an image. In the case of an image button, the button could contain an extra call-to-action, like “Don’t miss out on this special offer! Buy product Y now!”. Title attributes aren’t as important as alt tags, but they can be useful.
If it makes sense, also write captions to tell users something specific about the image. Captions add context to the image. Plus, people tend to read captions a lot (just like on social media).
As for the image description field (on platforms that have them, like WordPress), you can enter as much information as you want. This text can be displayed on the attachment page for your image. Write the story behind a photograph, how you took the picture, etc. You can even add links in the description field.
JPEG or PNG?
JPEGs are the most popular file format online and are perfect for complex images, such as photographs, product images, homepage images, and banners. JPEGs have a huge color pallet to work with and handle these type of images very well.
The difference between JPEGs and PNGs is that the latter can handle transparency. How does this translate for the web? Well, transparency is mostly used with logos, which are the central part of your brand image. So use the PNG format for logos mostly.
Want to learn more about how you can harness the power of images on the web? Check out the best practices for adding images on your website.
At BrightPink Studio, we design & develop awesome websites, make gorgeous print materials, create logos and other branding items, and more. In our blog, we share news, tips & inspiration - like this article! If you enjoyed it, please share.