Atrybut img src srcset, dlaczego to nie działa poprawnie

Question

<div class="image-me">

              {{-- <img src="{{ asset('assets/img') }}/{{$about->img}}" alt="{{ $about->h1 }}" title="{{ $about->title }}"> --}}

              <img src="assets/img/4about/Mistrz.webp"

                    srcset="assets/img/4about/Mistrz.webp, assets/img/4about/Mistrz.avif, assets/img/4about/Mistrz.png",

                    alt="Coś tam jakiś tekst"

                    class=""

                    title="Coś tam"

                    width="1000px"

                    height="1000px">



            </div>

Docelowo chcę żeby pobierało mi nowoczesny format graficzny jpeg2000 webp lub avif, ale nie pobiera go wcale.

Comments

Na przyszłość proszę wstawiać kod w odpowiednim bloczku.

Answer 1

Nie działa, bo img[srcset] nie do tego służy. On pozwala dobrać grafiki w zależności od wielkości viewportu czy gęstości pikseli.

To, co Ty chcesz, to picture:

<picture>
    <source srcset="img/photo.avif" type="image/avif">
    <source srcset="img/photo.webp" type="image/webp">
    <img src="img/photo.jpg" alt="Description" width="360" height="240">
</picture>

 

Comments

Chyba nie rozumiem problemu w takim razie… Ze swojej strony jestem w stanie jedynie potwierdzić, że ten kod picture działa i serwuje WebP.

---

@Comandeer, wyświetlają Ci się zdjęcia? U mnie jest totalna lipa, działa to wyłącznie na jednej przeglądarce na komputerze.

Chrome:

Firefox:

Samsung Galaxy A53:

---

@Comandeer,  mam pytanie, działa mi to wyłącznie na mozilli, nie wyświetla się poprawnie na Samsung A53, Samsung S10, na wszystkich przeglądarkach oprócz Mozilla Firefox Developer Edition. O co chodzi?
 

---

Coś jest nie tak z plikiem w formacie WebP, wygląda na niepoprawnie zakodowany. Polecam wrzucić JPG do https://squoosh.app/ – to powinno wypluć poprawny WebP.

W sumie nie wiem, czemu Firefox wyświetla ten obrazek. Safari i systemowy podgląd na macOS-ie go wgl nie otwierają, Chrome uważa, że to po prostu przezroczysty obrazek.

---

Dziwne to ponieważ zapisuje go normalnie w Photoshopie.