[Support request] Gallery images resize

Home Forums Support [Support request] Gallery images resize

Home Forums Support Gallery images resize

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #2038882
    Torsten Bulk

    Hello,

    My created website with Generate Press is technically optimal except for one small thing.

    Google Insights has made me aware that the images in the gallery are not optimally adjusted.

    Now I have already searched in the forum for the solution, but do not get on with the results.

    What is the procedure and implementation in my particular case?

    I need multiple formats for different resolutions.

    Best regards

    Torsten

    I love WordPress and the Community

    #2038967
    David
    Staff
    Customer Support

    Hi there,

    you can force different image sizes to be selected for different screen sizes – this topic explains how:

    https://generatepress.com/forums/topic/mobile-lcp-post-featured-images-2/#post-1917910

    #2038975
    Torsten Bulk

    Hello David,

    thank you for the extremely quick response.

    This example is only for one image size. How is this to be changed to 3 or 4 sizes?

    So large, medium, small …

    Best regards

    Torsten

    I love WordPress and the Community

    #2039154
    David
    Staff
    Customer Support

    WordPress automatically generates a number of src-set sizes they are:

    medium: 300px
    medium-large: 768px
    large: 1024px

    And your original image size.
    You don’t want to be adding more Image sizes to your list, as the Browser is rarely ever going to load them and they just take up space in your database.

    Looking at your example URL you uploaded an 800px wide image so you have 300px, 768px, 800px for the browser to choose from.
    For best peformance you will want the browser to load the 300px on small mobile devices, and the 800px image on larger devices.

    Changing the code i linked to your optimium output would be:

    function db_modify_srcset_sizes($sizes, $size) {
            $sizes = '(max-width: 360px) 300px, (min-width: 361px) 800px, 100vw';
    	return $sizes;
    }
    add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);
    #2039187
    Torsten Bulk

    Thank you David.

    I have tried it and nothing changes.

    It always takes the original size of 800 × 534. No matter if desktop or mobile.

    I love WordPress and the Community

    #2039744
    David
    Staff
    Customer Support

    The code is working as we can see in the HTML this markup:

    sizes="(max-width: 360px) 300px, (min-width: 361px) 800px, 100vw"

    I get the feeling the lazy loader may be interfering but before disabling that to test, try this snippet:

    function db_modify_srcset_sizes($sizes, $size) {
        $sizes = '(max-width: 400px) 300px, (max-width: 768px) 400px, (min-width: 769px) 800px, 100vw';
    return $sizes;
    }
    add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);

    It adds the extra 400px option and gives the browser a little more flexibility in its screen size

    #2041176
    Torsten Bulk

    Hello David,

    Unfortunately, I can’t find the solution and I’m getting desperate.

    I have created or modified the following code:

    function db_modify_srcset_sizes($sizes, $size) {
            $sizes = '(max-width: 499px) 300px, (max-width: 768px) 646px, (min-width: 769px) 533px, 100vw';
    	return $sizes;
    }
    add_filter('wp_calculate_image_sizes', 'db_modify_srcset_sizes', 10 , 2);

    and

    add_image_size('small', 300, 200, false); //Bildformat 300x200
    add_image_size('medium', 646, 431, false); //Bildformat 646x431
    add_image_size('large', 533, 356, false); //Bildformat 533x356
    add_filter( 'image_size_names_choose', 'my_custom_sizes' );
    function my_custom_sizes( $sizes ) {
    return array_merge( $sizes, array(
    'small' => __('Small 300x200'),
    'medium' => __('Medium 646x431'),
    'large' => __('Large 533x356'),
    ) );
    }

    According to Google Insights this works only in the desktop version. Not in the mobile.

    But even without the second code it does not work.

    What can be the reason?

    Best regards

    Torsten

    I love WordPress and the Community

    #2041423
    David
    Staff
    Customer Support

    Not much i can do about that.
    Google is actually selecting the correct sized image. The simulated mobile test it runs is a Moto 4g which suprisingly has x3/x4 resolution. So its going to grab the largest image it can.

    Problem is Google reckons that those original images could be far better optimized. You may want re-optimize the original images, for the size they are being displayed you should be able to get the original below 50kb

    #2041792
    Torsten Bulk

    Hello David,

    thanks for the tip with Google Insights.

    I have tested directly on two iPhones.

    It does not take the version 300×200 but 646×431 on both.

    Where is the error?

    Best regards

    Torsten

    I love WordPress and the Community

    #2042251
    David
    Staff
    Customer Support

    iPhone is a retina device with x2 pixel density.
    So the browser looks at the requested sizes, we tell it we want 300px, it says ok but i am x2 pixel density do you have a 600px image or LARGER image i can use. Thats what we are dealing with 🙂

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