Images & Your WordPress Site: What You Need to Know

By Branch River Studio

I keep writing this information for clients over and over. That’s… not efficient. And it’s not helpful to as many people as it could be.

Anyway, I’ve got your back. Here’s the least need to know about images and your WordPress site.

For Better Images on Your WordPress Website

  1. 1. Choose your image (online or from your computer).
  2. 2. Don’t optimize it yet!
  3. 3. If your image is larger than 2000px on any dimension scale it down to 2000px. If your image isn’t larger than 2000px you can skip this step.
  4. 4. After scaling your image down you may want to crop it to an appropriate size, e.g., header images usually show a fraction of the original image.
  5. 5. Save your image using the WebP file format. WebP can handle transparent background. If WebP isn’t available use JPEG unless your image has a transparent background. In that case use PNG.
  6. 6. While exporting your image your program may ask you to change the image quality. This is where you reduce file size. Experiment with this as results will vary depending on the tool and file format you use.
  7. 7. Upload your image and don’t forget to add your alt text for the visually impaired.

Websites are all different and images can be used in numerous ways – from background images, to header images, to profile images, etc. Experiment with what works for you and your website.

What File Format:

WebP is the preferred file format. It’s the smallest. But it’s also relatively new, and not all programs export to WebP. If that’s the situation you’re in, use one of the file formats below:

JPEG (JPG): Use JPEG for any image that doesn’t have a transparent background.

PNG: If you have an image that has a transparent background. This is most common in logos. It allows you to put the logo over various colors and still look delicious. Amazing even.

What File Size:

How many bytes does your image take up?

The smaller, the better.

Whatever program you’re using should allow you to export to sizes appropriate for your website. What’s the right size image for your website? That’s a can of worms. And I don’t have time for cans of worms. Don’t even start on the ethics of keeping worms in cans.

What Dimensions Should Your Image Be:

How many pixels wide or tall is your image?

No bigger than 2560px by 2560px.

Never upload an image larger than 2560px at its largest side to your WordPress website. So, a square image of 2560px by 2560px is the “largest” image you should upload.

As a general rule, upload your biggest image as long as it is no bigger than 2560px on any side.

The Special Case of Logos:

Everyone wants to be the exception. Everyone wants to be remarkable.

Logos are rarely used as background images and are often used in smaller sizes, less than 500 px wide or tall. So upload a logo as large as 750px wide or tall if you’d like. But please make sure any extra space around the logo is cropped out.

When to Break These Rules:

When you know, you know.