local SEO website not ranking
2018 Addy Awards Silver Addy WInner
best marketing tips of February 2018
logo design process
Perseverance, opportunity and the right marketing tools
marketing plan
Best of January 2018 Tech News
The Pinkletter

The January Pinkletter

image optimization

Image Optimization Tips to Boost Conversions on Your Website

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.

page speed insights

Compressing Images

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.

photoshop online image optimization

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.

web design mistakes

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.

namecheap-bannermailchimp_125x125

Latest On Facebook

“Be like a postage stamp. Stick to a thing till you get there.” – Josh Billings #Quote #Inspiration ... See MoreSee Less

16 hours ago  ·  

Quick Tip: When you’re sending a marketing email, use actionable language. Use verbs to inspire readers to take action (download, buy, etc). However, your subject line doesn’t always need to have a verb as long as recipients know what they can do with the information. ... See MoreSee Less

2 days ago  ·  

5 days ago  ·