• 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

Aruba Cloud - Virtual Private Server VPS
0 głosów
337 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 (606,550 p.)
Na przyszłość proszę wstawiać kod w odpowiednim bloczku.

1 odpowiedź

0 głosów
odpowiedź 21 stycznia 2023 przez Comandeer Guru (606,550 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 Grzegorz Mikina Dyskutant (8,060 p.)

Dobrze, jednak w dalszym ciągu pobiera mi jpg, a przeglądarka dopuszcza webp jednak pobiera jpg.

            <div class="image-me">
              {{-- <img src="{{ asset('assets/img') }}/{{$about->img}}" alt="{{ $about->h1 }}" title="{{ $about->title }}"> --}}
              {{-- <img src="assets/img/4about/Mistrz.png" 
                    srcset="assets/img/4about/Mistrz.webp, assets/img/4about/Mistrz.avif, assets/img/4about/Mistrz.png", 
                    alt="Jakiś tytuł" 
                    class=""
                    title="Jakiś tytuł"
                    width="1000px" 
                    height="1000px"> --}}
                    <picture>
                      <source srcset="assets/img/4about/Mistrz.webp" type="image/webp">
                      <source srcset="assets/img/4about/Mistrz.avif" type="image/avif">
                      <img src="assets/img/4about/Mistrz.jpg" alt="Description" width="1000px" height="1000px">
                    </picture>

            </div>

 

komentarz 21 stycznia 2023 przez Comandeer Guru (606,550 p.)

Możesz to pokazać gdzieś online? U mnie taka konstrukcja pobiera wyłącznie plik AVIF w Chrome, co można zweryfikować w zakładce "Network" dev tools.

komentarz 21 stycznia 2023 przez Grzegorz Mikina Dyskutant (8,060 p.)
Narzędzia developerskie oczywiście znam. Zaraz Ci to wrzucę na ftp.
komentarz 21 stycznia 2023 przez Grzegorz Mikina Dyskutant (8,060 p.)
https://www.karpking.pl zaraz pod banerem, jest sekcja o nas, i tam jest główne zdjęcie.
komentarz 21 stycznia 2023 przez Comandeer Guru (606,550 p.)

No u mnie się wczytał format WebP (czyli wzięty z pierwszego source). Załączam screen z devtools Chrome'a na dowód:

Zakładka "Network", w której dla frazy "Mistrz" wyszukało wyłącznie obrazek "Mistrz.webp".

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

1

 U mnie na chromie wygląda tak, a na telefonie również tak wygląda.

komentarz 21 stycznia 2023 przez Grzegorz Mikina Dyskutant (8,060 p.)
Status 200 również jest załadowany, a jak podglądam zdjęcie, podaje link do trzeciej opcji gdzie jest jpg
komentarz 21 stycznia 2023 przez Comandeer Guru (606,550 p.)
U mnie tu i tu jest używane WebP.

Możesz podać swoją wersję Chrome'a?
komentarz 21 stycznia 2023 przez Grzegorz Mikina Dyskutant (8,060 p.)
Osobiście używam Mozilla Firefox Developer Edition, ale wersja chrome nie powinna mieć znaczenia, przecież właśnie po to to robię, żeby jak nie ma możliwości wczytania webp avif wczytuje jpg i działa wszędzie.
komentarz 21 stycznia 2023 przez Comandeer Guru (606,550 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 (606,550 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ź 567 wizyt
+1 głos
2 odpowiedzi 564 wizyt
pytanie zadane 28 kwietnia 2016 w HTML i CSS przez niezalogowany
0 głosów
1 odpowiedź 1,563 wizyt
pytanie zadane 30 października 2015 w HTML i CSS przez Krzysiek_34 Mądrala (6,350 p.)

93,327 zapytań

142,323 odpowiedzi

322,396 komentarzy

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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...