• 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
182 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,380 p.)
Na przyszłość proszę wstawiać kod w odpowiednim bloczku.

1 odpowiedź

0 głosów
odpowiedź 21 stycznia 2023 przez Comandeer Guru (602,380 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,380 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,380 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ź 367 wizyt
+1 głos
2 odpowiedzi 360 wizyt
pytanie zadane 28 kwietnia 2016 w HTML i CSS przez niezalogowany
0 głosów
1 odpowiedź 1,380 wizyt
pytanie zadane 30 października 2015 w HTML i CSS przez Krzysiek_34 Mądrala (6,140 p.)

92,655 zapytań

141,545 odpowiedzi

319,983 komentarzy

62,024 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...