[Support request] Image Article Size in Mobile

Home Forums Support Image Article Size in Mobile

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #1253221
    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

    #1253263
    David
    Staff
    Customer Support

    Hi there,

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

    #1253304
    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

    #1253317
    David
    Staff
    Customer Support

    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 ?

    #1253339
    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.

    #1253693
    David
    Staff
    Customer Support

    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.

    #1253799
    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/

    #1253885
    David
    Staff
    Customer Support

    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?

    #1253922
    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.

    #1253944
    David
    Staff
    Customer Support

    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.

    #1253973
    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

    #1254729
    David
    Staff
    Customer Support

    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.

    #1254771
    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

    #1254899
    David
    Staff
    Customer Support

    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 ?

Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.