What is a good alternative to using $content_width for image optimization?

The $content_width GLOBAL in WordPress effects many themes and even some plugins by limiting the size of images and embeds in posts, it is a requirement for themes submitted to wordpress.org.

It is set by using:

$content_width = 584; // Twenty Twelve example

If you insert a large image (default 1024×1024) into a post it results in:

src="../wp-content/uploads/2013/02/IMG_1390-1024x682.jpg" width="584" height="328"

If instead you remove this global setting and insert the actual image size, set with add_image_size it results in:

src="../wp-content/uploads/2013/02/IMG_13901-584x328.jpg" width="584" height="328"

Removing the global and inserting large images, which is very common, often results in a saving of over 2x, in pages with multiple images I see hundreds of KB saved on page load.

Is using add_image_size and removing the ability to insert full size images not a better option?

ps. I wrote about it here with more accurate data

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Keep in mind that the $content_width global is not only used for images, but also for embedded objects, such as video. So, any solution won’t merely be a case of dropping use/support of $content_width itself.

Usually a Theme will constrain content-area images in a few ways:

1. Large Image size: Defining $content_width something appropriate for the Theme design
2. Original/Full Image size: Defining a CSS rule for #content img { max-width: XXX; height: auto; } to ensure that full-size images that get inserted don’t break the layout
3. Thumbnail Image size: Calling set_post_thumbnail_size() to define the Featured Image/Post Thumbnail default thumbnail size. (Note: I do not personally recommend using this method. Define custom image sizes specific to a given location for a featured image, and then call that custom size in the specific template location, via the_post_thumbnail( $size ).)

As you have discovered, because of the way WordPress selects with intermediate image size to use for any given image request, that request could result in a browser-scaled image.

Theme-Defined Values for Large Image

One option would be to redefine the settings for large image dimensions. (Proceed with caution. This is fine for your own site, but a publicly distributed Theme that messes with user configuration settings is… gray area at best.)

The large image dimension settings are stored as:

$large_image_width = get_option( 'large_size_w' );
$large_image_height = get_option( 'large_size_h' );

So, you could set those values according to your $content_width value:

global $content_width;
update_option( 'large_size_w', $content_width );
update_option( 'large_size_h', $content_width );

(Of course, you’d want to put some failsafe/error-checking around this, as appropriate.)

Remove Option to Insert Full-Sized Images

If you simply want to prevent users from inserting full-size images (again: proceed with caution; this may be Plugin territory), you can filter 'image_size_names_choose':

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    unset( $possible_sizes['full'] );
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );

Again: you may want to add some sane failsafes here, as this filter is used in more than one place.

Define a custom image size for full-post-width images

Related to the previous option, you can define a 'full-post-width' image size:

global $content_width;
add_image_size( 'full-post-width', $content_width, $content_width, false );

Then, add it to the list of available options:

function wpse86950_filter_image_size_names_choose( $possible_sizes ) {
    // Unset full image size
    unset( $possible_sizes['full'] );
    // Add full-post-width image size
    $possible_sizes['full-post-width'] = 'Full Post Width';
    // Return array
    return $possible_sizes;
}
add_filter( 'image_size_names_choose', 'wpse86950_filter_image_size_names_choose' );

Method 2

Yes I think so. To get around the $content_width issue for themes submitted to the repo I use option filters to force the sizes that I’ve chosen for the design.

add_filter( 'option_large_size_w', function( $opt ) { return 1024; } );
add_filter( 'option_large_size_h', function( $opt ) { return 0; } );
add_filter( 'option_embed_size_w', function( $opt ) { return 1024; } );
add_filter( 'option_embed_size_h', function( $opt ) { return 0; } );
// ...etc...

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0