How To Optimize Images For WordPress

How do you upload an image to WordPress? Do you just drag and drop it to the Media Library and hit the “Insert into post” button without doing any image optimization?

If so, that’s how you quickly lose bandwidth, miss opportunity for better search engine ranking, visitors, and sales.

Images make up nearly two-thirds of a webpage’s total weight, according to a research-based article. Having a lot of unoptimized images is bad for your site’s load time. This can create a domino effect on your key marketing metrics.

Even a fraction of a second in page load delay hurts. The latest Akamai study found that a mere 100-millisecond slowdown in load time could lead to a 7% conversion rate drop. If a page takes two seconds to load, bounce rates rise by 103%. Add one more second to the delay, and expect 53% of your mobile visitors to leave your page.

Ultimately, your sales will suffer. Amazon, for example, did tests that proved it could lose $1.6 billion in sales every year with just a one-second page load delay.

These facts emphasize the value of optimizing images for your website.

What is image optimization and why does it matter?

When you optimize images in WordPress, you make sure they have the lowest file size and right format while keeping them appealing enough to display on your e-commerce site or blog.

Image optimization is actually easy to implement, yet many webmasters and digital marketers overlook this step in boosting WordPress performance.

Here are the benefits you’ll gain from image optimization:

Faster site loading
Higher SEO rankings (Google uses page speed as a search ranking factor.)
Lower bounce rates, which means more visitors will see your page
Less bandwidth used (with less disk space on your server), which leads to cost savings
The better user experience for your visitors, plus savings on their mobile data plan
Mobile optimized site
Higher conversion rates and sales, as a result of the benefits listed above

Easy Image Optimization tips for WordPress Websites

Before you upload images to WordPress, make sure you perform these image optimization techniques. Remember: your main goal is to use the lowest file size possible without compromising image quality.

Use images relevant to your content

“A picture is worth a thousand words,” so a saying goes. But it’s worth nothing when it doesn’t match the subject of your content. For example, if your blog post is about traveling in Southeast Asia, a photo of the Eiffel Tower certainly looks out of place, unless you can justify why that photo has to be in the post.

Using a relevant image to accompany your content serves an important SEO purpose. If an image is added to a related topic or article (along with appropriate alt tags and image file name), you can boost your site’s ranking for the keyword the image and text are optimized for.

So choose your images wisely—don’t just upload an image just for the sake of using an image.

Choose the correct image format

All browsers support GIF, JPEG, PNG, and SVG image formats. But you can’t use any one of them without considering how it will affect your page load speed and what kind of image you’ll be using.

GIF

GIF (Graphics Interchange Format) has a limited palette consisting of only up to 256 colors. This makes it ideal only for simple images with less color such as logos, charts, graphs, and line drawings.

Since GIF supports animated images, it’s the go-to format for animation. But, no matter how fun they look on your blog posts, use animated GIFs sparingly. Too much movement in the image can be distracting for readers—and that is bad for your UX.

JPEG

JPEG (Joint Photographic Experts Group) is perfect for photographs, gradients, screenshots, and other images with multiple colors.

Avoid converting line drawings and logos to JPEG—they will come out blurry and have bigger image file sizes than GIFs.

Use new JPEG formats like JPEG 2000 and JPEG XR. These new JPEG formats boast superior compression ratio which means that they have a lower file size that contributes to faster page speed.

On the other hand, a Progressive JPEG loads layer by layer until the image is fully visible on the page. It is faster compared to the common JPEG (baseline) files which loads the image from top to bottom, line by line. A Progressive JPEG loads a small part of the data first which initially shows a lower quality of the image. However, as it loads further data, a higher quality of the photo appears.

PNG

PNG (Portable Network Graphics) produces the highest image quality but at the expense of file size. So limit its use to images that need high detail and high resolutions such as vector graphics and computer-generated graphics.

SVG

Because of their typically smaller file sizes, SVG (Scalable Vector Graphics) loads faster than JPEGs and PNGs. This is the ideal format for logos, icons, and images made up of geometric shapes. SVG keeps an image’s sharpness at various sizes or on retina display screens.

Take the guesswork out of selecting the best file format for each image with the help of a WordPress plugin called EWWW Image Optimizer. It converts images to the format that produces the smallest size.

Reduce image sizes

In image optimization, bigger doesn’t always mean better.

WordPress can handle any image size, so regardless of the image dimensions used, they’ll be scaled down to fit the main content block (the area where blog posts are displayed). For example, if your main content block is 700 pixels wide and you upload an image larger than that, WordPress will scale it down. But you’re just wasting bandwidth that way.

Larger images also need more disk space storage. A 2,500-pixel image, for instance, consumes 1 MB. Smaller image sizes take up less bandwidth.

To optimize images in WordPress for faster page load, always resize an image. You can easily make an image smaller without losing its quality on your computer, directly in the WordPress Media Library, or using a WordPress plugin.

How to resize an image on Mac?

Open the image in the Preview app by double-clicking on the file.
Click on Markup (the icon that looks like the tip of a pen) > Adjust Size (the small square icon).
Enter the new width and height.
Tick the small box next to “Scale proportionally.”
Click OK.

How to resize an image on Windows

Open the image in Paint by right-clicking on the file and choosing Edit.
Click on the Resize button > Pixels.
Enter the new width and height.
Tick the small box next to “Maintain aspect ratio.”
Click OK and save the image.

How to resize an image in WordPress

Upload the image.
Click on “Edit Image.”
Enter the new dimensions.
Click on “Scale.”
Then, click on the “Back” button.
Click on the “Insert into post” button.

How to resize an image using a WordPress plugin

Manually resizing images one by one could be a chore. You can automate that with a WordPress plugin called Insanity that allows you to set the maximum width, height, and quality of your images. The plugin will automatically resize all images that are larger than the maximum size. Its bulk-resize feature helps free up disk space by resizing all existing images in WordPress.

Compress images

Further, optimize images in WordPress with an online image optimization tool or a WordPress plugin.

When compressing an image, use only one tool or plugin once. Multiple image compressions can make your image quality worse. Also, when using a WordPress plugin, make sure that it compresses images externally on its servers to reduce your site’s load time.

A great free online tool for image compression is TinyPNG. Simply drag and drop up to 20 PNG or JPEG files to the site. After a few seconds, all the optimized images can be downloaded.

As for WordPress plugins, WP Smush is the most popular for image optimization and compression. It removes all unnecessary data (including the camera model used for taking the photo and creation date) from your images and then scales them for you before adding them to the Media Library.

Use a CDN

A CDN (content delivery network) helps improve a WordPress site’s load time and fix bandwidth problems through image optimization, among many other features. It works by serving an image from the nearest server to the visitor’s location. Using a CDN is a good option, especially if you have lots of traffic and activity on your site each month.

Use lazy loading

Do you upload tons of high-resolution images to WordPress? Don’t miss out on the benefits of lazy loading, an image optimization technique that loads an image only when the visitor scrolls down to view it. This makes a page load faster and uses less bandwidth.

Lazy loading is extremely helpful when you have something like “20 Best-Selling Cars of All Time” as your blog post where you need to upload multiple pictures of car models.

To get started, install one of the lazy loading plugins for WordPress.

Give each image a descriptive file name

Which file name tells what an image is about: “IMG00045.jpg” or “2017-honda-civic”? Definitely, it’s the second one. And that’s what helps your site rank better on Google.

Search engines crawl image file names. This is why a descriptive, keyword-rich image file name is a must for image optimization. Include keywords relevant to your website or blog post, with the main keyword placed ideally at the start of the file name.

Add alt tags to images

If you often leave the “Alt Text” field blank when uploading an image to WordPress, you’re missing out on the opportunity to add SEO value to your site and make it rank higher in search engines.

An alternative text, also called alt text or alt tag, is a brief description that the visitor sees when the image can’t be loaded on the page. It provides context for what the visitor is looking at.

Alt tags also describe images for search engines, which can’t read image pixels. Instead, they read the alt text.

Here are some useful tips to keep in mind when creating a WordPress image alt text:

Be as descriptive as possible.
Keep them short and clear.
Include relevant keywords where they fit.
If possible, use a long-tail keyword.
Avoid keyword stuffing. You don’t want to over-optimize images for SEO.

Caption your images

Adding captions to images takes extra time and effort, but it’s worth it in terms of SEO and UX. Captions are read 300% more than the body of content, according to Kissmetrics. They are among the first things that readers scan in an article, aside from the headings and images.

Thus, captions help you engage your visitors by making them understand and appreciate your content better.

You don’t have to create captions for all images, as some can stand on their own without a line of supplementary text. Captions are only helpful when you need to provide readers with more context about certain images.

Also, consider if you need to use a certain image for SEO. If not, you can just leave it without a caption.

Optimize images for social sharing

Don’t forget about social media when you optimize images in WordPress. When you (or a visitor) share your blog post on Facebook, for instance, your featured image gets displayed along with the title and meta description. The featured image must render properly on social media to entice people to check out your post.

Otherwise, Facebook will pick up an incorrect image and display it along with your content. The image might also get cut because of the wrong image size. To prevent such social media boo-boos, use these recommended image sizes for different social networks:

Facebook: 1200 x 628px
Twitter: 1024 x 512px
Google+: 800 x 1200px

You can also use a Yoast SEO plugin to optimize your images for social media in WordPress. It allows you to tweak your social settings such that the content and image will display correctly on different social media channels.

Properly sized images in the editor

When including images to your content in WordPress, most people just click “insert to post” without selecting the proper size. This causes the images to have irregular sizes that don’t match the page. Having images that are too large on the site can cause a drop in the Google PageSpeed rating. To avoid this, it is recommended to click the “add media” button on top of the content editor when adding images. One must also include the image details religiously as highlighted below.

Use Image Sitemap

Make sure that search engines like Google see your images when they crawl to your website. How are you going to do this? Just add your pictures to your sitemap.

By doing this, Google receives the metadata of the images which increases their probability to appear in the image search results. All you have to do is add relevant details such as the type of image, subject matter, caption, title, geographic location, and license.

To generate your image sitemap, you can use the Google sitemap generator or WordPress SEO by Yoast plugin.

Here’s a sample sitemap entry:

You can create a separate sitemap for the list of images or you can add it to existing ones.

Conclusion

Make this WordPress guide to image optimization an essential part of your website optimization efforts. It helps ensure that your images have the right format, size, and alt tags for faster site loading and higher SEO ranking, which leads to improved conversion and sales.