Internet jest wizualnym medium. Ogromna większość tego wizualnego krajobrazu jest dzięki plikom graficznym. Podczas gdy wiele można osiągnąć za pomocą CSS i wbudowanego SVG, większość stron wciąż potrzebuje plików graficznych.
Średnio obrazy były rozliczane więcej niż połowa rozmiaru strony w zeszłym roku, a wzrost rozmiarów obrazów rok do roku; to było 21% wzrostu w wielkości obrazu tylko w 2014 roku.
Jednocześnie liczba i różnorodność urządzeń uzyskujących dostęp do sieci wciąż rośnie. Rezolucje są teraz różne gdziekolwiek pomiędzy 72ppi (coraz powszechniej) a ponad 600ppi.
Tworzenie obrazu na ekranie, który będzie miał odpowiednią jakość dla dowolnego urządzenia, jest proste: zapisz go na 1000ppi i nazwij to dziennie. Wynikowy obraz będzie wyraźny nawet na najwyższych urządzeniach hi-res. Ale podczas gdy twoja jakość będzie wysoka, twoje pliki również się zmienią. Czas ładowania strony a kluczowy czynnik w UX musimy zadbać o to, aby witryny były szybko dostarczane naszym użytkownikom. Kiedy obrazy są tak wysokiej jakości, że pobieranie ich na łącza szerokopasmowe, nie mówiąc już o połączeniach mobilnych, trwa kilkanaście sekund, są one w rezultacie bezużyteczne.
Celem obrazów responsywnych nie jest wówczas dostarczanie obrazu o wyższej jakości do ekranów, które mogą go wyświetlać (co możemy zrobić łatwo), celem jest dostarczenie obrazu o najwyższej jakości i nic więcej.
Ten przewodnik ma na celu nauczyć Cię, co działa, gdzie wciąż znajdują się problemy i pułapki oraz jak dziś możesz używać responsywnych obrazów na stronach internetowych.
Czuję potrzebę, potrzebę szybkości
Dlaczego prędkość ma znaczenie? Z pewnością nikt już nie korzysta z połączenia 3G? Nikt nie używa dial-up. Jeśli docelowa grupa demograficzna Twojego klienta mieszka na Manhattanie, dlaczego miałbyś się przejmować wiejskim Lesotho? Faktem jest, że to mit, że wszyscy jesteśmy na superszybkim łączu szerokopasmowym, sprzedanym nam przez firmy, które czerpią korzyści z coraz większej prędkości.
Większość ludzi spędza co najmniej dwie godziny każdego dnia na gorszym połączeniu. Często zdarza mi się znaleźć czas na dojazd do pracy, kiedy nawet niezawodne połączenie 3G brzmi jak odległy sen.
W kwietniu Google ogłosił ta przyjaźń dla urządzeń mobilnych byłaby używana jako czynnik rankingowy dla wyszukiwań przeprowadzanych na urządzeniach, które uważa się za "mobilne". Jeszcze wcześniej, szybkość była czynnikiem w rankingu stron - zarówno jednoznacznie jako część obliczeń Google, jak i pośrednio jako czynnik przyczyniający się do współczynnika odrzuceń.
W dwóch identycznie rankingowanych witrynach dodatkowy 1Kb może spowodować spadek z 3. miejsca w Google, na 4. lub 5. miejsce. Może nawet rzucić Cię od 10 do 11 - innymi słowy od strony 1 do strony 2 - z wszystkimi związanymi z tym wpływami na dochody klienta.
Czy naprawdę potrzebujesz tego obrazu?
Najbardziej zoptymalizowany obraz w ogóle nie ma obrazu. Jeśli masz pięć zdjęć na swojej stronie i upuścisz jeden, zaoszczędzisz sobie 20%, a co ważniejsze, zaoszczędzisz sobie żądań http. Gdybyśmy usunęli wszystkie obrazy z naszych stron, oszczędzilibyśmy siebie w 100% i wszystkie pięć żądań http. Dlaczego więc tego nie robić?
Nie upuszczamy obrazów z naszych witryn, ponieważ w krótszym czasie komunikują się skuteczniej niż tekst. Tworzą emocjonalne połączenie, które przyciąga użytkowników do treści.
Wiemy to użytkownicy nie czytają stron internetowych . Bardzo niewiele osób czyta dogłębne treści online. Obrazy pozwalają nam łączyć się z, komunikować i wzmacniać markę w ułamku czasu, którym może zarządzać tekst.
Obrazy mogą być duże i nieporęczne, aby je pobrać, ale po renderowaniu w przeglądarce są znacznie bardziej wydajne niż tekst do nawiązywania zaangażowania użytkownika i wzmacniania wiadomości marki.
Responsywne obrazy pomagają nam upewnić się, że obrazy emocjonalnych połączeń nie zostaną utracone, gdy niecierpliwy użytkownik kliknie przycisk powrotu.
A co z SVG?
SVG (Scaleable Vector Graphics) to jedna z prawdziwych pionierskich technologii w Internecie. Jest tak daleko przed krzywą, że większość projektantów wciąż nie rozpoznaje swojego prawdziwego potencjału.
SVG - jak sama nazwa wskazuje - jest oparte na wektorze. Oznacza to, że grafika SVG składa się z punktów, kątów i odległości. SVG jest także - jak sama nazwa wskazuje - skalowalna, co oznacza, że będzie wyświetlać się równie dobrze na 5-karatowym iMaku lub smartfonie z Androidem, bez utraty jakości i bez zmiany rozmiaru pliku.
Jeśli masz płaską ilustrację, ikonę, logo, prawie wszystko, co może być wyświetlane jako SVG, to SVG jest drogą do zrobienia.
Większość obrazów w sieci to bitmapy. Ogólnie rzecz biorąc sposób działania bitmapy polega na opisywaniu każdego piksela po jednym na raz, jego kolorze (w RGB - wartościach czerwonych, zielonych i niebieskich), a w niektórych przypadkach na przejrzystości. Jeśli masz obraz o wymiarach 100 na 100 pikseli, to masz obraz z 10 000 pikseli; jeśli każdy piksel ma 4 wartości do opisania, wówczas obraz zawiera 40 000 bitów danych. Brzmi jak dużo, prawda? Czasami jest to mniej niż grafika wektorowa.
Rozważ obraz 1px na 1px; wymagałoby to 4 bitów danych do zapisania jako bitmapy (wartości czerwone, zielone, niebieskie i alfa). Rozważmy teraz ten sam kwadratowy piksel zapisany jako wektor; to wymagałoby x, y, szerokości i wysokości prostokąta, oprócz wartości RGBA.
To są proste przykłady, ale są dokładne. Często wektorowa wersja obrazu - jeśli mamy nawet do dyspozycji - przekracza rozmiar pliku odpowiadającej mu bitmapy, a bitmapa to jedyny rozsądny wybór.
(Mis) przy użyciu JavaScript
Podobnie jak większość problemów w życiu (jeśli twoje życie jest w trybie online), wrażliwe obrazy można rozwiązać za pomocą JavaScript. W rzeczywistości od wielu lat JavaScript był jedynym sposobem na rozwiązanie tego problemu. JavaScript może przetestować możliwości agenta użytkownika, ustalić, jakiego rodzaju jest to przeglądarka i napisać standardowy tag HTML z obrazem.
Projektanci stron internetowych, którzy sprzeciwiają się używaniu JavaScriptu, zazwyczaj robią to, ponieważ niektórzy ludzie to wyłączają . Jednak tak już nie jest, szczególnie w sieci mobilnej, ale istnieją pewne trwałe problemy: napisanie obrazu za pomocą JavaScriptu oznacza, że obraz nie zostanie przeanalizowany przez roboty wyszukiwarek, a wyrenderuje się dopiero po skrypcie jak uruchomić, na przykład.
Największy problem z używaniem JavaScriptu polega na tym, że jest to niewłaściwe użycie podstawowego celu JavaScript. HTML przechowuje dane, CSS obsługuje prezentację, obsługuje JavaScript. Kiedy oderwij się od tych strukturalnych ról, zaczynamy napotykać problemy, które wymagają hackowania, aby je naprawić. Obrazy są danymi, dlatego powinny być obsługiwane przez HTML.
Problem z przeglądarkami
Odkąd RWD po raz pierwszy została wymyślona, obrazy były największą przeszkodą. Ale teraz zaczynamy szukać sposobów na rozwiązanie różnych problemów. Techniki, które są zahartowane w boju i wystarczająco udane, aby można je było uznać za najlepszą praktykę. Dedykowani programiści porzucili swój czas na lobbowanie w WC3 dla oficjalnych rozwiązań, a teraz po raz pierwszy wrażliwe obrazy są praktyczne.
Kluczem do reagujących obrazów jest to, że zostały zaprojektowane z pełną świadomością wad sieci. Zadbano o to, aby rozwiązania responsywnego obrazu nie naruszały istniejących przeglądarek, tak aby nawet w przeglądarkach, które nie obsługują obrazów responsywnych, kod będzie działał bezgłośnie i nie będzie reagował, wyświetlane będą domyślne obrazy.
W tym artykule przyjrzymy się dwóm oficjalnym elementom HTML z responsywnym obrazem: srcset i picture.
Obecnie Safari Edge, Safari i iOS obsługuje tylko podzbiór specyfikacji srcset . Przeglądarka Firefox, Chrome, Opera, Przeglądarka Androida oraz nadchodzące wersje Safari i iOS Safari w pełni go obsługują. (Omówimy różnice poniżej).
Obecnie element graficzny jest w pełni obsługiwany przez przeglądarki Firefox, Chrome, Opera i Android Browser. Safari Edge, Safari i iOS nie obsługują tego i nie ogłosiły harmonogramu wdrożenia.
Nawet wśród przeglądarek, które obsługują nowy kod, są niespójności, ponieważ różni producenci przeglądarek interpretują specyfikacje W3C na różne sposoby. Na przykład podczas określania zmiany obrazu z małego na duży w zależności od rozmiaru widocznego obszaru niektóre przeglądarki przestawią się na duży obraz, gdy rzutnia jest o 1 piksel większy niż preferowany rozmiar małego obrazu, inne będą przełączać się na duży obraz tylko wtedy, gdy obszar wyświetlania faworyzowany przez duży obraz jest w pełni dopasowany.
Podsumowując, przeglądarki są podzielone na dwa obozy: te, które preferują obrazy o wyższej jakości, o ile to możliwe, oraz te, które faworyzują mniejsze pliki do pobrania, jeśli to możliwe. Producenci przeglądarek wciąż tego dublują, w końcu czyjaś implementacja zostanie udowodniona najbardziej popularna - osobiście mam nadzieję, że jest to druga, ponieważ jak wspomniano powyżej wydajność ma kluczowe znaczenie dla doświadczenia użytkownika.
Na razie najlepszą opcją dla projektantów stron internetowych jest trzymanie się specyfikacji i nie próbuj odgadnąć przeglądarki. W końcu domyślne doświadczenie w przeglądarce (wyższa jakość lub szybsze pobieranie) jest częścią tego, do czego użytkownik wybiera domyślną przeglądarkę, więc jeśli użytkownik jest świadomy różnych podejść, wówczas preferencje przeglądarki są prawdopodobnie preferowane przez użytkownika. .
Responsive image best-practice (2015)
W całej historii Internetu użyliśmy jednego elementu do wskazania obrazu, elementu img . W HTML5 element img przeszedł subtelne przesunięcie w swojej roli, które ma na celu umożliwienie reagowania na obrazy: element img nie reprezentuje już obrazu, jest teraz symbolem zastępczym dla obrazu.
To rozróżnienie jest ważne, ponieważ podczas gdy element img posiadał wcześniej pojedynczy zestaw danych obrazu - czy to bitmapę czy wektor - teraz obraz może pomieścić wiele zestawów danych.
Element img (do podsumowania dla nie-programistów) wygląda następująco:
Wersja obrazu img reagującego na obraz wygląda następująco:
Ledwie jakieś zmiany. Patrząc na ten kod, zauważasz jedną ważną rzecz: kod jest kompatybilny wstecz. Jeśli pojawi się przeglądarka, która nie rozumie atrybutu srcset , po prostu zignoruje go i wyrenderuje obraz zgodnie z oryginalną specyfikacją z 1993 roku.
Oznacza to, że możemy teraz używać responsywnych obrazów w naszym znaczniku, bez potrzeby wykrywania funkcji.
W nowym responsywnym elemencie img , src jest głównie używany jako obraz domyślny i dla przeglądarek, które nie rozpoznają srcset, podczas gdy srcset zawiera wszystkie dostępne obrazy w wysokiej rozdzielczości dla tego symbolu zastępczego.
Podczas renderowania elementu img przeglądarka sam ustali, który plik obrazu jest najbardziej odpowiedni.
Używanie srcset
Teraz, gdy wiemy, że srcset nie powiedzie się po cichu w przeglądarkach, które go nie obsługują, możemy dodać dodatkowy obraz:
W tym przypadku każda przeglądarka obsługująca srcset wyświetli obraz-b.jpg, a każda przeglądarka, która nie obsługuje srcset wyświetli obraz-a.jpg.
Ważne jest, aby pamiętać, że przeglądarka pobierze tylko obraz, który zdecyduje, że chce wyświetlić, nie pobiera obu obrazów, a następnie wybiera jeden.
Niestety nie jest to zbyt daleko, ponieważ jeśli nie demonstrujemy wsparcia dla srcset , nie ma praktycznej aplikacji do przełączania obrazów w oparciu o samą obsługę srcset .
Rozwiązaniem jest dostarczenie przeglądarce dodatkowych informacji o tym, który obraz powinien wybrać. W tym celu musimy podać informacje o dostępnej przestrzeni lub gęstości pikseli.
Używając deskryptora x
Deskryptor x informuje przeglądarkę, jak gęste są piksele na obrazie.
Jeśli na przykład chcesz uzyskać obraz o jakości siatkówki z dwukrotnie większą liczbą pikseli niż standardowy obraz, możesz określić obraz siatkówki w zestawie srcset, a następnie spację, a następnie słowo kluczowe "2x".
Mamy nasz obraz:
Aby dodać opcję siatkówki do przeglądarki, dodajemy następujący plik srcset:
W tym przypadku są trzy możliwe wyniki:
jeśli przeglądarka nie obsługuje srcset , użyje pliku obrazu określonego w atrybucie src ;
jeśli przeglądarka obsługuje srcset i ma ekran o podwójnej rozdzielczości, użyje obrazu określonego w atrybucie srcset;
jeśli przeglądarka obsługuje srcset, ale nie ma ekranu o wysokiej rozdzielczości, użyje obrazu określonego w atrybucie src (jeśli w atrybucie src nie zostanie podany żaden obraz "1x", przyjmuje się , że atrybut src jest tym obrazem opcja).
Obsługa przeglądarki jest dobra i szybko się poprawia. Za pomocą jednego atrybutu rozwiązaliśmy zagadkę responsywnych obrazów, dzięki nam!
Na koniec warto wspomnieć o deskryptorze x: wybór obrazu do załadowania oparty jest na gęstości pikseli, więc jeśli użytkownik powiększy przeglądarkę do 200% (efektywnie zmniejszając o połowę rozmiar obrazu, a więc podwajając gęstość pikseli), 2x obraz się załaduje. Może to mieć szkodliwy wpływ na dostępność - z pewnością nie chcemy, aby witryny były wolniejsze dla osób niedowidzących, po prostu dlatego, że chcą powiększyć swoją przeglądarkę.
Używanie deskryptora w-des
Deskryptor w jest trochę bardziej zaawansowany niż deskryptor x.Deskryptor W działa, informując przeglądarkę, ile rzeczywistych pikseli istnieje na osi X (szerokość) konkretnej opcji obrazu.
Safari Edge, Safari i iOS nie obsługują deskryptora w chwili pisania, więc jego użyteczność jest nieco zmniejszona.
Wróćmy do naszego oryginalnego obrazu:
Jeśli ten obraz ma natywnie szerokość 1600 pikseli i jeśli chcemy dodać obraz siatkówki, tak jak to zrobiliśmy z powyższym deskryptorem x , określilibyśmy obraz w atrybucie srcset o szerokości 3200 pikseli:
Jest jeden główny wątek z deskryptorem w-k: chociaż atrybut src jest traktowany jako domyślny przy określaniu obrazów przy użyciu deskryptora x, jest on całkowicie ignorowany przez przeglądarki, które obsługują srcset, jeśli używasz deskryptora w. Podczas używania deskryptora w kodzie źródłowym musimy jawnie określić wartość domyślną, dodając drugą opcję srcset image, z własnym deskryptorem w- i rozdzielając je przecinkami:
Które prowadzi nas zgrabnie na ...
Używanie wielu obrazów
Możliwość określenia opcji obrazu o wysokiej rozdzielczości dla przeglądarki bezpośrednio w naszym kodzie HTML jest zdecydowanie fajna, ale jak się pewnie domyślacie, staje się jeszcze chłodniejsze, gdy określamy wiele obrazów.
Celem obrazów responsywnych jest dostarczenie obrazu o najlepszej jakości, który może być wykorzystany przez urządzenie uzyskujące dostęp, ale nic więcej. Po prostu dostarczenie obrazu siatkówki nie jest wystarczające, musimy dostarczyć obrazy z, na przykład, 1x, 1.5x, 2x, 2.5x i 3x.
Jeszcze raz, oto nasz oryginalny obraz znaczników:
Tutaj jest z obrazem oceny siatkówki dostarczonym jako opcja dla przeglądarki:
Tutaj jest, tym razem z dodatkowymi opcjami w srcset, oddzielonymi przecinkami:
Ponieważ słowa kluczowe oznaczają różne rzeczy dla różnych ludzi, uważam, że wskazane jest nadawanie nazw moim obrazom zgodnie z deskryptorem x, do którego należą, zarówno jako pomoc w pamięci osobistej, jak i zapewnienie różnym rozmiarom jasności dla innych członków zespołu:
Pamiętaj, że nie mówimy przeglądarce, jaki obraz wyświetlić, informujemy go o dostępnych opcjach i pozwalamy mu wybrać sam. Przeglądarka pobierze tylko jedno z tych obrazów.
Jeden błąd z wieloma obrazami: nigdy nie podawaj dwóch obrazów w atrybucie srcset z pasującym deskryptorem x i deskryptoremw, na przykład:
Atrybut size jest szczególnie interesującym dodatkiem do specyfikacji, ponieważ atrybut sizes przyjmuje wartości w stosunku do widoku, a nie obrazu.
Używając wartości vw (szerokość okna), określamy obszar obrazu w stosunku do szerokości przeglądarki - pamiętajcie, że element img jest teraz właściwie tylko symbolem zastępczym, więc nie określamy rzeczywistego rozmiaru obrazu, określamy rozmiar elementu zastępczego, który będzie zawierać obraz.
100vw to 100% szerokości rzutni, 50vw to 50% szerokości rzutni, 25vw to 25% szerokości rzutni itd.
Gdybyśmy chcieli ustawić szerokość pliku na połowę szerokości przeglądarki, użylibyśmy:
Nie jest to szczególnie przydatne, dopóki nie połączymy go z zapytaniami o media ...
Korzystanie z zapytań o media
Atrybut size staje się o wiele mocniejszy, gdy łączymy go z zapytaniami o media. Możemy oddzielić wiele szerokości rzutni za pomocą przecinków i powiedzieć przeglądarce, której użyć, używając zapytania o media w stylu CSS.
Na przykład wyobraźmy sobie, że chcemy, aby obraz stanowił 80% szerokości widocznego obszaru na większości urządzeń, ale na małych urządzeniach (takich jak telefony) o szerokości 380 pikseli lub mniej, chcemy jak najlepiej wykorzystać dostępne miejsce, tworząc 100% szerokości, napisalibyśmy to tak:
Zgodnie z tą logiką, każda przeglądarka o wielkości 380 pikseli lub mniejszej ustawi szerokość obrazu na 100% widoku. Każda inna przeglądarka spowoduje, że zapytanie o media zwróci wartość false, a przeglądarka przejdzie do następnej wartości atrybutu size, która w tym przypadku wynosi 80vw.
Z reguły nie lubię używać zapytań o media w HTML. Podobnie jak dane obrazu responsywnego należą do HTML (nie do JavaScript), zapytania o media należą do CSS (nie HTML). Jednak opcja jest dostępna dla Ciebie, jeśli jej potrzebujesz.
Responsive image best-practice (2016?)
Nie wiem jak wy, ale jestem podekscytowany możliwościami srcset. Jest to proste rozwiązanie trudnego problemu i wydaje się, że dostarcza wszystko, czego potrzebujemy.
Ale, podobnie jak w autobusach, trzeba czekać 20 lat na oficjalne rozwiązanie reagujących obrazów, a potem dwa naraz. Oprócz atrybutu srcset elementu img , mamy również element obrazu .
Element obrazu jest kolejnym elementem zastępczym, aczkolwiek bardziej tradycyjnym. Został zaprojektowany w celu naśladowania elementów wideo i audio w HTML5, więc jego składnia będzie znana większości. Element obrazu jest przeznaczony do użycia, gdy potrzebujesz większej kontroli niż może dostarczyć srcset .
Niestety, element graficzny ma znacznie mniejszą obsługę przeglądarki niż srcset i nie zawsze działa bezgłośnie.
Używanie elementu obrazu
Oto nasz oryginalny element graficzny:
Oto nasz obraz zagnieżdżony w elemencie graficznym:
Możemy również określić srcset dla elementu img wewnątrz elementu obrazu :
Korzystanie z elementu źródłowego
Element obrazu nie działa, dopóki nie doda elementu źródłowego :
Po wybraniu pliku do użycia przeglądarka rozpocznie się od pierwszego elementu źródłowego i będzie poruszać się po elementach, dopóki nie znajdzie takiego, którego atrybut multimediów zostanie uznany za prawdziwy, a następnie użyje srcset tego elementu źródłowego.
Na przykład możemy określić różne obrazy dla formatów pionowych i poziomych:
Możemy również określić wiele obrazów za pomocą deskryptora x i deskryptora w:
Podobnie jak w przypadku korzystania z zapytań o media w atrybucie size, kwestionowałbym mądrość sterowania wersjami obrazu w oparciu o styl, w znacznikach zamiast w arkuszu stylów. Jednak opcja użycia atrybutu media jest dostępna, jeśli jej potrzebujesz.
Używanie typu
Element graficzny naprawdę staje się samodzielny, gdy używa się go do zamiany różnych typów obrazów.
Wyobraźmy sobie, że mamy standardowy plik PNG, ale chcemy użyć a Plik WebP, który jest zwykle o 26% mniejszy - pamiętaj, że wrażliwe obrazy to dostarczanie najlepszej jakości obrazu w najmniejszym rozmiarze - ale obecnie obsługiwane tylko przez Chrome, Operę i przeglądarkę Android. Będziemy musieli użyć atrybutu type, aby określić, czy WebP jest obsługiwany:
W takim przypadku przeglądarka sprawdzi, czy format obrazu WebP jest obsługiwany. Jeśli tak, to ustali, czy ekran ma wystarczającą gęstość pikseli, aby wyświetlić obraz siatkówki-obrazu.webp , jeśli nie, wyświetli obraz image.webp . Jeśli WebP nie jest obsługiwany, przeglądarka przejdzie od razu do elementu img i przejdzie przez opcje srcset i src w sposób, który już znamy.
Atrybut type oznacza, że możemy zapewnić znacznie mniejsze rozmiary obsługiwanych formatów obrazu, co skutkuje mniejszym rozmiarem pliku.
Znane problemy
IE9 ma znany problem, który zapobiega dyskretnemu uszkodzeniu elementu obrazu. Aby poradzić sobie z IE9, musisz oszukać IE9, myśląc, że elementy źródłowe są częścią elementu wideo :
< !—[if IE 9]>< ![endif]—>
To brzydkie rozwiązanie, ale lepsze niż żadne rozwiązanie. Możemy mieć tylko nadzieję, że wydanie Windowsa 10 przyspieszy koniec IE9, ponieważ podczas gdy Edge nie obsługuje jeszcze elementu graficznego , nie obsługuje go we właściwy sposób (ignorując go).
Tam są polyfills to może pomóc w obsłudze elementu graficznego w IE, ale moje własne preferencje to unikanie ich. Nie ufam łataniu poprawek w JavaScript, ma to wpływ na wydajność i prowadzi do mniej konserwowalnego kodu.
Z tego powodu zalecam na razie unikanie elementu graficznego . Jeśli nie prowadzisz dużej witryny e-commerce, dodatkowe oszczędności czasu pobierania, które oferuje format WebP, prawdopodobnie nie przeważą niedogodności związanych z łataniem znaczników za pomocą skryptu.
Gdy IE9 spadnie poniżej 1%, co powinno nastąpić w pewnym momencie następnego roku, element obrazu stanie się opłacalny. Jeśli czytasz to w 2016 roku, prawdopodobnie dobrze ci pójdzie.
Tworzenie responsywnych obrazów
W przeciwieństwie do SVG, obrazy bitmapowe nie są skalowane. Nasza strategia radzenia sobie z nimi, niezależnie od tego, czy używamy srcset, czy elementu graficznego , polega na dostarczeniu innego obrazu w oparciu o możliwości przeglądarki. Aby sobie z tym poradzić, musimy dostarczyć wiele różnych rozmiarów obrazów.
Większość aplikacji do edycji obrazu zautomatyzowała proces eksportowania wielu wersji pojedynczego obrazu. Nie ma znaczenia, z której aplikacji korzystasz, pod warunkiem, że skończysz z wieloma rozmiarami obrazu bez konieczności ręcznej zmiany rozmiaru i zapisywania każdego z nich.
Adobe Photoshop to de facto edytor bitmap. Nie jest to doskonały wybór do prac projektowych, ale proces przetwarzania obrazu jest płynny i niezawodny. Generowanie wielu rozdzielczości obrazu w Photoshopie jest stosunkowo proste:
Otwórz obraz, który chcesz wygenerować wiele wersji, i umieść go na osobnej warstwie.
Zmień nazwę warstwy jako nazwę pliku, który chcesz wygenerować (łącznie z rozszerzeniem).
Wybierz Plik> Wygeneruj> Zasoby obrazu, a folder z twoim nowym obrazem zostanie zapisany obok twojego PSD.
Zmień nazwę warstwy, określając każdy obraz, który chcesz wygenerować, poprzedzony jego zamierzoną skalą. Nie musisz powtarzać kroku 3, gdy zmienisz nazwę warstwy, obrazy będą generowane automatycznie.
Kredyt za obraz trafia doPhilip Collier.
Aby uzyskać więcej informacji na temat generowania obrazów w programie Photoshop, Spójrz tutaj.
Na podstawie tych zdjęć możemy zaoferować przeglądarce pięć różnych opcji:
Wniosek
Element img przeszedł długą drogę od 20 lat. Lub, dokładniej, element img był niewystarczający przez 18 lat, a następnie sprintem do linii w ciągu ostatnich dwóch lat, do tego stopnia, że jest teraz stosunkowo wyrafinowany.
Najważniejsze, że dotarliśmy do rozwiązania (ów).
Z dwóch dostępnych opcji, srcset i picture, pierwsza jest zdecydowanie najbardziej obsługiwana. Jeśli budujesz 95% stron, najlepsze wsparcie i prostsza implementacja atrybutu srcset to najlepsza opcja.
Jeśli prowadzisz dużą witrynę e-commerce z tysiącami obrazów produktów, dodatkowa praca z obsługą formatu WebP może być opłacalna, zwłaszcza że wsparcie dla elementu graficznego wzrasta w ciągu najbliższych kilku lat.
Największą wadą obecnych opcji jest to, że przeglądarki nie mają obecnie możliwości wyboru obrazu na podstawie jego szybkości połączenia. Jesteśmy zmuszeni ufać, że bardziej wydajne urządzenia mają również lepsze połączenia.
Ostatecznie możemy w końcu obsłużyć obrazy najwyższej jakości, praktycznie możliwe, w najmniejszym rozmiarze. Oznacza to lepsze doświadczenie w krótszym czasie, który może być tylko czymś do zaakceptowania.
