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?
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
<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?
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... :)
<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ą?