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

Odpowiedz Nowy wątek
2020-02-17 22:19

Rejestracja: 5 lat temu

Ostatnio: 2 godziny temu

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?

Pozostało 580 znaków

2020-02-18 08:02

Rejestracja: 1 rok temu

Ostatnio: 5 godzin temu

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

Pozostało 580 znaków

2020-02-18 12:48

Rejestracja: 5 lat temu

Ostatnio: 2 godziny temu

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?

Pozostało 580 znaków

2020-02-18 15:17

Rejestracja: 1 rok temu

Ostatnio: 5 godzin temu

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

Pozostało 580 znaków

2020-03-23 15:38

Rejestracja: 5 lat temu

Ostatnio: 2 godziny temu

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

Pozostało 580 znaków

Odpowiedz

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