• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

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

Object Storage Arubacloud
0 głosów
191 wizyt
pytanie zadane 21 stycznia 2023 w HTML i CSS przez Grzegorz Mikina Dyskutant (8,060 p.)
zmienione kategorie 21 stycznia 2023 przez Comandeer
<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.

1
komentarz 21 stycznia 2023 przez Comandeer Guru (602,560 p.)
Na przyszłość proszę wstawiać kod w odpowiednim bloczku.

1 odpowiedź

0 głosów
odpowiedź 21 stycznia 2023 przez Comandeer Guru (602,560 p.)

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>

 

komentarz 21 stycznia 2023 przez Comandeer Guru (602,560 p.)

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

komentarz 21 stycznia 2023 przez Grzegorz Mikina Dyskutant (8,060 p.)

@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:

komentarz 21 stycznia 2023 przez Grzegorz Mikina Dyskutant (8,060 p.)

@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?
 

1
komentarz 21 stycznia 2023 przez Comandeer Guru (602,560 p.)
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.
komentarz 22 stycznia 2023 przez Grzegorz Mikina Dyskutant (8,060 p.)
Dziwne to ponieważ zapisuje go normalnie w Photoshopie.

Podobne pytania

0 głosów
1 odpowiedź 372 wizyt
+1 głos
2 odpowiedzi 369 wizyt
pytanie zadane 28 kwietnia 2016 w HTML i CSS przez niezalogowany
0 głosów
1 odpowiedź 1,390 wizyt
pytanie zadane 30 października 2015 w HTML i CSS przez Krzysiek_34 Mądrala (6,140 p.)

92,666 zapytań

141,564 odpowiedzi

320,022 komentarzy

62,033 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...