How to Optimize WordPress Images for Your Website

by Brenda Barron on Apr 23, 2018

It’s hard to run a successful WordPress site without plenty of stunning images. As a photographer, you want to show off your skills, highlight your techniques, and attract new customers to your website, and pictures are a great way to do just that.

Even non-photographers understand the power of using images on their landing pages and blog posts. After all, posts with images naturally generate more traffic and social shares than those without pictures.

Unfortunately, there is a problem with creating a photo-heavy website. More images mean that you use more server bandwidth, and more bandwidth means a slower website. Today, we’re going to look at the ways you can use stunning photos on your blog, while still delivering a site that’s lightning-fast. Importantly, we’ll be focusing on speed and quality today, not optimizing for SEO.

1.     Cut Down on Large Image Sizes

One of the biggest problems that photographers have when it comes to loading pictures onto their websites is they forget to scale images down before they upload. It’s tempting to simply snap a picture, edit it, and upload it to WordPress, where you can use the “edit” function to cut the image down to size.

Unfortunately, this doesn’t reduce the amount of effort your WordPress site needs to put into loading the image in the first place. While it’s only showing a fraction of the picture to viewers, it’s still loading the whole file every time someone comes to your website.

To eliminate this problem, cut down on large file sizes from day one. A good way to do this is with file compression plugin or tool. For instance:

• ImageMagick is an open-source tool which can allow you to rapidly change the file sizes of your images in batches or one at a time.
• TinyPNG is a simple online image compression tool with an API
• ImageOptim for Mac allows you to drag and drop whole folders to compress pictures quickly.

2.     Use an Automatic Optimization Plugin

If you plan to have a lot of images on your site, as most photographers will, it’s best not to optimize them all one-by-one. A better option would be to install and set up an image optimization plugin instead.

One of the most popular image optimization tools available is the EWWW Image Optimizer. This will automatically optimize the photos on your blog, regardless of whether they’re PNG or JPG files. There’s also a function included to optimize your full portfolio at once, so you don’t have to go back through your Media Library.

One of the biggest benefits of EWWW is that optimization takes place automatically, so you don’t have to spend a lot of time preparing your photos when you’re trying to show off your skills.

3.     Use a Content Delivery Network

Using a Content Delivery Network or “CDN” can be a fantastic way to speed up your website. It means that you serve the images that you load from the server that’s located closest to the visitor on your website. This means that if a visitor from India tries to load one of your photos, and there’s a CDN with a point of presence in Tokyo, it would load the picture there, instead of trying to load it from a server in America.

Often, CDN solutions are more common for people running websites with a significant amount of traffic. If you start to get a larger following on your website, it’s worth setting up a CDN with WordPress just to keep your site running strong.

One option is MaxCDN, which is now known as StackPath, one of the most popular CDNs in the industry. MaxCDN is used by everyone from Forbes to The Washington Times and AndroidCentral. The system features an easy-to-use control panel, so you can choose exactly where you want server support for your website.

4.     Create Responsive Websites and Images

Just because you’ve put the time into making your website responsive, doesn’t necessarily mean that your images are mobile-friendly too. When it comes to running a successful WordPress photo blog, it’s important to make sure that you change your administrative features so your WordPress website automatically displays smaller images when it’s loaded on a mobile device.

One way to make sure that every part of your site is fully responsive is to use a plugin like our very own Envira. Galleries created with Envira are mobile-friendly and completely responsive, ensuring that your visitors get the best possible experience whether they’re loaded from a tablet, smartphone, or laptop.

5.     Optimize Your Theme’s Graphics and Website Design

The standard WordPress website uses a selection of graphics that automatically load on each page. These include commonplace things like your background, site logo, sidebar graphics, and footer if you have one.

While the photos that you upload to your website on a regular basis might be the things that drag your site speed down the most, it’s worth noting that a poorly-designed theme can also have a serious impact on how well your site performs. Ideally, you’ll want to look for a WordPress theme that was specifically designed for photographers and bloggers.

For instance, Maker Pro by StudioPress is a highly-responsive theme that combines simple styling with flexibility. It comes with a customizable header for your logo or name, and everything is carefully organized to ensure that you end up with a fast-loading site.

6.     Try a Lazy Loading Tool

One way to take some of the stress off your WordPress website is to invest in a lazy-loading tool. This is essentially a resource-saving strategy wherein an image will only load when the visitor scrolls down through the view-frame of the image. For instance, if you decided to create and publish a large blog post featuring all of the best snaps you’d captured during the last month, there’d naturally be a lot of images on that page.

Lazy loading means that each image only has to load when a user passes over it. This reduces the stress on your WordPress site significantly and ensures that your users still get a fantastic experience when they’re looking at your images.

With lazy loading, the first viewed images on your website will still load automatically, so you don’t need to worry about your blog looking unfinished. One option is to enable lazy loading with a plugin like BJ Lazy Load.

Optimize WordPress Images, Make a Better Website

Remember that optimizing your website isn’t just about improving the speed with which your images load. An optimized WordPress site should also have SEO features that grab the attention of the search engines and stunning filters and designs that attract customers and showcase your professionalism.

However, if you want to make sure your website is the success that it deserves to be, you should start by considering some of the steps above. Once you know how to keep your site running smoothly and how to optimize WordPress images, you can start to work on other things like attracting and converting lead and building a repeat customer base.

Now we want to hear from you. How do you prefer to optimize images? Share your favorite tools below. And don’t forget to follow us on Twitter and Facebook for more photography and web design tips and advice.

SaveSave