- This topic has 13 replies, 2 voices, and was last updated 4 years ago by David.
-
AuthorPosts
-
April 24, 2020 at 5:49 am #1253221Kevin
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
April 24, 2020 at 6:08 am #1253263DavidStaffCustomer SupportHi there,
can you link me to a page or post where i can see the issue ?
April 24, 2020 at 6:31 am #1253304KevinNot 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
April 24, 2020 at 6:39 am #1253317DavidStaffCustomer SupportWordPress 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 ?April 24, 2020 at 6:48 am #1253339KevinI 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.
April 24, 2020 at 8:55 am #1253693DavidStaffCustomer SupportThe 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.
April 24, 2020 at 9:47 am #1253799KevinI 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/
April 24, 2020 at 10:16 am #1253885DavidStaffCustomer SupportI 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?April 24, 2020 at 10:31 am #1253922KevinI 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.
April 24, 2020 at 10:43 am #1253944DavidStaffCustomer SupportIf the device has Retina or HD Display support it will generally grab the x2 image – so on my iPhone it was loading the 750px.
April 24, 2020 at 11:14 am #1253973KevinMine 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
April 25, 2020 at 3:21 am #1254729DavidStaffCustomer SupportIf 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.April 25, 2020 at 4:08 am #1254771KevinThis 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
April 25, 2020 at 6:27 am #1254899DavidStaffCustomer SupportHaha 🙂
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 ? -
AuthorPosts
- You must be logged in to reply to this topic.