Thanks, I know how to edit and upload .htaccess.

What I don’t know is how to amend Guenni007’s solution to fix the Lighthouse errors I listed, can you advise on that?

I use Smush to compress and Simple Image Sizes to set custom image sizes.

That code has not made a difference, Remote Debug still says it is loading the 700px image.

But if you say it’s loading the correct image, then I’m OK with that and I’m not sure I need the extra code. I just wanted to make sure there wasn’t anything wrong with Enfold. Unless you’ve got other insight into what would cause Remote Debug to show the wrong size on my PC, I’ll just put this down to more dodgy code from Google…

One final question: on the ‘remove 495 image code’ if there were other sizes I wanted to get rid of, is this the code for multiple sizes?

    if ( isset( $sources[495, 295] ) ) {
        unset( $sources[495, 295] );

I added add_filter( ‘wp_calculate_image_srcset’, ‘__return_false’ ); and it did remove srcset completely.

I’d rather use the specific filter. However after removing the above and putting the specific filter in, srcset comes back into the page but the filter does not remove the 495px image from srcset. Purged caches and did a hard browser reload as well.

Please review the latter part of post #1470028.

I removed the 495px image from the equation to simplify matters.

The question now is why is Remote Debug for Android devices indicating that Android is loading the Full size (700x394px) image and not the Square (180x101px) specified? Yet on PC desktop the correct 180px image is being loaded. Or is Remote Debug wrong?

Hi,

So here’s the thing. I used to use the theme’s File Compression And Merging feature but no longer do, it is now disabled.

Am I right in thinking therefore that I can delete this file as it is no longer needed?

You say it is added to my child theme CSS. How do I need to re-load/re-build that file to make sure the avia-style code is not included anymore to stop the ‘interference’ with FlexSlider?

Still doesn’t show the image after clearing phone cache. Have re-loaded the page multiple times.
I turned on Remote Debug for Android devices and inspected the page via Dev Tools – https://imgur.com/gallery/debug-dQTFKAs.
As you can see the phone is still trying to load the 495×279.jpg file, which no longer exists.

A similar problem existed on the next day’s page. Android was trying to load the 495px images of the top two photos. So, I re-uploaded both of those photos and edited the page to load these new images.
The original image is FULL. As 495px is no longer allowed, just 4 thumbnails were created as below.
FULL (700×394)
MEDIUM (300×169)
SQUARE (180×101)
LEAFLET (150×84)
THUMBNAIL (80×45)
Screen capture of Uploads – https://imgur.com/gallery/files-GSxY4FP

So forget about the 495 px image above, here’s the crux of the issue – I’d like to understand if this is correct behaviour or if there’s a problem with the image size being loaded by Android. My phone is a OnePlus 5, 5.5-inch display with a resolution of 1920×1080 pixels, the same pixel resolution as my desktop screen. As stated before, my desktop screen only ever shows the 180px image.

The new img code for the re-uploaded images lists all 5 image sizes above.
<img decoding="async" aria-describedby="caption-attachment-14027" class="wp-image-14027 size-square" src="https://www.americanroadtrips.net/wp-content/uploads/2024/10/Hotel-Nevada-2-180x101.jpg" alt="Hotel Nevada #2" width="180" height="101" srcset="https://www.americanroadtrips.net/wp-content/uploads/2024/10/Hotel-Nevada-2-180x101.jpg 180w, https://www.americanroadtrips.net/wp-content/uploads/2024/10/Hotel-Nevada-2-300x169.jpg 300w, https://www.americanroadtrips.net/wp-content/uploads/2024/10/Hotel-Nevada-2-80x45.jpg 80w, https://www.americanroadtrips.net/wp-content/uploads/2024/10/Hotel-Nevada-2-150x84.jpg 150w, https://www.americanroadtrips.net/wp-content/uploads/2024/10/Hotel-Nevada-2.jpg 700w" sizes="(max-width: 180px) 100vw, 180px">

#1 – The page specifies to display the Square thumbnail at 180px wide: if I am stating I want a 180 px image to display, why does srcset list the Medium and Full image sizes as options when these are larger than what the page code specifies? (i.e. how does srcset work? I wouldn’t have expected it to include larger image sizes than specified)

#2 – Remote Debug for Android says (I think) that the image actually being loaded on Android (the Intrinsic Size) is the Full size image, 700x394px at 35kB, and not any of the smaller thumbnails. Why is Android loading the Full size image (and not Square) – or am I incorrectly interpreting Remote Debug?

Details in private.

I also read up into this after your reply and just cannot understand Google’s rationale or stance here. Rhetorical question: how are we site owners supposed to try and tune our sites to get good mobile scores on Lighthouse when their tool doesn’t give accurate real-life results. e.g. Lighthouse says a Largest Contentful Paint on mobile of 6.2 secs vs 0.9 sec on desktop when on a real smartphone a new page displays in milli-seconds? Answers on a postcard… ;-)

So yes, close it please.

The Top Story referenced has been moved off the home page. However you can see the same effect I raise on the “Fitting Farewell Finale for Fawley Hill Vintage Steam Festival” story. The ‘full size’ image loaded on mobile is 700 x 467 px but is only 86kb as opposed to 64kb for the 260 x 173 px image. So whilst the difference in image kb sizes is not as pronounced as the Hurricanes story, the fact remains that a 700 x 467 image is being loaded instead of a 260 x 173 px one.

[The site uses 700 x 467 px images as its main size for the individual stories (posts). An image might be uploaded in a larger size than that; Simple Image Sizes and Smush then create the 700 x 467 size (and others), hence that size might be 500kb or less.]

Yes all done, thanks for your help.

Thanks, that works. The box and header_meta element are bigger than they were before the WordPress update, but it looks OK and I can’t be bothered to mess around with it any further. ;-)

I still do wonder though whether this change of element size and code after the update of WordPress should be flagged to your dev team to look at because something has caused the theme to alter its layout/design from what it was before. Case closed!

I have now and it moves the search box back to the right but there is still a difference between the sites if you look at them.

The www site has a header_meta height of 47px whilst the dev site is now smaller at 43px.

The www site’s search box has 5px padding top and bottom from the phone-info div element so there is gap within the header_meta element. It’s overall height is 36px.

The dev site’s box now fills the header_meta element despite the phone-info padding being specified (but is apparently ignored), and its height has increased to 42px.

Now I am sure that I could either just leave it as is in its new format or play around with the CSS on the dev site to get it looking as it did (although the HTML code changes might preclude this).

But the big issue here is why has the WP update from 6.4.3 to 6.5.2 changed the layout and code? It’s altered the dimensions of the search box, its location (right to left before your CSS fix) and changed the order of the HTML code for the search box. Surely there’s something here that’s “wrong” and needs looking into/fixing?

Thanks, that worked. Added it to the CSS of the plugin using the font, Performance score on the site is now 99 for Desktop… :-)

I decided to alter the default Medium size (300 x 300) using the function because I use Portfolio, which works. Medium is now 600 x 450 px.

But the issue remains that when setting a Featured Image in the Post there is no selection available to choose the Medium size – Add A New Post / Featured Image only allows the full sized image to be chosen, nothing else.

How do I set the altered Medium size as the FI?