Adding and Using WordPress Custom Image Sizes: A Guide to the Best Thing Ever

wordpress custom image sizes lol
Update April 4, 2017: Added a section detailing how the responsive image system in WordPress 4.4+ works, and how WordPress custom image sizes interact with this system.

I really love being able to set custom image sizes in WordPress. The power and flexibility this system opens up for building beautiful, easy-to-administer, performant websites is hard to overstate.

The newly launched WPShout theme, for example, has two featured image sizes: the large one (here at the top of this post), and a smaller one halfway down the homepage. We also use custom image sizes to make sure that the images in our post bodies aren’t unnecessarily large for the space they’re occupying.

That’s a lot of image-sizing complexity, and WordPress just handles it all for us, straight out of the box. Imagine if we were doing all the resizing and optimizing ourselves, in something like Photoshop—it would just about eat our business. Images would be an unattainable luxury.

With that pep talk, let’s see how you can use WordPress custom image sizes as well!

By the way: are you interested in learning WordPress development? Then check out Up and Running, where we’re offering a free course on the five key principles of WordPress development. Check it out!

A Very Quick Guide to WordPress Image Sizing

Every time you upload an image, WordPress generates a resized version of the image for each registered custom image size.

Every time you upload an image to your WordPress site, WordPress automatically generates a resized version of that image for every custom image size that your theme (and parent theme, if you’re on a child theme) has registered.

In your WordPress filesystem, which is where those image files live, that looks like this:

wordpress image sizes

Do you see the power of this? You retain the original image you uploaded—which in this case is over 1MB, too huge to use on the site. But you can also use automatically generated, resized and cropped versions of that same image across your site. The image will fit into the spaces it should fit into, and not be a larger file than it ought to be—and WordPress takes care of it all automatically.

One special case is the featured image, a single image that you set to be the “official representative” of the post it’s attached to. WordPress has special ways for displaying featured images across the site, and you can take advantage of the same cropping and resizing functionality you can with any other image.

It all sounds pretty cool, right? Let’s look at how you can program some WordPress custom image sizes for yourself.

“Thumbnails” and “Featured Images”: Ugh, Here We Go

Before we get to coding, there’s one WordPress semantics detour we’ll need to take.

“Featured Image” started out, and is often referred to, as “Thumbnail.”

Because WordPress is backwards-compatible, “Featured Image” started out, and is often referred to, as “Thumbnail.” (This type of legacy naming issue should sound familiar from our earlier post on “sidebars” and “widget areas.”)

This issue crops up as follows: the WordPress function set_post_thumbnail_size() sets the thumbnail image size across your site. This size (150px square by default) is also the default featured image size: it’s what you’ll see if you call the function to display featured images—the_post_thumbnail()—with no arguments.

So you’ve got a confusingly named function, the_post_thumbnail(), whose purpose is actually to display featured images. You’ve also got a totally bizarre function, set_post_thumbnail_size(), that sets the default “Thumbnail” size and featured image size across your site.

My advice is just to leave set_post_thumbnail_size() completely unused.

My advice is just to leave set_post_thumbnail_size() alone completely; don’t use it. Let “thumbnail”-sized (150px square) images dangle like an appendix, and leave it at that. Instead, we’ll be using a function called add_image_size(), and calling the_post_thumbnail() with arguments to tell it which image size we want to use for our featured images.

Adding WordPress Custom Image Sizes in function.php

In this section, we’ll look at the main code for handling featured images and image sizes in WordPress. The sample code we’ll be using is below; it goes in the functions.php of your active theme:


// Make sure featured images are enabled
add_theme_support( 'post-thumbnails' );

// Add featured image sizes
add_image_size( 'featured-large', 640, 294, true ); // width, height, crop
add_image_size( 'featured-small', 320, 147, true );

// Add other useful image sizes for use through Add Media modal
add_image_size( 'medium-width', 480 );
add_image_size( 'medium-height', 9999, 480 );
add_image_size( 'medium-something', 480, 480 );

// Register the three useful image sizes for use in Add Media modal
add_filter( 'image_size_names_choose', 'wpshout_custom_sizes' );
function wpshout_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'medium-width' => __( 'Medium Width' ),
        'medium-height' => __( 'Medium Height' ),
        'medium-something' => __( 'Medium Something' ),
    ) );
}

The comments in the code itself pretty much explain what’s going on, as will the rest of this post; but here are two quick notes that should help you get an early grasp on the code:

add_image_size() Arguments

add_image_size() takes four arguments:

  1. name, a string (required)
  2. width, an integer (optional)
  3. height, an integer (optional)
  4. crop, a boolean (optional)

name explains itself. width and height are target size values, in pixels. We’ll explain how they work (and how they work with crop) below.

wpshout_custom_sizes()

All you need to know about that function is that WordPress requires some boilerplate code in order to add custom image sizes into the “Add Media” modal—where site users can use them—and to define what name those sizes go by in the “Add Media” environment. Hooking into a filter hook called image_size_names_choose and registering the three desired image sizes are all wpshout_custom_sizes() does; here’s the result:

Adding image sizes WordPress

Using Added Image Sizes

We talked about the_post_thumbnail() earlier. It always gets called in The Loop. (If you’re outside The Loop, there’s a function get_the_post_thumbnail() that lets you specify which post you’re talking about.)

We’re always going to call the_post_thumbnail() with at least one argument: the name of the custom image size to use.

Because we don’t want to be getting actual 150px x 150px “thumbnails” as discussed above, we’re always going to call the_post_thumbnail() with at least one argument: the name of the registered-by-us custom image size we want to use.

That looks as follows (this code belongs in a WordPress page template like index.php or single.php):

// Start The Loop
if ( have_posts() ) : while ( have_posts() ) : the_post();
		
		// This could be anything; here we'll just pretend we want the post title
		the_title();

		// Display post's featured image, in 'featured-image-large' size
		the_post_thumbnail( 'featured-image-large' );

		// Continue with everything else in The Loop...

There you have it! You’ve put the post’s featured image, in a defined image size, onto the page. There’s more to learn here, but that’ll do for a start. If you have more questions about additional function arguments you can tack onto the_post_thumbnail(), check the Codex.

Regenerate Thumbnails

Run Regenerate Thumbnails after every time you change the image sizes on your site.

One of my top five favorite WordPress plugins of all time is Regenerate Thumbnails. It does the dirty work of making sure every image you upload has versions for all of the image sizes you declare. Run it after every time you switch up the image sizes on your site, or old images will start looking really funny.

Understanding Cropping

Let’s look at the function arguments of add_image_size() a little more closely. If you notice, some calls to the function have a fourth argument, set to true, and some only have two or three. As it turns out, this matters a lot for how your images come out looking, and is part of the awesome power of WordPress custom image sizes.

We’re going to structure this discussion by looking at the two available types of cropping: soft crop and hard crop.

Soft Crop

The more accurate term for “soft crop” might be “resize.”

“Soft crop” is actually a bit of a misnomer: the more accurate term might be “resize.” It’s WordPress’s default: you achieve soft crop either by omitting the fourth function argument in add_image_size() (or set_post_thumbnail_size(), if you do decide to use it), or setting that argument to false.

Regardless, the thing to know about soft crop is that it maintains proportionality of your image. In other words, it’ll resize see the whole image according to the dimensions you specify, but it won’t change the shape of the image, or cut any bit out of it. This makes soft crop a smart default for image sizes you hope to use inside your post and page bodies.

As a fine point, soft crop can work in one of two ways: with one or two specified dimensions.

With One Specified Dimension

This corresponds to the code for the medium-width and medium-height image sizes above.

If you soft crop and specify only one dimension (either width alone, or height plus “9999” for width), you will get an image that grows proportionally to the size of that dimension. So if you specify 300 for width, your image will be 300 pixels wide, and whatever height makes the image proportional.

With Two Specified Dimensions

This corresponds to the code for the medium-something image size above.

If you soft crop and specify both width and height, the image will grow proportionally until one of the dimensions touches its target, and it’ll stop there. So if you specify 300px width and 100px height, a long image would stop at, say, 300px x 80px, and a tall image would stop at, say, 60px x 100px.

The following three images demonstrate soft crop results for the three soft-cropped image sizes we registered above.

so many wordpress image sizes

Click to enlarge

Hard Crop

This corresponds to the code for the featured-large and featured-small image sizes above.

Basically, a hard crop cuts something to a predefined shape and size.

You achieve a hard crop by setting the fourth parameter of add_image_size() (or set_post_thumbnail_size()) to true.

wordpress image sizes demo

Click to enlarge

Notice that the hard-cropped image is no longer the same shape as—nor does it contain the full contents of—its original.

Hard-crop is often most useful for featured images, which typically have to fit into a defined area within your site’s layout.

In my experience, hard-crop is most useful for featured images, which typically have to fit into a defined area within your site’s layout. There are other uses for it as well, but that’s where it comes in really handy.

You probably wouldn’t want to hard-crop images that you’ll be inserting into your posts (unless you want, say, all your images to be square as a design decision), since post contents are normally more fluidly laid out and hard-cropping does destroy image information.

What if the Original Image is Smaller than the Desired Crop Size?

Too-small dimensions will just stay their original sizes.

Good question! In general, if the image you uploaded is too small to meet the desired dimensions, the too-small dimensions will just stay their original sizes.

Let’s say you’re cropping an image to 500px x 400px, but the original image itself is actually 300px x 200px. You’ll just get the full-sized version back.

Soft-Crop

Note that soft-cropping stops the moment your image reaches its first dimension target. So the only way you’ll fail a crop in soft-crop mode is if your image is too small in both dimensions, like the example in the previous paragraph. if you’re soft-cropping to 500px x 400px, and your image is 1000px x 200px, this isn’t a failed crop; you’ll just get a 500px x 100px image back, which is probably what you were looking for.

Hard-Crop

In hard-crop, however, it’s quite possible for an image to be big enough in one dimension, but too small in the other. If you’re hard-cropping to 500px x 400px and the original is 1000px x 200px, you’ll get back a 500px x 200px image. It will just look like the original image, with the outermost 50% (500px) cut off from the left and right sides. Most importantly, it won’t be in the 5 x 4 dimension you expected, but 5 x 2.

…So Upload Big Images

As you might be able to imagine, this can cause some major formatting ugliness if, for example, featured images are suddenly too small (and/or the wrong shape) for their containers. So upload the biggest thing you’ve got—in an emergency, you can even enlarge an image to meet your requirements in something like Photoshop; but be aware that this will reduce the image’s quality.

Setting the Right Image Sizes

We don’t want to be putting overlarge images on the page, so here’s where we need to get practical about limiting image sizes and filesizes.

Okay, now we know how to set WordPress image sizes. Now what image sizes should we set?

You may recall from our earlier post, Commonsense Image Sizing, that add_image_size() lets you view every image in any size you want! Because of that, it’s best to have the biggest raw material to work with, since you can shrink it to any size and filesize you want.

To state the obvious, though, we don’t want to be putting overlarge images on the page because they’ll slow the site down. So here’s where we need to get practical about limiting image sizes and filesizes. Fortunately, it’s not difficult: as in Commonsense Image Sizing, the guideline is to set image sizes that will be:

  1. Big enough to be properly sized under any view of the site on any device.
  2. No bigger than that.

In practice, this means just looking at your site on different device widths. If an image should fill a whole column, what’s the widest that column can be? It could be 800px when your site smushes to a single-column layout on iPads, for example. If you have a lot of images that should fill that column, you’ll want to register an image size that’s 800px or a little more wide.

This can get tricky if you start thinking about, say, full-width background images on 14-megapixel iMac screens. (Also, do not get me started on retina displays.) But for most images (and most sites), just keep it simple, see where an image fits on the page at different widths, and make an image size that’s that big and no bigger.

WordPress Responsive Images, and How They Interact with WordPress Custom Image Sizes

A major improvement to WordPress image sizing arrived in late 2015, with WordPress 4.4: responsive images. This is a background feature that you don’t have to “do” anything to enjoy, so in most cases it’s best just to be happy that other people have figured it out for us. But it’s good to understand how it interacts with WordPress’s image sizes system.

What Responsive Images are Good For

Responsive images speed up websites for users on narrow devices, by serving different image sizes to browser windows of different widths.

Responsive images are a web convention that emerged out of a simple problem: narrow devices being served wide images.

If you’re on a mobile phone that’s 480px wide, why should you be loading images (say, a post’s featured image) that are twice that width or more? An image that’s twice as large dimension-wise is four times as large filesize-wise. When a mobile device loads large images only to have them resize down to width the device can handle, it slows down page loads—especially problematic on phones, which often already have relatively slow and spotty connections.

On the other hand, we can’t just restrict every image on the internet to the width of the narrowest phone. What we need is to serve different image sizes to different devices, based on the width of the device. This is what responsive images are all about.

How Responsive Images Work

You may at some point have opened up your browser’s code inspector, and been frightened by an <img> tag that looks like this:

<img class="aligncenter size-large wp-image-12558" src="https://i0.wp.com/wpshout.com/media/2014/12/wordpress_srcset_example_one.png?resize=1024%2C687&ssl=1" alt="wordpress responsive images example" srcset="https://i0.wp.com/wpshout.com/media/2014/12/wordpress_srcset_example_one.png?resize=1024%2C687&ssl=1 1024w, https://i0.wp.com/wpshout.com/media/2014/12/wordpress_srcset_example_one.png?resize=750%2C503&ssl=1 750w, https://i0.wp.com/wpshout.com/media/2014/12/wordpress_srcset_example_one.png?resize=300%2C201&ssl=1 300w, https://i0.wp.com/wpshout.com/media/2014/12/wordpress_srcset_example_one.png?resize=768%2C515&ssl=1 768w, https://i0.wp.com/wpshout.com/media/2014/12/wordpress_srcset_example_one.png?w=1178&ssl=1 1178w" sizes="(max-width: 1000px) 100vw, 1000px" width="538" height="361">

This is the markup for WordPress responsive images. To understand how they work, let’s pull this example apart into its component parts.

class, alt, and width: What Hasn’t Changed

<img class="aligncenter size-large wp-image-12558", alt="wordpress responsive images example", and width="538" height="361"> are nothing new to responsive images. These bits of markup are the way WordPress assigns classes, alt tags, and (almost entirely obsolete) hardcoded width and height values to images, whether they’re WordPress responsive images or not.

src: Now a Fallback

This should look familiar, since it’s how non-responsive images work: they have a single src (“source”) attribute, a URL that says where the image can be found.

For a responsive image, src is a fallback, a way to make images work for browsers (hi IE!) that don’t support responsive images. So what’s in src is what will be served in IE (and any other obsolete browser a user might visit the site with, although all common browsers other than IE support responsive images).

srcset: a Set of Different-Sized Image Sources

This is new, and the main engine of responsive images. srcset identifies a list of src attributes (a “set of sources”) that the browser will fetch, depending on its width. Let’s look at the first of the srcset options:

https://i0.wp.com/wpshout.com/media/2014/12/wordpress_srcset_example_one.png?resize=1024%2C687&ssl=1 1024w

This is actually made up of two parts, separated by a space:

  1. https://i0.wp.com/wpshout.com/media/2014/12/wordpress_srcset_example_one.png?resize=1024%2C687&ssl=1: This is the image link itself, the thing you could paste into your browser (try it!) to see an image. If this image link looks funny to you, it’s because WPShout is using a CDN (content delivery network) to serve its images. Your own site’s links my look more like simply https://mysite.com/media/ etc.
  2. 1024w. This is what dictates the target width at which this image will apply: in other words, 1024w means “this image source applies to widths that are 1024 pixels wide or narrower.”

But what does “applies to widths” mean? Does 1024px refer to the overall width of the browser? It’s a bit more complex than that, and that’s where sizes comes in.

sizes: Rules Dictating When to Show Which Image from srcset

sizes works together with srcset as a crucial component of responsive images. sizes is a set of browser width statements to check one after the other, with each statement paired with a rule to follow if that browser width statement is true. (Don’t worry, the next couple of paragraphs will make this clear.)

Our responsive image’s sizes attribute reads as follows:

sizes="(max-width: 1000px) 100vw, 1000px"

Read in English, that would follow these two rules:

  1. “If the browser is 1,000 pixels wide or narrower, use the smallest image from srcset that is at least 100% of the width of the browser.”
  2. “Otherwise, use the smallest image that is at least 1,000 pixels wide.”

So sizes goes in order from the first width statement to the last, stopping on the first true one. In WPShout’s case, there are only two rules in sizes: One that holds if the browser is 1000px wide or narrower (in which case the smallest image from srcset that’s 100vw wide or wider will be used), and one that holds at all other times (in which case the smallest image from srcset that’s 1000px or wider will be used ).

Specifying the Rules in sizes with wp_calculate_image_sizes

As a note, WPShout’s two-rule sizes setup, centered around 1000px as a breakpoint, is the default for WordPress responsive images, since we at WPShout never bothered to specify more intelligent rules. Some other themes, particularly “official” themes like Twenty Sixteen, use a WordPress filter hook called wp_calculate_image_sizes to set more intelligent and theme-specific sizes values. For Twenty Sixteen, the sizes attribute reads as follows:

sizes="(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px"

If you want to understand srcset and sizes more deeply, they’re well explained here and other places. And Smashing Magazine has done a good job explaining how to use wp_calculate_image_sizes to set your own width statements, breakpoints, and rules in sizes for WordPress responsive images.

How WordPress Responsive Images Interact with Custom Image Sizes

WordPress’s responsive images system interacts quite simply and healthily with custom image sizes.

For a long time, I was pretty nervous that creating my own custom image sizes could somehow “break,” slow down, or otherwise impact WordPress’s responsive image sizes (which I didn’t understand well). I’m happy to report that how these two systems interact is quite simple and healthy:

  1. Every custom image size that you create with the same aspect ratio (width-height ratio) as the original image will simply be added to srcset.
  2. Every hard-cropped custom image size you create with a different aspect ratio from the original image will be ignored by WordPress’s responsive image system.

To show you how this works, I took two screenshots in sequence on a theme that is a child theme of Twenty Sixteen and so inherits its sizes rules. This was the first screenshot, before creating any custom image sizes in the child theme:

wordpress responsive images example

Click to enlarge

I then created two custom image sizes in the functions.php of the child theme using the following code:

add_image_size( 'big-size-soft-crop', 1600, 1200, false );
add_image_size( 'giant-size-hard-crop', 2000, 1500, true );

Next, I reuploaded the image and took the following screenshot:

wordpress responsive image size example

Click to enlarge

As you can see, srcset has one new size: the 1600px-by-900px version of the underlying image. Because the 2000px-by-1500px hard crop doesn’t have the same aspect ratio (4:3 instead of 16:9), it doesn’t get added to srcset.

Now, will the 1600px-by-900px version of the image ever get shown to any user on any device? To know the answer to that question, we need to examine the image’s sizes attribute to see whether 1600px wide is ever the smallest size that satisfies any rule. As it turns out, it isn’t: the final rule, covering any device wider than 1362px, looks for the smallest element in srcset that’s wider than 840px, and that’s always going to be the 1024w element (1024px wide) rather than the 1600w element. So in this case, the specific custom image size we registered isn’t a useful addition to srcset, since there’s always another better match for the theme’s sizes rules, but it’s not doing any harm, either.

Enjoy!

As I said, the image sizing API is one truly great thing about WordPress. I hope this has gotten you a long way toward understanding the what, how, and why of creating WordPress custom image sizes and featured image sizes.

So, what tricks do you know for sizing images in WordPress? Let us know in the comments below!

P.S.: do you want to learn more about WordPress development? Check out Up and Running, where we’re offering a free course on the five key principles of WordPress development. Start learning today!


37 Responses

Comments

  • Great stuff. Thorough but brief and to the point.

    You might be interested in these:

    https://github.com/WPezClasses/class-wp-ezclasses-theme-add-image-size-1

    https://github.com/WPezClasses/class-wp-ezclasses-templates-picturefill-js

    The first one “condenses” WP’s various image stuff into a single set of settings. There’s a link to an example in the README.

    The second – related to the first – makes implementing the polyfill RWD picturefill.js as simple as setting up a settings file (which can be part of the first example).

    The arc idea being to centralize and simplify WP image “stuff” into a single one stop (class) stop. Let me know what you think.

  • Anastis Sourgoutsidis says:

    Hi there,
    nice tutorial. Keep up the good work.

    However I disagree about leaving set_post_thumbnail_size() alone.
    First of all, its an image size that’s already there and will be created no matter if you are using it or not, so it’s a waste of perfectly good storage page on the server.
    Secondly, plugins may be using it, since its the only image size they know that’s commonly available.
    I usually set it to a dimension that is usable in widgets (e.g. not very tall) so I know most “unknown” widgets will play along.

    Hope this helps someone :)

  • ?? says:

    Hi, do you know any plugin or custom code that allows you to select when you want to add the thumbnails and when not?

    If you upload a featured image auto-generated thumbnails are nice. But you don’t need 2 or 3 different sizes for the images that you use only inside your posts.

    What is the best option to solve this?

    • fredclaymeyer says:

      I think I understand your question, and my impulse would be still to let WordPress generate the multiple sizes. For example, what if you someday want to use a smaller version of the image? You shouldn’t have to choose between using an efficiently-sized version of the image, and still having access to the full-sized version.

      Does that make sense?

      • ?? says:

        Thank you for taking the time to reply my question.

        The motivation behind my scenario is mainly the limited storage space on the server and thus the need to avoid any thumbnail that isn’t going to be used at some point. Images that I want to put into my posts fall into this bucket. If I want to use an image let’s say 680px wide I don’t really need a downsized version of it. But for the featured images it’s nice to have two or more different sizes (e.g. you preferably want to use large images on your homepage where you feature your most recent posts, while for the archive.php a smaller thumbnail is sufficient.)

        So if I enable automatic thumbnail creation every image will have it’s scaled down version, regardless if they are needed or not.

        If I will ever want to use a smaller thumbnail size in the future, I think there are a lot of plug-ins that regenerate different sizes, so I am not worried about that.

        My need is more like thumbnail generation on condition. The ideal solution would enable me to select on upload if I (1) want to upload only or (2) upload and generate thumbnails.

        Of course I could just manually delete any thumbnail I don’t need but I don’t want to spend my time with this, if there is a way to make it more efficient.

        I don’t necessarily need a voilà! solution that I can just copy+paste into my code, but some ideas how this could be managed.

        • fredclaymeyer says:

          It sounds like you may just want to remove all thumbnail sizes except your large and small featured image sizes. This article may help: http://www.wpmayor.com/remove-image-sizes-in-wordpress/

          This means that all images (if they’re larger than your featured image dimensions) will still generate the two “featured image size” versions, but they won’t generate the “large,” “medium,” and “thumbnail” sizes.

          What do you think?

  • Rehman Ali says:

    Nice post get some good idea.I have also added some good tips for users check below.
    WordPress Image Resize and Crop

  • Juwel Khan says:

    i want to add an image size, when the image is a portrait image and the size is larger than a certain size. can you please give some idea how can i do it ?

  • keith says:

    I think this is a typo :”So if you specify 300 for width, your image will be 500 pixels wide”

  • Wendy R says:

    hmmm, how about when uploading pictures of almost same size, but some get successfully uploaded while others don’t. and, what to do when I want a bigger image, but stretching it makes it look so pixelated? HELP ..

  • Mike C says:

    Wow this is super duper confusing. I was using Avada and I switched to Beaver Builder.. Do you know how I can delete all those old image sizes from Avada before re-generating for Beaver?

  • vagu91 says:

    Pretty informative post.Though how would you go about displaying a custom size image outside of the wordpress loop?

  • Miguel says:

    So in conclusion, how big we should go in terms of uploading our original files?

    • Fred Meyer Fred Meyer says:

      My advice is always to upload the largest image size you can. You can then resize your images to any size you want for actual use on the site.

      You can resize a large image down to any number of smaller sizes, but you can’t get a large image back from a small image if you fail to upload, and then lose, the original.

      • Miguel says:

        Thanks for your prompt reply!

        Yes, I normally downsize most of my pictures (even from sizes bigger than 800×600). but Imagine I can choose any size, what size would you recommend? 1024×800?

        • Fred Meyer Fred Meyer says:

          It depends on your theme! Different themes will have differently-sized content areas, logo areas, and so on.

          So there’s no hard-and-fast rule for your site’s image sizes, except (in my opinion) to make sure that you’re always working off the highest-quality original image you can be.

  • John says:

    Hi Fred- thanks for this article! Hope you can help answer a question about responsive post image sizing for bandwidth-efficiency? I’m about to transition my site (www.planetz.com) from an old non-responsive theme to the responsive Themify Ultra.
    Previously I used Windows Live Writer to write posts. I would often embed small images (e.g. 244×184) in a post which would open into a full-sized lightbox when clicked. WLW would upload the small version as a separate _thumb file in the exact 244×184 size, and also the full-size image file. With the newer versions of WordPress, WP also creates its thumb/medium/large sizes of both those files during the upload. So, I assume that WLW’s entire thumb mechanism is now unnecessary (and wasteful) with the WP responsive features you described here.
    I’m hoping I won’t need WLW anymore and I can just use the WordPress Visual Editor for creating posts. To embed a small image in a post which opens full-size on click, I guess I can just add the image from the media gallery to the post (setting Link To: Media File)? Is it best to select one of the Thumbnail/Medium choices in the Size menu there, or is it ok to just drag the corners of the picture in the Visual Editor to any size that looks good? (I see it generates different img src html for those two cases, but you say src is just a fallback now, so maybe that’s ok?). Will it automagically use the srcset and max-width to serve the page with the appropriate smaller file-size, and only serve the full-size image when clicked into the lightbox?
    Thanks again!

    • Fred Meyer Fred Meyer says:

      Hi John, Good questions!

      Yes, Link -> Media File is what you’re looking for. Yes, the WLW system you’re describing should be obsolete, as long as you’ve uploaded large versions of the images you’re working with to your media library (and aren’t stuck using WLW’s small ones).

      And yes, my best advice would be to set a size, like “Medium” or “Large,” and then forget about it. Resizing with mouse drags should be okay too, but make sure you’re not, for example, blowing a “Medium” image up to fill a 1,000px space.

      In terms of srcset, it’s best to choose intelligent image sizes (again, like “Medium” or “Large”) and let srcset work its magic without thinking too hard about it.

      Hope that helps!

      • John says:

        Thanks Fred! Just relaunched my website with my new progressive theme, and it’s looking good. I’m using tools.pingdom.com to test resource usage to confirm which image files are being served. The thumbnails are working well. I’m looking forward to bailing on WLW for good :) Now trying to decide if it’s worth the trouble to go back and update all my old posts to eliminate the WLW separate _thumb files, and use the WordPress Medium files instead. Would be a big change- maybe I could write some code to do it directly in the database.
        Another question/comment for you- you suggested always uploading the full-res files. I have a slider gallery on my home page with a few pictures 1800×1000, around 2MB apiece. I can see from the pingdom scan that it’s always serving the full res file, so my home page was over 9MB in size! I guess those aren’t benefitting from the new progressing srcset tags. So, I just compressed these with tinypng and re-uploaded them…
        Thanks again!
        -John

  • Rajeev Thomas says:

    Thank you for a great article! You helped me so much in figuring out the hard crop vs soft crop concept. Your explanations of that function, “add_image_size” and its arguments helped me solve the problems I was facing! :)

  • Will says:

    I’ve installed this code into the functions.php, but not seeing the new sizes:

    /**
    * Custom upload sizes
    **/

    add_theme_support( ‘post-thumbnails’ );
    add_image_size( ‘medium-something’, 800, 800 );
    add_filter( ‘image_size_names_choose’, ‘wpshout_custom_sizes’ );
    function wpshout_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
    ‘medium-something’ => __( ‘Medium Something’ ),
    ) );
    }

  • Sasha says:

    Hi Fred,

    Is there a way to also reduce the file size using this code?
    For example, my images are currently 5MB and above, how can I automatically compress each image to 150kb?

    • Fred Meyer Fred Meyer says:

      Hi Sasha,

      For image compression I’d recommend looking into this plugin: https://wordpress.org/plugins/tiny-compress-images/

      However, you should understand that filesize is a function of image size. If you upload a 2000×2000 image, it’s going to be a few MB no matter what – trying to compress it to 150KB would only be possible by lossy JPEG compression so extreme that it’d be unrecognizable.

      But the same image resized to 500×500 for use on your site is automatically many times smaller filesize-wise: filesize is a function of the amount of information stored in an image, and that varies with the total number of pixels it covers.

      So the filesizes of images being used on your site should not be the same as the filesizes of images you’re uploading, because the images in use on your site should be resized.

      Does that make sense?

  • Hanna C Shelley says:

    Hi. For work I am in charge of updating a website that was recently designed with wordpress. I understand image sizing and proportions, but what I do not understand is why when I add images they do not appear to be the same size as what is already on the site. For example, we are using the carousel on wordpress to show many different pictures of landscapes. I have added in a few images to the carousel and they do not match in size with the images that are already in the carousel. Why is this? And how do I know what size to make them so that they match?

    Thanks!

  • Stratos says:

    Hi Fred, nice article!

    So, here’s an advanced one: Have you ever faced an issue in which you upload an image, wp creates automatically all image versions but you need to update manually one specific dimension; let’s say that you create a facebook post image size (via the add_image_size function of course), and you want to update manually only this variation because most probably the auto-crop procedure won’t create the best result.

    Any ideas?

    Thank you in advance. Kind regards,
    Stratos

    • Stratos says:

      Ok, looks like I found the way to do it. And it’s nice and working :)

      Perhaps I’ll create it as a plugin and upload it to wordpress.org. I’ll update the channel when it will be done, in case somebody else is interested.

  • Dave Levine says:

    Love the detail here!
    Following the policy of uploading the largest-dimension file you need, and letting WordPress do the work of resizing all the images, I’ve come across an issue where smaller-dimension .pngs are actually of a larger filesize than that original upload!
    The issue seems to be that wp is resizing these 8bit pngs to 24bit.
    Any chance you have a way to stop this from happening?

Pingbacks