working with srcset(images) taking too much time. I need some advice!

  • hello,

    I have created few size images and add to srcset like this:

    <div class="about-page-section1-right-side">
    <img src="https://webdesignmaster.info/wp-content/uploads/2023/07/auto-reparatie-360-250.webp" srcset="https://webdesignmaster.info/wp-content/uploads/2023/07/auto-reparatie-360-250.webp,   661w,
                   https://webdesignmaster.info/wp-content/uploads/2023/07/auto-reparatie-940-550.webp  941w,
                https://webdesignmaster.info/wp-content/uploads/2023/07/auto-reparatie-700-350.webp  1560w,
                 https://webdesignmaster.info/wp-content/uploads/2023/07/auto-reparatie-700-350.webp    3000w,
                 https://webdesignmaster.info/wp-content/uploads/2023/07/auto-reparatie-1200-750.webp" sizes="(max-width: 360px) 360px,
                (max-width: 661px) 661px,
                (max-width: 941px) 941px,
                 (max-width: 1560) 700px,
                 (min-width:1561) 700px;
                1200px" alt="auto onderhoud"></div>
</div>

    and it did help in google insights to perform beter regarding images with srcset (I know wordpress makes 3 different sizes).

    I see also there is picture element like srcset which works the same way as srcset but it is beter.

    but the problem is it is taking too much time to write srcset code when you have a lot of images .

    I see there is adpative images.net which is very expensive

    there is also imgix which has its free version.

    I have changed my hosting provider which has litespeed cach and CDN in its packet.

    the customer service of my provider wil configure litespeed cache QUIC cdn on thursday for me . I let them do only for the QUIC cdn to see how they make connection with this cdn . otherwise I configured litespeed cache myself.

    I tried to find some way to solve it with javascript but it is also takes too much time with images.

    I see in Gmetrix I have lower score than GoogleInsights .

    I have now disabled litespeed because of problem with QUIC cdn . I see also Jetpack has some improvement.

    I need your advice what I have to do to solve this problem .

    because tomorrow when I start building a webshop there wil be moer than 100 images. and you can’t make everytime 5 sizes then paste every image with its 5 sizes in srcset . it is not practical.

    I see some wordpress srcset plug ins .

    what do you advice me to do . just go with srcset code or use srcset plug in I don’t know if srcset plug in wil solve the problem . I didn’t try yet?

    is there some way in WordPress with javascript to craete more than 3 sizes images automatically in place of 3 and as default and to spread it autmatically to every resolution?

    please just give me some Idea what is the best solution ?

    I need only some advices or some good idea’s

    thanks

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter johannes999

    (@johannes999)

    after writhing this thread I searched in google and I found this solution:

    function custom_image_sizes() {
    add_image_size('custom-size-1', 300, 200, true);   // Custom Size 1 (300x200 pixels)
    add_image_size('custom-size-2', 600, 400, true);   // Custom Size 2 (600x400 pixels)
    add_image_size('custom-size-3', 800, 600, true);   // Custom Size 3 (800x600 pixels)
}

add_action('after_setup_theme', 'custom_image_sizes');

    I have to paste this in function.php so I can change the default 3 sizes to 5 sizes and then use regenerate plug in to convert existing images in media to this 5 sizes.

    in this way I don’t need to use srcset .

    I see there is also simpel image sizes plug in to achieve this purpose . but I prefer code.

    any advice is welkcome!

    Moderator bcworkz

    (@bcworkz)

    All images in responsive web design should have srcset and sizes attributes. Many themes will do this automatically based on available registered sizes. Typically they use wp_image_add_srcset_and_sizes(). If your theme doesn’t already do this, you may wish to modify it so it does.

    Thread Starter johannes999

    (@johannes999)

    thanks ,

    I know when I go on image in inspect elements I see the srcset code .

    but it was not enough for Gmetrix or google insights .

    so I tried srcset with more options and it gave more results .

    but I saw it is a lot of work and it doesn’t worth when you have for example 50 images.

    I found that I have to use for headers:

    1- 1920-1080(16.9)

    2-800-1200(2.3)

    3-1000-1000(1.1)

    4-1200-800(3.2)

    and for text images

    16.9 –

    1.1

    2.3

    and plus :

    function custom_image_sizes() {
    add_image_size('custom-size-1', 300, 200, true);   // Custom Size 1 (300x200 pixels)
    add_image_size('custom-size-2', 600, 400, true);   // Custom Size 2 (600x400 pixels)
    add_image_size('custom-size-3', 800, 600, true);   // Custom Size 3 (800x600 pixels)
}

add_action('after_setup_theme', 'custom_image_sizes');

    ad create more srcset code in function.php regards media queries and let the wordpress do the rest .

    what do you think am I right or wrong?

    thanks

    Thread Starter johannes999

    (@johannes999)

    after thinking a while I decided to use only 2 aspect-ratio’s for all the images in wordpress.

    1-16.9

    2-3(portrait)

    and add let few moer srcset sizes in wordpress with this code in function.php:

    function custom_image_sizes() {
    add_image_size('for-example-size-1', 300, 200, true);   // Custom Size 1 (300x200 pixels)
    add_image_size('for-example-size-2', 600, 400, true);   // Custom Size 2 (600x400 pixels)
    add_image_size('for-example-size-3', 800, 600, true);   // Custom Size 3 (800x600 pixels)
}

add_action('after_setup_theme', 'custom_image_sizes');

    I see that the wordpress has already core function for srcset :

    wp_calculate_image_srcset().

    thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘working with srcset(images) taking too much time. I need some advice!’ is closed to new replies.