[Support request] Mobile Friendly Test & Broken Images

[Ash]

Having 95,000 product images I thought I would have a tidy up to free up space. Removed alot of the image sizes wordpress generate when uploading an image

2048 2x large
1536 1x large
1024 large
768 medium_large

So I’m left with

1500 original
700 product page main image
300 category page
100 thumbnail

But this has resulted in broken images on googles mobile friendly test. It’s trying to load 768px images (media query I know :/) so do I need all them sizes back?

A category page on desktop uses 300px which are even scaled down a little yet large mobile is wanting to load 768px.

Using browser inspect with mobile view, for like a iphone 6/7/8 all images show, change it to 6+/7+/8+,X,11 iphone and some don’t show, yet inspect shows the missing ones as 300px which do exist.

Mobile friendly test and pagespeed show no product images.

Hopefully you can shed some light,
Thanks

[David]

Hi there,

how did you remove those images ?

[Ash]

Via FTP so no work around? I do need them sizes?

[Tom]

That particular size is used by WordPress when it builds your srcset images.

You can try a regenerate thumbnails plugin to get them back: https://wordpress.org/plugins/regenerate-thumbnails/

[Ash]

Regenerated that image size, If you inspect for mobile some still don’t show.

For example inspecting for iphone X and then viewing page info

Images that show
Dimensions: 300px × 300px (scaled to 151px × 151px)
Type: JPEG Image

Image that don’t show
Dimensions: 300px × 300px (scaled to 151px × 72px)
Type: text/html

So showing a different type and scaling (some are 151×72, 151×48, 151×96)

[Tom]

text/html shouldn’t be an image type. Where can I see the broken images?

[Author]

Posts