Master Guide on Image Optimization for WordPress

WordPress image optimization guide

WordPress is a versatile platform that helps you develop interactive websites with minimal hassle. You still need to have a little technical savvy to make the most of your data. Image optimization is becoming an increasingly critical issue.

Information displayed in graphics are now as important as your text. Your graphics must resonate with visitors. Making goofs with the design of your visual content slows the load times of your pages and damages your SEO page rankings.

At Double Click Digital, we want every website to be optimized to its fullest potential.

Here is a full guide to image optimization for WordPress:

Always Use Smaller File Sizes for Faster Speeds

High-speed internet has made web developers lazy. In recent years, the temptation is to just throw any old photos on your website you like. The servers and ISPs should be able to handle them.

The problem is that the driving force behind web development right now is not the trusty old desktop computer. Websites must optimize for portable devices. Bandwidth and processing power are issues again.

Consumers demand fast and responsive web sites and applications. If they must wait too long to view your content, they move on. Any site that takes more than three seconds to load loses business. Ideally, your site should load in as little as one second.

Start off right by choosing the correct image file format for the job. JPEG, GIF, and PNG files are common formats supported by most browsers. They each have their advantages and disadvantages:

  • JPEGs are great for large photos but lack support for transparency
  • GIFs are a simple format for icons, thumbnails, and background trim
  • PNG files are high-quality replacements for GIFs but take up too much space to replace JPEGs

A JPEG can hand a greater range of colors and details, but they often large files. Use them for the most important images on your site.

GIFs and PNG files have excellent transparency properties. Instead of using a background image, try setting the basic color using color codes in your cascading style sheets. Partially transparent images have smaller file sizes, but they still display well when combined with a favorable background color.

Regardless of the format, an e-commerce site with hundreds of product photos must take every opportunity to shrink file sizes. These three simple techniques are your first best bet:

 

  • Resize the files to a fit just the display size
  • Crop unnecessary image area to highlight the significant portions
  • Compress files using file compression software
use small image sizes faster website speed

Compressing files removes some of the redundant information. Minute details may not be visible to the human eye, and there are often colors that are redundant. Compressing a file is often easier said than done, just like with WordPress caching. When things go wrong, anomalies distort the colors and features.

For the best load times, try to keep your main image file sizes to 70 kb. Your trim, background, and icon images should be even smaller.

Use Image Optimization Plugins for WordPress

wordpress image optimization plugins

Manually controlling your files with basic programs like Microsoft Paint is initially cost-effective, but time-consuming and the results are dubious. Even with professional software like Adobe’s Photoshop, you could spend hours reshaping and compressing images.

Kraken.io is an image optimizer plugin for WordPress that does the work for you on-the-fly. It can resize and compress media uploaded to your site the moment they are called to display. It functions on JPEG, GIF and PNG files up to 32 Mb. This program is incredibly convenient and gives you back your time to spend on other important tasks.

Imagify.io is a similar on-the-fly optimizer plugin, but with fewer settings and knobs to twist. It also frees you from the chores of image resizing, cropping, and compressing but it is more accessible for average users. It also features retina images optimization. The retina formats are becoming important for future web image displays.null

Use a Content Delivery Network

You’ve shrunk your file sizes, and your page is still slow to load. WordPress users can turn to content delivery networks. CDNs host your media for you and supply images whenever a user calls up the page. This strategy improves the load time of your site by diversifying the processing load across more servers.

using content delivery network

Amazon S3 is a simple storage system for large files. It’s easy to use and scalable. Amazon servers power the company’s global network, and subscribers receive the same benefit of stability. To hook up your WordPress site with Amazon S3, the developers over at Delicious Brains offer their WP Offload Media plugin to connect your WordPress website with Amazon S3 cloud storage to help speed up your site. In addition to handling images, it reduces requests to your server for CSS, JS, fonts, and other file formats.

StackPath is another provider. It is designed to integrate with WordPress and has one of the most reliable and responsive networks.

Optimizing File Names for SEO

optimize files names for SEO

Search engines need to be able to find your images as well, but they can’t look at the pictures. They need useful descriptions instead. The generic name of your photos won’t get the job done.

Rename your image files following these conventional rules:

  • State plainly what the picture file shows
  • Separate words with dashes to distinguish searchable terms
  • Add a suffix to the label describing the camera angle of the shot

To ramp up your search engine results, do a little research before naming your image files. Find out what keyword terms your customers are looking up. Use these phrases to create your file names. The keywords in the image file names improve your page ranks.

Proper Use of the ALT Tag

The ALT tag is also important for SEO purposes. These tags are text that displays when the image cannot. The image might not be available because of a loading error or when a user is browsing your site in a text-only application. Readers look at the ALT tags and get an idea of what the image is supposed to be.

Search engines look at the ALT tags when indexing a site. The file names take priority, but ALT tags are another clue about what you are trying to communicate. They are an important factor in your page rank that many developers overlook.

Like your file name, try using some keywords in the ALT tag. These lines of text are for human readers instead of machines, so avoid overdoing it. Stuffing keywords in nonsensical sequences set flags for spamming. It could penalize your results.

As a rule, build the site for a human audience. Provide meaningful ALT tags for product photos and large images only. Omit them from thumbnails, backgrounds, and icons.

use alt tag in images

Reach out for Help with WordPress Image Optimization

Double Click Digital is ready to assist you with image optimization for the web. If you are having trouble with your load times, we might know a few tricks. Send us a message and tell us about your situation and check out our WordPress website speed optimization service. If we don’t already have the exact fix you need, we may suggest a few adjustments that might make the difference.

WordPress website speed optimization service
Related Articles