[Resolved] Selecting images for mobile

[Ammar]

Hi guys,

I am designing a new page with GP and GB and want to prioritise mobile as expect 80% people will visit this way.

In WordPress, I am creating multiple image sizes for the SRCSET rule.

So, when I upload an image, it now has a number of different sizes which WordPress will select the best fit for a user’s device. This is set in my functions.php. (Note, do I need to specific the width at which each image – I think so according to this article: https://generatepress.com/forums/topic/dynamic-image-size-on-mobile/)

In GP, when I use the Image Element, under Setting –> on desktop it shows ‘Size’ but when using a mobile view this option disappears.

The question is, when uploading images to pages using the Image element, is there anything further I need to do in order to ensure the correct image size is loaded based on the user device? Do I need to add any further information on SRCSET?

Do I need to select the ‘Size’ under Image Settings? If I do this for desktop, how do I select the size for mobile.

Following this article, when creating my website, should I create the website for ‘Mobile first’ and therefore as a default, upload the smallest image and then hopefully SRCSET will then load the larger images for desktop.

Rather thank building for desktop, with larger images and hoping SRCSET/WP picks up the smaller images for mobile?

This of course is to make the page load faster 🙂

Thanks

[David]

Hi there,

when you add an Image to the page it outputs the <img> HTML.
And WordPress automatically adds the src-set attribute that includes ALL the various src-set size image URLs.

When you select a specific image size in the editor eg. Large, the HTML will be output with the relevant width and height attributes to match that selection and limit the src-set to include images of that size and smaller.

When that page is loaded in the browser, it is the Browser that decides which of the src-set sizes it will display. Which is why you cannot select different image sizes for desktop and mobile.

The browser determines which image to load based on several factors including the width of the viewed image and the devices pixel ratio.

For example, we’ll use the Moto 4g ( thats what google emulates in its tests ) and how it loads an image that is set to fill 100% of the width of the viewport:

Moto 4g portrait: 360px wide x 3.0 DPR = 1080px is the ideal image size

If there is 1080px image it will load it or the nearest larger image.
If there is no 1080px image or larger then it will load the next smallest one.

Now some devices are only 2.0 DPR but many are 3.0 or 4.0. So the size the browser wants to load for the best quality is rarely going to be a size smaller than 768px ( which is the medium_large attachment size that WP creates ).

My approach would be to upload a maximum images size that suits your needs.
If you 100% focused on mobile performance and don’t care about reduced quality on larger screens, and your not going to worry about improving the quality in the future, then set a limit on the size of image you originally upload eg. 768px, as WP will NOT create images larger then the original size

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

[Ammar]

Hi David, thanks for the reply and explanation.

I had no idea about DPR – I was purely focused on image sizes, and therefore was thinking to create image sizes based mobile screen sizes.

What prompted this was that I did a test on WebPageTest.org. It showed the large image sizes being loaded (1242x726px) for an image with a display resolution of 893x438px. I couldn’t figure out why – perhaps it’s all to do with DPR or Standard WP images sizes for the SRCSET aren’t enough?

With the above in mind, I suppose as long as I create large, medium and small image sizes for each aspect ratio I use on the site, in theory WP should select the most suitable size?

Then really, I will just need to focus on an optimisation plugin?

What’s odd is that I have the Ewww Image Optimiser plugin which is meant to automatically resize images. The speed test would indicate perhaps it’s not working.

I appreciate this is deviating from GP theme specifically but appreciate your input!

[David]

I don’t have any experience with Ewwww, so thats not something i can advise on.
But if it works correctly then it “should” generate the optimum image size the browser requests.

Yeah, its way more complicated then you kinda think it should be. When it comes to creating the HTML layout, the DPR is always 1. So when you add 300px wide image to a page, it will occupy 1/4 of that 1200px container. But the browser won’t load 300px unless you actually code it so it either only that size image is added to the src-set or we tell the src-set to load that image… which is pain in ***

Unless i really need super sharp images on a site, i kinda steer towards to uploading 1024px wide maybe 1200px wide images and i force most images to have no padding on mobile to fill the viewport. And then leave WP to create the smaller sizes, and the browser to happily choose between my medium_large image and full size image in 99% of all instances 🙂

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

[Ammar]

Thanks, David.

Would I be right in thinking for each aspect ration (3:4, 3:2 etc) we need to create new image sizes or simply set it so we specify max widths of images and height is left blank?

Furthermore, two questions but you may advise me to ask on the Generate Blocks. Let me know if I should create new support topics:

– Containers – is there a way to make the container a link? I have a container block with a background image and want to make the whole container clickable.

– In the Container Block – under Backgrounds – it has an option ‘Use inline style’ which the documentation says it adds the background image into HTML mark up. I’m still learning but could you let me know the implications of this / when we would want the background image as HTML? Is this a page speed optimisation or something else?

Thank you

[David]

Would I be right in thinking for each aspect ration (3:4, 3:2 etc) we need to create new image sizes or simply set it so we specify max widths of images and height is left blank?

Just to be clear – are you expecting to say have one image that has a landscape variant ( say for desktop ) and a portrait variant ( for mobile ) ?

1. Container Links are a GenerateBlocks Pro feature:

https://docs.generateblocks.com/article/container-links/

2. When you add a background image to a Container then the images is added using CSS eg.

.gb-container {
    background-image: url('the_full_image_url');
}

That is the standard way of adding them. However it means that image optimizers and lazy loaders that support background images cannot see the image to be optimized.

By selecting Use Inline Style the CSS gets moved inline to the HTML, and those plugins can see it.

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

[Ammar]

Thank you for all your help, support and answers.

Regarding the images, no, just some images for different parts of the page will have different aspect ratios some a wider 16:9 and some will be more standard 3:4. Both to maintain aspect ratio on desktop and mobile. I just don’t understand if this is all covered with the 3 sizes WP offers as standard.

I will need to try and find further reading on this, as I’m not sure if I’m overthinking this. The guides online repeat the same things and don’t seem to talk about different aspect ratios and whether it’s all picked up or if additional small/med/large need to be set.

Will mark as solved as the GP / GB elements are resolved.

Thanks

[David]

Just to cover off the aspect ratio:

When you upload an image, all of the src-set sizes that WP creates will have the same aspect ratio as the original…
… except for one, which is the 150px cropped square thumbnail. But you can ignore this as it has a specific use case and will only displayed if you choose it as the image attachment size.

Whether the original image is portrait or landscape its the width that defines the sizes. eg. the medium image size will have a width of 300px regardless of its orientation.

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

[Justin]

Hey David,

Regarding your comment…

By selecting Use Inline Style the CSS gets moved inline to the HTML, and those plugins can see it.

Does this also imply that, after enabling Use Inline Style, that those images should lazy-load if my WordPress is v5.5 or newer? I believe Lazy Loading has been native in WP since 5.5.

I set Use Inline Style to true for containers that are using DYNAMIC BACKGROUND IMAGE to display a featured image in my prev/next buttons element, however those inline-css divs with class="gb-container" do not have the attribute loading="lazy" like the inline-css figures with the class="wp-block-image do. Perhaps that’s the reason (i.e. WordPress’ native lazy loading only targets the wp-block-image blocks.

I’ve put 3 days into finding a lightweight solution that can lazy-load background CSS images, but I’m not having any luck. Thanks in advance for any insight you can offer.

[David]

Hi there,

the lazy loading in WordPress is the native browser method and that won’t work with Background images of any kind.
More info on that here: https://web.dev/lazy-loading-images/#images-css

That article does include the code and how to do it yourself, which may be an option if you’re only dealing with a few images.

Otherwise you need a plugin or 3rd party service to handle that for you.
I believe most of the optim plugins like WP Rocket, FlyingPress etc. will work with the inline method.

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

[Author]

Posts