Responsywność, a img srcset

Witajcie! Mam małą zagwostkę dotyczącą atrybutów srcset i sizes dla img.

Otóż, dobrze się to sprawdza, jeżeli obrazek ma ustawiony width na 100% lub jego rodzic ma stałą szerokość.

Nie mogę natomiast poradzić sobie z sytuacją, w której obrazek jest osadzony w rodzicu, który ma zmienną szerokość jak np. w Bootstrap, gdzie używane są kolumny ze zmienną szerokością w zależności od rozdzielczości ekranu.

Czy przy pomocy srcset i sizes (ew. picture) da się z tym jakoś poradzić, czy lepiej napisać kawałek JS-a, który sprawdzi maksymalną szerokość rodzica/obrazka i z tablicy wybierze odpowiedni plik graficzny?

catshy napisał(a):

Nie mogę natomiast poradzić sobie z sytuacją, w której obrazek jest osadzony w rodzicu, który ma zmienną szerokość jak np. w Bootstrap, gdzie używane są kolumny ze zmienną szerokością w zależności od rozdzielczości ekranu.

(...) sprawdzi maksymalną szerokość rodzica/obrazka i z tablicy wybierze odpowiedni plik graficzny?

A nie dałoby się tego załatwić container queries?
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_containment/Container_queries

A to wszystko zależy co chcesz osiągnąć.
Przypuszczam, że możesz użyć przy img odpowiednią wartość object-fit ale to czy uzyskasz to co masz na myśli zależy od wielu rzeczy a nie napisałeć co chcesz osiągnąć.
Najważniejsze kwestie.

• Jak zmienia się kontener w sosunku do rozdzielczości?
• Czy chcesz aby zawsze obrazek był widoczny w całości czy też pozwalasz na przycinanie przy krawędziach;

Czy przy pomocy srcset i sizes (ew. picture) da się z tym jakoś poradzić, czy lepiej napisać kawałek JS-a, który sprawdzi maksymalną szerokość rodzica/obrazka i z tablicy wybierze odpowiedni plik graficzny?

Dzisiaj CSS daje tak dużo opcji, że o ile nie wymyślasz jakiś cudów to na 100% da się to ogarnąć samym CSS.

Ok, więc dla przykładu taki kod:

.kolumna-* {
  display:inline-block
}

.kolumna-25 {
  width:25%
}

.kolumna-50 {
  width:50%
}

img {
  max-width:100%
}

@media (max-width: 768px) {
  .kolumna-25 {
    width:50%
  }

  .kolumna-50 {
    width:100%
  }
}

<div class="kolumna-25"><img ... /></div>
<div class="kolumna-25"><img ... /></div>
<div class="kolumna-50"><img ... /></div>

No i teraz w jaki sposób skonfigurować srcset i sizes dla IMG w taki sposób, aby dobrał odpowiednią wielkość (po szerokości) obrazu w zależności od szerokości kontenera, przy założeniu, że mamy obrazki wielkości 1920px, 1600px, 1366px, 1024px, 768px, 640px, 400px

catshy napisał(a):

Najlepiej zrobić dodatkowy kontener na zdjęcie np. img-wrapper.
Wtedy masz więcej swobody w obrabianiu obrazu nie psując psując układu ani struktury pozostałych elementów.

.kolumna-* {
 display:inline-block;
}

.kolumna-25 {
 width:25%
}

.kolumna-50 {
 width:50%
}

.img-wrapper{
 width:100%;
 height:200px;
 overflow:hidden;
 display:block;
}

img {
 width:100%;
 height:100%;
 object-fit:cover;
}

@media (max-width: 768px) {
 .kolumna-25 {
   width:50%
 }

 .kolumna-50 {
   width:100%
 }
}

<div class="kolumna-25"><div class='img-wrapper'><img ... /></div></div>
<div class="kolumna-25"><div class='img-wrapper'><img ... /></div></div>
<div class="kolumna-50"><div class='img-wrapper'><img ... /></div></div>

Przeczytaj sobie jeszcze to: Jak poprawnie wstawić obrazek na stronę WWW?

@4w0rX4t4X w porządku to był tylko przykładowy kod i problem w najmniejszym stopniu nie dotyczy tego o czym piszesz... co to umieszczania obrazka - oczywiście znam parametr src :)))

Tak dla jasności, gdyby ktoś nie kojarzył konstrukcji srcset to np.:

  srcset="bg.webp 2560w,
          bg-1920-1280.webp 1920w,
          bg-1600-1067.webp 1600w,
          bg-1366-911.webp 1366w, 
          bg-1200-800.webp 1200w, 
          bg-1024-683.webp 1024w,
          bg-768-512.webp 768w, 
          bg-640-427.webp 640w, 
          bg-400-267.webp 400w"

Ale co do tego wszystkiego ma srcset?
Obrazek dobierasz taki aby był odpowiedni do kontenera w danej rozdzielczości...
Jak masz dobrą konstrukcję z kontenerem to czy obrazek jest z srcset czy nie nie ma żadnego znaczenia (jedynie optymalizacyjne).

Czy przy pomocy srcset i sizes (ew. picture) da się z tym jakoś poradzić, czy lepiej napisać kawałek JS-a, który sprawdzi maksymalną szerokość rodzica/obrazka i z tablicy wybierze odpowiedni plik graficzny?

Przy dobrze zaprojektowanym HTML nie widzę sytuacji, w której powyższe rozważania mają jakiekolwiek zastosowanie.
Srcset i sizes są związane ze źródłem danego obrazka a nie z jego wyglądem / układem na stronie. Jeśli jest inaczej to znaczy, że masz coś źle zrobione Być może też swój problem opisujesz tak nieporadnie, że nit Cię nie rozumie.

Jedno jest pewne na 100% da się to zrobić bez JS.

Ma tyle, że jeżeli korzystamy np. z Bootstrap-a to kolumny mogą mieć różne szerokości w zależności od rozdzielczości wyświetlacza, np. na dużych ekranach dana kolumna może mieć szerokość 25% i ta sama kolumna na mniejszych wyświetlaczach może mieć już 100% - więc wpływa to też na rozmiar obrazka przy założeniu, że ma on np. width:100%. Zatem dobrze optymalizacyjnie mieć kilka rozmiarów obrazków, żeby nie pobierać zbyt dużego obrazu w sytuacji, w której później on i tak jest przeskalowany na mniejszy.

No i mój problem dotyczy tego w jaki sposób ustawić scrset i sizes żeby było to jak najbardziej optymalne.

Oczywiście opcja bez JS byłaby najlepsza ze względu na preloading i wynik LCP.

catshy napisał(a):

Ma tyle, że jeżeli korzystamy np. z Bootstrap-a to kolumny mogą mieć różne szerokości w zależności od rozdzielczości wyświetlacza, np. na dużych ekranach dana kolumna może mieć szerokość 25% i ta sama kolumna na mniejszych wyświetlaczach może mieć już 100% - więc wpływa to też na rozmiar obrazka przy założeniu, że ma on np. width:100%. Zatem dobrze optymalizacyjnie mieć kilka rozmiarów obrazków, żeby nie pobierać zbyt dużego obrazu w sytuacji, w której później on i tak jest przeskalowany na mniejszy.

Zgadza się.

No i mój problem dotyczy tego w jaki sposób ustawić scrset i sizes żeby było to jak najbardziej optymalne.

Tak aby było optymalnie. Nie wywróżę Ci z fusów jak zmieniają Ci się szerokości kolumny w zależności od rozdzielczości.
Daj mi schemat jak zmienia się szerokość kolumny to Ci podpowiem jak ustawić odpowiednie srcset. Nie zapomnij podać także pozostałych warunków, o które pytałem na początku tematu.

Oczywiście opcja bez JS byłaby najlepsza ze względu na preloading i wynik LCP.

Nie trzeba używać JS.

ze względu na preloading i wynik LCP.

Ze względu na LCP lepiej robić lazy-load o ile to nie top strony. Rozbijanie na tyle różnych rozdzielczości (u ciebie aż 8) to też przegięcie.
3 - 4 obrazki w zupełności wystarczą aby pokryć wszystkie rozdzielczości: 1920px, 1024px, 800px, 480px bez ubytku na punktach w testach wydajności.

Nie napisałeś jednak jakie są Twoje założenia co do ich wyświetlania więc to ciągle wróżenie i zgadywania "co autor ma na myśli".

Ja użyłem trochę więcej breakpointsów niż 3-4 dla obrazów (width): 1920, 1600, 1366, 1024, 768, 640 (z 1200 i 400 w trakcie omawiania tego wątku zrezygnowałem) - ale pewine masz rację w tym, żeby jeszcze z kilku rozmiarów obrazów zrezygnować.

Kawałek kodu CSS z szerokościami kolumn wygląda tak:

@media (max-width: 575.98px){
  .wc_col  {
    width:100%
  }
}

@media (min-width: 576px) and (max-width: 767.98px){
  .wc_col.col-1-12,
  .wc_col.col-2-12,
  .wc_col.col-3-12,
  .wc_col.col-4-12{
    width:50%
  }
}

@media (min-width: 768px) and (max-width: 991.98px){
}

@media (min-width: 992px) and (max-width: 1199.98px){
}

@media (min-width: 1200px){
}

Wszystkich media nie mam jeszcze uzupełnionych jeżeli chodzi o szerokości col-sów - jeszcze jestem na etapie określania tego i nie wiem czy same breakpointsy w media są dla Ciebie wystarczające czy potrzebne są jakieś jeszcze dodatkowe informacje żeby uzupełnić odpowiednio srcset-y i sizes-y?

Colsy generalnie zajmują procentowo od 1/12 do 12/12 (czyli jak w Bootstrapie), a maksymalny width colsa to 1400 px

Problem pojawia się dla mnie w momencie gdy mam taki kod:

<div class="row">
  <div class="wc_col col-3">IMG</div>  <!-- width: 25% -->
  <div class="wc_col col-9">IMG</div>  <!-- width: 75% -->
</div>

Czyli różne colsy, a srcset i sizes pobierają szerokość ekranu, a nie rodzica. Za pomocą JS potrafię to rozwiązać, za pomocą html/css nie :(

Wrzuć to co chcesz zrobić do jakiegoś https://jsfiddle.net/ albo gdzieś gdzie będzie można zobaczyć całość.