Image Article Size in Mobile

[Kevin]

I noticed that the theme loads the images in standard size 800×450 even on small screens.

Do you have a script to put in functions.php that makes the theme load thumbnail sizes (375×175) on mobile devices with a screen smaller than the one I specify?

I saw something similar done here on the forum for Page Hero, but I want a code that does this for all images in the article, just like wordpress does with thumbnails in the archive that instead of image.jpg loads image-375×175.jpg

[David]

Hi there,

can you link me to a page or post where i can see the issue ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kevin]

Not quite a problem, I want mobile devices to open images with the extension -375×175.jpg set to thumbnail.

Article: https://skdesu.com/e-verdade-que-no-japao-nao-tem-exercitos/

Normal size: https://i2.wp.com/skdesu.com/wp-content/uploads/2020/04/faj1.jpg?w=1200&ssl=1

As I want on mobile devices https://i2.wp.com/skdesu.com/wp-content/uploads/2020/04/faj1-375×175.jpg?w=1200&ssl=1

[David]

WordPress is responsible for displaying the Image HTML. By default it will use src-set which provides all the various image sizes.

However it looks like you’re using a lazy loader which is changing that behaviour.
Can you try disabling the lazy loader ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kevin]

I do not believe it is the problem, even deactivating it does not change the size … AMP does not have a Lazy Load and also has open giant images.

[David]

The Theme is not responsible for how an Image is output within your Content. It is a WordPress function. But your site is not displaying the default WordPress HTML and this is due to your lazyloader or AMP plugins.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kevin]

I use Generatepress on 3 sites, some don’t have a cache plugin, others display the src-set, but even those with the src-set tag don’t share the image link 375×175.jpg

I thought it was a jetpack thing or cache plugin really, but even disabling them all. Clearing cache, including CDN cache, testing on the 3 sites, the image uploaded by my cell phone is full size.

Perhaps because the image I want to appear is the tumbnail. I’m not sure if that’s the reason. If so, WordPress is not able to do this by default.

I looked for you because I want to make a theme-level addition, because I want the single.php images to load a mobile version. Doing so could break and disappear in future updates, I also have no idea, so I expected you to have some function script, I searched on Google but none worked.

And of course, I’m here too because I found an article that solved this problem, but with the background image of the Page Hero headers.

https://generatepress.com/forums/topic/change-hero-header-background-image-size/page/2/

[David]

I have taken a look to see what my phone is loading. And each of the images are being served differently. Some more correct then others. For example this is the 2nd image down ( the one with the Japanese flag illustration ):

You can see this markup includes src-set variants – a 750w and a 375w image.

This is how i would expect Jetpack or any lazy loader to behave.
But some images are just serving a large image.
Is there a way to tell Jetpack to regenerate those thumbnails maybe?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kevin]

I understand, it is likely that this problem I will be able to solve, but what I don’t understand is because, even the image with the srcset, of a mobile device when copying the image link, it takes the 750w link.

Maybe it’s my crazy, I can’t say if even copying the link to the full image, the one loaded was actually 375w.

[David]

If the device has Retina or HD Display support it will generally grab the x2 image – so on my iPhone it was loading the 750px.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kevin]

Mine is iphone, so it is explained … Even on the desktop if I leave the browser window small, it will load the entire image right? Now it’s easier to solve, thanks. Now it’s time to find out why some images display srcext and others don’t. Thank you very much for your patience and time. xD

[David]

If the resolution requires it then yes it will load the larger image.
I tested your site using GTMetrix and there was no complaint about images being rescaled – so it sounds like the correct image sizes are being requested.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Kevin]

This problem never really affected me, because 800px wide is a small size, even for today’s smartphones. I thought only if I could reduce the size of the pages with AMP, but what really makes them slow is ADS.

I’m still curious to understand why most images don’t appear in the srcset. I usually clean the DB manually, do these srcext stay in the DB? And did I just black out? lol

[David]

Haha 🙂
I think the issue is related to the JetPack lazy loader as it is generating the images and the HTML to display them. But i don’t use Jetpack so i am unsure of what you need to do to get them to rebuild those images. Have you checked with their support ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts