,

Image Optimization for Your WordPress Website (In 4 Simple Steps)

Image cropping examples

In the digital world, to be speedy is to be successful. A fast website means more hits, more shares and more sales.

However, this need for speed can conflict with your desire for vivid visuals. After all, what’s a website without pictures? Images give web pages character and engage users. And if you have a photography website, an image-rich environment is absolutely necessary.

However, images can weigh a site down. That’s why you need to optimize them. In this post, I’ll cover why image optimization is critical and provide four simple steps that you can follow to make your image files smaller – without a noticeable loss in quality – so that your site sees faster load times and a seamless user experience.

Why You Should Optimize Your Images

Reducing image size will speed up your site; the benefits of which may be bigger than you know.

Images stack seconds on top of the time it already takes your page to load. And when it comes to web elements making your site sluggish, images are often the culprit. Google says that “images often account for most of the downloaded bytes on a web page and also often occupy a significant amount of visual space.”

If your site has a strong focus on photography, then you have even more images than your typical webmaster. That just worsens the issue of speed.

Images slow your site. So what? That’s where research on site speed comes into the discussion. The bottom line is that slow loading times will hurt your business.

Google actually uses site speed as a factor when determining search ranking. It isn’t a core component of rankings, but it still matters.

This KissMetrics infographic succinctly explains why site speed matters.
This KissMetrics infographic succinctly explains why site speed matters.

More importantly, you should understand that for every second your page is delayed, you could see a 7% decrease in conversions. Taking that number as indicative, if you make, say, $3,000 per month from your site, you’re missing out on $210 of revenue on each flip of the calendar—$2,520 in losses over the year.

But maybe you aren’t making money off your site. Maybe you just want to generate traffic and establish an audience. Even in that case, speed still matters. For example, a slower site means fewer social shares. It also means fewer continuing visits. In fact, if a site stalls for more than three seconds, 40% of people will simply abandon it.

Google did an interesting experiment to evaluate the impact of site speed. After some users said they would prefer 30 search results per page, the company tried it out on a few pages. What they found was that adding the extra results added half a second to load times—and cut traffic by 20%.

So, how do you as a photographer avoid the potential pitfalls of an image-driven website? Here’s how you can optimize your images for better performance:

Step 1: Crop Your Images

Image cropping examples

This first step is rather simple: crop your images.

Why? Two reasons:

  1. Aesthetic appeal.
  2. Lower file size.

The first is pretty obvious. There are all sorts of ways to crop images that boost visual appeal. As a creative professional, you’re probably cropping already. If you’re not, it’s time to start thinking about how you can use cropping to remove unwanted details, refocus the emphasis of the shot, and so on.

But aesthetic appeal is just a bonus. The big impact lies in cropping’s ability to reduce file size. If you cleave off entire sections of an image—whether that means cutting a few pixels off the left side or eliminating larger areas in the periphery—you’re cutting down the amount of data that needs to be transferred to visitors.

Step 2: Choose the Correct File Type

Once you’ve cropped an image down, the first step of image optimization is picking a file type. Several file formats see common use for images on the web, and they’re each good for different things.

It’s not a matter of there being one file type to rule them all (this isn’t Lord of the Rings). Instead, file types are like tools in a toolbox; you need to pick the right one for the job.

Here are the key file formats you should consider:

JPEG

JPEG example
An example of an uncompressed image (top) versus JPEG’s ‘lossy’ compression (bottom).

This file format was created specifically to effectively compress images, particularly photographic data.

It’s the best choice for photography or other realistic images with significant detail. JPEGs have ‘lossy’ compression, which means that while they optimize well, they do so at the expense of losing some information. For your average photograph, a well-compressed JPEG will do a good job with little loss in image clarity.

GIF

GIF example

Despite being the oldest image file type in common use today, GIFs are still useful.

They only support 256 colors, so you would never want to use them for illustration, painting, or photography. However, GIFs can have transparent backgrounds, which is nifty. Then there’s the defining trait of GIFs: animation. A small file size is easy to obtain here, so consider saving your image as a GIF if it’s simple or involves animation.

PNG

An example of PNG's transparency properties.
An example of PNG’s crisp quality and transparency properties.

Like GIFs, PNG files support transparent backgrounds. But unlike GIFs, they are completely ‘lossless’ and can incorporate a wide range of colors. You wouldn’t want to save a photograph as a PNG, but if you have an image with distinct transitions and big areas of solid color (text and graphics come to mind), then the PNG format will work best.

SVG

SVG example
An example of SVG’s scaling properties.

This file type’s acronym stands for Scalable Vector Graphics. An SVG uses markup language to generate images that can scale to any size. SVG format is ideal for two-dimensional graphics, and will greatly boost site speed. However, this file type is still in a stage of relative infancy and browser support is somewhat patchy.

Step 3: Pick a Good Image Optimization Program

TinyPNG logo
TinyPNG is my #1 favorite image compression tool.

Making decisions about cropping and file type can get tiring. Luckily one of the best ways to reduce file size involves few decisions on your part.

Image optimization programs do a lot of heavy lifting. Here are some great ones:

  • TinyPNG. This web-based app selectively lowers the number of colors in your PNG file, which reduces file size with near-invisible difference in image quality.
  • JPEGmini. Underlying this software is a patent-pending technology that seeks to reduce image size as much as possible without impacting quality. You can get a free trial or pay to use it on a continuing basis.
  • RIOT. The Radical Image Optimization Tool, which you can download for free, employs a variety of techniques to reduce the file size of images. The program is neat because it gives you a side-by-side view of the original image and the newly optimized picture.
  • ImageOptin. This is a free app for Mac that also uses a variety of techniques to reduce image size while preserving quality as much as possible.

Beyond standalone apps, WordPress offers a number of plugins that can enable you to achieve the same ends rather easily. Here are our top three:

  1. EWWW Image Optimizer
  2. TinyPNG for WordPress
  3. WP Smush.it

Step 4: Create Thumbnails

a screenshot of WordPress shwoing a user switching the "link to" optionThumbnails are a great way to balance the tradeoff between small file size and large, high-resolution images.

As part of its default functionality, WordPress provides a thumbnail option, which generates a small (both in physical and file size) preview of the picture. These images can reduce page load times dramatically.

The problem with small images, of course, is that you don’t get to show off the vibrant detail of a given photo or picture. Luckily, WordPress provides an easy way around this. When you drop a thumbnail into a post or page, you can add a link to the original image by going to the attachment menu and selecting “Media file.” Visitors can then click the thumbnail to see an enlarged, high-resolution version of the image in question.

Conclusion

Site speed is important. Without it, you might live, but you won’t thrive. A major leverage point for reducing page load speed is to optimize your images before putting them online.

What tactics or programs do you use to optimize images? Let us know by dropping a line in the comments. And if you have any questions, please don’t hesitate to ask!

Image Credits: Wikimedia

2 responses to “Image Optimization for Your WordPress Website (In 4 Simple Steps)”

  1. Alexander Avatar

    Good stuff – just a heads-up: the application is named ImageOptim (m, not n)

Leave a Reply

Your email address will not be published. Required fields are marked *