Zdjęcia na różne rozdzielczości ekranu

0

Czego używanie w swoich codziennych pracach do zmiany wielkości zdjęć? Coś polecacie?
Korzystam z atrybutów srcset i sizes w img oraz elementu picture. Czy można powiedzieć, że któryś jest lepszy?

0

O ile dobrze pamiętam to picture daje ci możliwość załadowania różnych typów grafik jednocześnie np webp i jpg... Tym sposobem jeśli ktoś przeglądarka nie obsługuje webp to załaduje jpg

0
<picture>
        <source media="(max-width: 400px)" srcset="green-parrot-200px.jpg">
        <source media="(max-width: 600px)" srcset="green-parrot-350px.jpg">
        <img src="green-parrot-500px.jpg" style="width:auto" alt="green parrot picture">
</picture>

Nie jest tak, że powyższy kod sprawi, że na ekranach do 400px wyświetlony zostanie obrazek wielkości 200px, na ekranach pomiędzy 401px a 600px wyświetlony będzie obrazek wielkości 350px, a na pozostałych ekranach obrazek będzie miał 500px?

0
Toficjusz napisał(a):
<picture>
        <source media="(max-width: 400px)" srcset="green-parrot-200px.jpg">
        <source media="(max-width: 600px)" srcset="green-parrot-350px.jpg">
        <img src="green-parrot-500px.jpg" style="width:auto" alt="green parrot picture">
</picture>

Nie jest tak, że powyższy kod sprawi, że na ekranach do 400px wyświetlony zostanie obrazek wielkości 200px, na ekranach pomiędzy 401px a 600px wyświetlony będzie obrazek wielkości 350px, a na pozostałych ekranach obrazek będzie miał 500px?

Przecież możesz sobie sprawić... odpal devtoolsy i zobacz :) poza tym możesz jeszcze użyć "type="image/webp" lub jakiś inny typ... więc przeglądarka będzie ładowała najpierw webp (co google lubi) a potem dopiero jpg jesli przeglądarka nie obsługuje webp... :)

0
<img scrset="img/banner-mobile-p.jpg 360w, img/banner-mobile-l.jpg 640w, img/banner-tablet.jpg 800w, img/banner-pc.jpg 1920w"
sizes="(max-width: 360px) 360px, (max-width: 640px) 640px, (max-width: 800px) 800px, 1920px"
src="img/banner-pc.jpg" alt="test">

Wczytuje tylko grafikę z podstawowego src. Co może być przyczyną?

1 użytkowników online, w tym zalogowanych: 0, gości: 1