Choose image size

  • Resolved Karolina Vyskocilova

    (@vyskoczilova)


    2 years, 10 months ago

    Hi,

    how I can select which image size is used in the slider? It looks like a full image is used instead of some normal size (I would prefer to use a ‘large’ size) for cover layout.

    Thanks a lot!
    Karolina

Viewing 2 replies - 1 through 2 (of 2 total)
  • Plugin Contributor Gutenberg Slider

    (@gutenbergslider)

    @vyskoczilova Gutenslider inserts all images with the modern srcset attribute that will make sure, your browser picks the correct image size depending on the device you are on.

    That said, for advanced needs you can still change css rules for your images, read all about responsive images + WordPress here: https://novo-media.ch/en/web-optimization/responsive-images-wordpress/

    If you need more help or have other questions, please write to [email protected]

    Thread Starter Karolina Vyskocilova

    (@vyskoczilova)

    Hi, thanks for your answer. To make srcset work effectively – you need to define the sizes attribute. WP sets this based on the selected image size pretty naive way: 100vw until you reach the size of the image.

    So in the case you take “full” image size, the sizes (and width and height) get to the dimensions of the full-size image and that’s pointless until you use a smaller device.

    In my case, I have image 1920x1000px (because it could be used as a hero). My text container is 1080px, but the image gets inserted this way:

    <img loading="lazy" width="1920" height="1000" class="swiper-lazy wp-image-1077 swiper-lazy-loaded" src="https://terezav.dameweb.cz/wp-content/uploads/2021/12/hp_1920_1000_1.jpg" alt="" style="object-fit: cover; object-position: 34% 44%;" data-title="HP_1920_1000_1" srcset="https://terezav.dameweb.cz/wp-content/uploads/2021/12/hp_1920_1000_1.jpg 1920w, https://terezav.dameweb.cz/wp-content/uploads/2021/12/hp_1920_1000_1-720x375.jpg 720w, https://terezav.dameweb.cz/wp-content/uploads/2021/12/hp_1920_1000_1-1080x563.jpg 1080w, https://terezav.dameweb.cz/wp-content/uploads/2021/12/hp_1920_1000_1-360x188.jpg 360w, https://terezav.dameweb.cz/wp-content/uploads/2021/12/hp_1920_1000_1-768x400.jpg 768w, https://terezav.dameweb.cz/wp-content/uploads/2021/12/hp_1920_1000_1-1600x833.jpg 1600w, https://terezav.dameweb.cz/wp-content/uploads/2021/12/hp_1920_1000_1-280x146.jpg 280w, https://terezav.dameweb.cz/wp-content/uploads/2021/12/hp_1920_1000_1-1320x688.jpg 1320w, https://terezav.dameweb.cz/wp-content/uploads/2021/12/hp_1920_1000_1-128x67.jpg 128w" sizes="(max-width: 1920px) 100vw, 1920px">

    This means, that on-screen larger than 1080px I load almost two times the larger image I need.

    I believe this is a pretty common issue and srcset won’t help until you have control over the dimension.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Choose image size’ is closed to new replies.