• Skip to content
  • Skip to footer
A Bright Clear Web

A Bright Clear Web

A Bright Clear Web - Simple, effective, accessible websites

  • Home
  • About
  • Websites
  • Writing
  • Learn
  • Blog
  • Contact
You are here: Home / WordPress / How To Optimize Your Images For Your WordPress Site

How To Optimize Your Images For Your WordPress Site

Posted: October 9, 2015 Updated: July 12, 2018 by Claire Brotherton
15 Comments

Finding Featured Image Size With Chrome Developer Tools

WordPress and Images

WordPress is actually pretty smart when it comes to images.

Images have two main sizes associated with them:

  • Image file size, which is measured in KB or MB
  • Image dimensions, measured in pixels (px)

The two values are related – the smaller the image, the lower the file size.

When you upload an image, WordPress by default creates copies of that image in standard dimensions. You can see these in the Settings > Media screen.

The defaults are:

  • Thumbnail size is 150 x 150 px, and cropped to the exact dimensions.
  • Medium size: maximum 300 x 300 px.
  • Large size: 1024 x 1024 px.

WordPress takes your original image and makes these smaller versions, which are stored in your wp-content/uploads folder.

Attschement display settings sizeWhen you add an image to a post or page, WordPress will prompt you to choose the size to insert.

It makes sense to choose an image closest to the size you want on the page. If you don’t have the exact size, choose the next size up. Once it’s added you have the option of editing it and scaling it down to a custom size.

Adding additional image sizes

The Simple Image Sizes plugin lets you add additional standard image sizes, and it also will regenerate all your images for the sizes if you make a change.

By default it will show you all the image sizes in your Settings > Media, including any extra ones built into your theme.

Media Settings - Simple Image Sizes

You can change the Media default sizes if you desire. BUT if you do, they will only take effect for newly uploaded images. Existing ones are unaffected.

You can also add your own sizes, but don’t create too many – remember each size is created and stored for each image. Make sure that you check the box marked Show in post insertion ? for any non-standard sizes if you want to include them in posts or pages.

The Regenerate Thumbnails feature will resize all your images to the new sizes. Use this if you want the new sizes available across all your images.

Great. What could possibly go wrong?

Sometimes, we users can do dumb things.

One of them is to put images straight from your camera on to your posts or pages and insert them full size.

Why is this bad?

Images from your camera are designed for print.

Bigger images and bigger file sizes are great for photographers – they get better prints.

Web ≠ Print!

Full size image 7MBWeb pages are the opposite. They need to be as small as reasonably possible so that they load speedily. This is particularly important for mobile devices.

The problems with large images:

  1. Your pages will load slowly, which could deter visitors.
  2. Your site’s SEO could be negatively affected – page speed is a ranking factor.
  3. Your mobile visitors will use up their data allowance faster if your pages are big.
  4. Your images will not have meaningful filenames.

Featured images

Featured images, also known as post thumbnails, are a special type of image that you can attach to posts or pages. They are not enabled in every theme.

Themes which use them will show an image on the blog page by each post – usually above the post or to the side of it. The individual posts may show the featured image too, but not necessarily.

The size of the featured image shown is theme-dependent. On my blog, the featured images are thumbnail size – 150px wide. The height varies dependent on the shape of the image chosen.

When we add a featured image, we don’t get the option to select the size – it’s predefined.

So if you upload a 6000 x 4000 px 7.2MB image on to your site and add it as the featured image to a post, what you will get?

A very slow loading page and unhappy users.

How do I know what dimensions my featured image should be?

There are a few ways:

Non-geeky ways

Check your theme documentation.

Install Simple Media Sizes, as mentioned before – this will show you what size the featured image (post thumbnail) is.

For example, in the Twenty Fifteen theme the featured images are always 825px wide x 510 px high.

Geeky way

Using Chrome browser, open Developer Tools (F12 on Windows, CMD-alt-I on Mac).

Click on the spyglass icon.

Roll your mouse over the image and the dimensions will be shown.

Finding Featured Image Size With Chrome Developer Tools
Finding Featured Image Size in Twenty Fifteen With Chrome Developer Tools

Other images for posts and pages

I recommend not making your images wider than your theme. You can check the size by reading your theme documentation or by using the Developer Tools method above.

Using Developer Tools on my blog
Determining the width of my blog posts with Chrome Developer Tools I can see they are 720px wide. Full width pages are larger, at 1140px width.

As a rule of thumb, many themes are built on a 960px grid, but wider themes (1200px width or more) are becoming more common.

Warning: changing theme

If you decide to change your theme at a later date and move to a wider theme, the featured image size will likely be different and your post/page images may look too small. It’s a good idea to always hang on to the original images in case you need to do some re-editing later.

Remember:

You can make a large image smaller but you can’t make a small image larger.

How should you optimize your images for your WordPress site?

You need to be mindful of both dimensions and file size:

  • The image dimensions should be as wide as they need to be and preferably no more
  • The file size should be as small as possible without noticeable loss of quality

My preferred workflow

  1. Identify the image you want to upload. This could be your own image, or one you have permission to use like a stock photo.
  2. Copy the image so that you keep the original. (It’s very important to keep the original image.)
  3. Rename the copy with a name that means something. So your original might be called IMG_0167.JPG and your filename might be toy-robot.jpg.
  4. Identify the maximum width you want the image to have. (Theme-dependent, remember.)
  5. Go to a photo editing tool and make your photo that width. Keep the proportions so your image does not stretch.
  6. Save the picture for Web.

Optional step: Go to TinyPNG.com and upload the image there. This will compress it further. Download the resulting file.

When adding to a post or page, make sure that you use the following options:

  • Set alt text – describes the image for visually impaired people
  • Select the alignment on the page – your choices are none, left, right or centre. I prefer to centre or right align images.
  • Select the size to display – thumbnail, medium, large or full size.

I don’t know what size my previously uploaded images are…

Find out the dimensions

Install the PMR | Add Image Dimensions Columns plugin.

This will give you the width and height of each image in your Media Library.

Width and Height columns in the Media Library
Width and Height columns in the Media Library

If you have some really large images, sit down and catch your breath. We’ll tackle that next.

Editing large images in the Media Library

Before you begin, make a backup – you will be changing the image sizes permanently.

WordPress actually has basic image editing tools built in.

It’s most important to get the dimensions of a large image reduced, as that will reduce the file size naturally.

You can do this by clicking the Edit link for an image in the Media Library. Then select the Edit image button on the Edit Media page (underneath the picture).

On the Edit Media screen, change the size in the Scale image boxes.

Scaling a large image to make it smaller in WordPress

The default is to apply the change to all image sizes. I recommend you stick with this.

Click the Scale button, then Update.

Unfortunately, if you have a lot of large images, you will have to scale each one separately. There is no bullk scaling option.

After you have done this, you can compress the file size further.

Optimizing your WordPress images with a plugin

You can save even more on image size by using a plugin. This will also optimize all new images you upload.

Install EWWW Image Optimizer.

The settings for this plugin are quite esoteric. Read this article on EWWW for more on its settings. Personally, I assume the defaults are okay.

Once you install the plugin, go in the Media Library and you will see an Image Optimizer column.

Media Library showing Image Optimizer settings for an image
The Image Optimizer shows your image file size and whether it would benefit from optimization. Remember to resize your image first – this one is still too wide!

This will show you the file size of your media and whether they have been optimized or not.

If it says Not processed, you can run the optimizer to reduce the file size.

If you see No savings, great – it’s already a small file size.

You can also go to Media > Unoptimized Images to see what hasn’t been done.

Unoptimized Images with EWWW

You can optimize on an individual basis, or choose the Bulk Optimize option.

I recommend that you take a backup first before running the optimizer.

This should help reduce your image sizes to a reasonable level.

There are further measures you can take to improve your site speed, but this is a good start.

Did you find this post help you optimize your images for your WordPress site? If so, leave me a comment.

Related

Category: WordPress Tags: featured image, images

About Claire Brotherton

Freelance web designer and front end developer based in Edinburgh, Scotland. I love WordPress, code, learning and blogging.

Reader Interactions

Comments

  1. Vips says

    October 12, 2015 at 9:13 am

    Great post Claire, very informative and useful. Thank you for sharing.

    Reply
    • Claire Brotherton says

      October 23, 2015 at 8:45 pm

      Thanks Vips!

      Reply
  2. Barbara Radisavljevic says

    October 18, 2015 at 9:28 pm

    Thank you for some very helpful information on using images in WordPress. I do wish the preferred image size for a theme header was specified on the customization page. I’ve been going by trial and error on some themes.

    Reply
    • Claire Brotherton says

      October 23, 2015 at 8:45 pm

      Thanks Barbara – agreed, it would help a lot if the image sizes were made obvious within the WP-Admin. It seems to be down to the individual theme author as to whether they are specified or not.

      Reply
  3. James Cooper says

    October 21, 2015 at 10:07 am

    Good stuff Claire! http://www.jpegmini.com is a great tool like TinyPng but there’s also desktop/app versions so no need to upload things anywhere – it’s worth every penny!

    https://wordpress.org/plugins/ricg-responsive-images/ is also a very nifty way of all responsive image easily into WP.

    Reply
    • Claire Brotherton says

      October 23, 2015 at 8:43 pm

      Thanks for those links James! I’d like to know a bit more about the responsive images plugin. Have you seen it reviewed?

      Do you find the $20 version of JPEGmini good enough for most things?

      Reply
    • Ben says

      November 5, 2015 at 4:25 pm

      Hi, that ricg group plugin has made it into WordPress core in v4.4. Which is nice 🙂

      Reply
      • Claire Brotherton says

        November 5, 2015 at 4:33 pm

        Oh, that is good news. I heard Bruce Lawson talk about responsive images at WordCamp London and it all seemed so complicated! I’m glad this is going into Core.

        Reply
  4. john says

    August 19, 2016 at 2:02 am

    hello.
    Great and helpful article. Thank you.
    Can you recommend preferred/maximum file sizes in KB/MB ?

    thanks!

    -j

    Reply
    • Claire Brotherton says

      August 26, 2016 at 9:30 pm

      Thanks John.

      File sizes – as small as possible without compromising on quality. You might need to experiment.

      There are some suggestions at the end of this article, though I think these figures might be a bit optimistic: Tips for optimizing your web images

      Reply
  5. Beth Resse says

    January 8, 2019 at 8:35 am

    Hey, Claire Thank you for sharing a piece of information about WordPress. I am a blogger and working on my website to get more organic traffic. Your ideas all are pretty good and I’m going to establish these on my website.

    Reply

Trackbacks

  1. WordPress News: Image Optimization | ClarkWP WordPress Magazine says:
    November 24, 2015 at 4:22 am

    […] Optimization is achievable by using photo editing software such as Photoshop. It’s imperative that you don’t take images from your camera and upload them immediately to the web, as images that come from your camera are set for print rather than web. – Visit abrightclearweb.com for more information […]

    Reply
  2. How To Optimize Your Images For Your WordPress Site – Neil Robb & Friends says:
    January 9, 2016 at 10:44 pm

    […] WordPress and Images WordPress is actually pretty smart when it comes to images. Images have two main sizes associated with them: Image file size, which is measured in KB or MB Image dimensions, measured in pixels (px) The two values are related – the smaller the image, the lower the file size. When you upload an image, WordPress… Continue Reading How To Optimize Your Images For Your WordPress Site […]

    Reply
  3. On-Page SEO: Skyrocket Traffic To Your Existing Content » Stellar Marketing Activity says:
    August 22, 2020 at 1:07 pm

    […] understanding and make the content even more compelling, useful, and valuable to your audience. Optimising your images for your website is an important part of the […]

    Reply
  4. On-Page SEO: Drive Traffic To Your Existing Content | Online Visibility Academy says:
    March 5, 2022 at 7:09 pm

    […] understanding and make the content even more compelling, useful, and valuable to your audience. Optimising your images for your website is an important part of the […]

    Reply

Leave a Reply Cancel reply

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

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email. Read my privacy policy.

potted cactus and laptop with code

Footer

Categories

  • Accessibility
  • Blogging & Content Marketing
  • Business
  • Personal
  • Software & Tech
  • Websites
  • WordPress

Top Posts

  • How To Create WordPress Excerpts And Include Links In Them
  • How To Solve WordPress Image Alignment And Text-Wrap Problems
  • Improve Your Divi Website's Reach With Divi Accessibility
  • How To Set Up And Customize Twenty Nineteen Theme
  • Registering a Domain Name with GoDaddy - Step by Step

Let’s Be Social

  • E-mail
  • Facebook
  • LinkedIn
  • Twitter
Copyright © 2014 -2025 A Bright Clear Web
  • Privacy and cookies policy
  • Site map