update content width/height references to resized images

[galbaras]

Describe the bug
I set a maximum width for images and resized some of them by re-optimising them individually.

The images are now displayed with the "original" in the new dimensions (or less), but the placeholder image is still according to the old dimensions.

See https://www.behappyinlife.com/: https://www.behappyinlife.com/wp-content/uploads/2016/05/jumping-for-joy.jpg is only 960px wide, but the placeholder is 1280px wide.

Moreover, after unregistering some image sizes, and removing the respective files and attachment metadata, EWWW still lists nonexistent sizes as being optimised. This doesn't affect IMG tags, just the compression history provided in the media library.

[nosilver4u]

The placeholder glitch seems like that would just be a caching issue, probably object/database caching preventing WordPress from using the updated dimensions. EWWW IO is just using the width/height attributes inserted by WP core, and those should be derived from the attachment metadata (which you can view in the media library list mode with EWWW IO's debugging option enabled).

I'm guessing the second issue is from using IRSC, right? I'll see if there are any other deletion hooks I missed, but can you give step by step what you did with IRSC (since it has several different methods for regenerating/removing thumbs (individual thumb, per-attachment, and bulk)?

[galbaras]

I have no object caching, so if you're not relying on transients, that's not it.

The meta data is correct when displayed by the plugin on the Media admin page, so if that's the basis for placeholder matching and optimisation, things should work just fine.

IRSC has a feature that removes meta data for unregistered image sizes, which works great and I used it in my testing, just to be sure.

Meta data

Array
(
    [width] => 960
    [height] => 638
    [file] => 2016/05/jumping-for-joy.jpg
    [sizes] => Array
        (
            [thumbnail] => Array
                (
                    [file] => jumping-for-joy-150x150.jpg
                    [width] => 150
                    [height] => 150
                    [mime-type] => image/jpeg
                )
            [medium] => Array
                (
                    [file] => jumping-for-joy-554x368.jpg
                    [width] => 554
                    [height] => 368
                    [mime-type] => image/jpeg
                )
            [large] => Array
                (
                    [file] => jumping-for-joy-750x498.jpg
                    [width] => 750
                    [height] => 498
                    [mime-type] => image/jpeg
                )
            [woocommerce_thumbnail] => Array
                (
                    [file] => jumping-for-joy-300x199.jpg
                    [width] => 300
                    [height] => 199
                    [mime-type] => image/jpeg
                )
            [woocommerce_single] => Array
                (
                    [file] => jumping-for-joy-360x239.jpg
                    [width] => 360
                    [height] => 239
                    [mime-type] => image/jpeg
                )
            [woocommerce_gallery_thumbnail] => Array
                (
                    [file] => jumping-for-joy-100x100.jpg
                    [width] => 100
                    [height] => 100
                    [mime-type] => image/jpeg
                )
        )
    [image_meta] => Array
        (
            [aperture] => 0
            [credit] => 
            [camera] => 
            [caption] => 
            [created_timestamp] => 0
            [copyright] => 
            [focal_length] => 0
            [iso] => 0
            [shutter_speed] => 0
            [title] => 
            [orientation] => 0
            [keywords] => Array
                (
                )
        )
)

Optimisation list

Full | 52.7 KB | Reduced by 74.7% (155.8 KB)
Medium | 19.0 KB | Reduced by 81.2% (82.1 KB)
Large | 60.0 KB | Reduced by 16.7% (12.0 KB)
Featured | 30.9 KB | Reduced by 28.8% (12.5 KB)
Wysija-newsletters-max | 22.7 KB | Reduced by 17.0% (4.7 KB)
Medium | 15.7 KB | Reduced by 16.0% (3.0 KB)
Woocommerce_single | 9.1 KB | Reduced by 17.2% (1.9 KB)
Woocommerce_thumbnail | 6.9 KB | Reduced by 16.5% (1.4 KB)
Thumbnail | 3.8 KB | Reduced by 12.6% (569 B)
Shop_thumbnail | 1.4 KB | Reduced by 4.3% (66 B)

[nosilver4u]

The placeholder URLs are generated based on either the height/width attributes, or the dimensions from the filename (which wouldn't apply here), so if the metadata is accurate, I've no idea where WordPress is getting stale dimensions from. Assuming you already cleared all page caches of course...

As for IRSC, I double-checked the filter that they added, and we're handling that properly. If I go to Image Details, and remove any thumbs with the little trash icon, the corresponding db records are removed. Of course, one has to refresh the page to see the difference.

[galbaras]

The dimensions are being taken from the IMG tag's width and height. That bit did not change when the images were resized.

I'm not sure what makes most sense here, but it sure would help if content references to resized images were updated. Although this probably doesn't happen too often, doing a bulk resize can lead to a lot of work updating embeds without something like this.

[rant] Come to think of this, we need a think tank for image handling in WordPress, 'cause it stinks. Using post meta and using classes for media references are kludgy and cause many update anomalies. [/rant]

[nosilver4u]

Wow, I'm a bit slow there... Of course, any references in existing content wouldn't just auto-magically update! You're right, that updating such things can be time-consuming. But trying to update them automatically could be very tricky. We may be able to at least scan the wp_posts table, just like we do for converted images (GIF to PNG and the like).

[galbaras]

I'm glad you're open to this. Thank you.

[nosilver4u]

Moving this one also to https://feedback.ewww.io/b/features/p/update-content-width-height-references-to-resized-images