Images are one of the most important elements on your site and getting them right can be the difference between a popular site that provides an awesome user experience and one that doesn’t get any traffic or conversions. But images are, well, complicated.
There’s a lot you need to do to get them perfect so you get the most benefit.
In this ultimate WordPress Image Optimization guide, I’m going to give you all the information you need to optimize your images. We’re going to go through everything:
We’ll cover all the important subtopics and information we’ve shared in our previous image optimization posts as concisely as possible (including our complete guide to SEO for images), so you’ll be a WordPress image optimizer in no time. If you’d like a much more thorough explanation of these topics, I’ve included links throughout this post to our in-depth tutorials.
Preparing Your Images
Optimizing Your Images in WordPress
Image SEO
Serving Images
If you’re wondering what the best WordPress image optimizer is, look no further than our very own Smush Pro. Combine it with Hummingbird and SmartCrawl SEO, as all three can dramatically improve the performance of your images. You can try all three on your site with a free 30-day trial.
Looking to optimize images on a low traffic, individual, or hobby site? We also have a free version of Smush available on WordPress.org.
How to Optimize Images
Before you ever upload an image to WordPress, you need to make sure that your image is the best it can be when you make it. You need to compose it properly, size it perfectly, use the appropriate image format and give it a descriptive file name.
Composing Images
The most important question when creating your images is the following:
Is this image necessary?
Images take a lot of resources to deliver to your visitors. They’re “expensive” site assets so you shouldn’t use them just to fill a space. Create original images that enhance your content and use inexpensive assets, such as headings and text, instead of images to communicate and add style whenever possible.
Never add text to your images. This practice doesn’t follow accessibility best practices and if your images shrink down to be mobile-responsive, then the text will be smaller and harder to read. Plus, images with text need to be of much higher quality to preserve the fine detail of the letters. Don’t waste resources, create the text over your images with CSS instead, for better results.
Giving up images is hard, I know. They can really make your site look great, but according to research on site performance, sessions that convert users had 38% fewer images than sessions that didn’t convert, so more images don’t add to the bottom line.
Sizing and Cropping Images
When it comes
[…]
This article was written by Martin Aranovitch and originally published on WPMU DEV Blog.