Obraz wart jest 1000 słów, a obrazy stanowią integralną część każdej strony. Często jednak odpowiadają one również za większość pobranych bajtów. Dzięki elastycznemu projektowaniu witryn układ zmienia się nie tylko w zależności od charakterystyki urządzenia, ale także do obrazów.
Elastyczne projektowanie witryn oznacza, że układ może się zmieniać nie tylko w zależności od charakteru urządzenia, ale też zmieniać się treść. Na przykład na wyświetlaczach o wysokiej rozdzielczości (2x) obraz o wysokiej rozdzielczości zapewnia ostrość. Obraz o szerokości 50% może się dobrze wyświetlać, gdy przeglądarka ma szerokość 800 pikseli, ale zajmuje za dużo miejsca na wąskim telefonie i wymaga takiego samego narzutu przepustowości po zmniejszeniu, aby zmieścić się na mniejszym ekranie.
Kierunek sztuki
Czasami konieczna może być drastyczna zmiana obrazu: jego proporcje, przycięcie, a nawet zastąpienie całego obrazu. W tym przypadku zmiana obrazu jest zwykle nazywana kierunkiem sztuki. Więcej przykładów znajdziesz na stronie responsiveimages.org/demos/.
Obrazy elastyczne
Czy wiesz, że obrazy zajmują średnio ponad 60% bajtów potrzebnych do wczytania strony internetowej?
Z tego kursu dowiesz się, jak pracować z obrazami we współczesnym internecie, by zapewnić im świetny wygląd i szybkie wczytywanie na każdym urządzeniu.
W trakcie tego procesu nauczysz się wielu umiejętności i technik, aby płynnie włączać elastyczne obrazy w procesie programowania. Po zakończeniu kursu będziesz tworzyć obrazy, które dostosowują się do różnych rozmiarów i scenariuszy użycia oraz reagują na różne rozmiary widocznych obszarów.
Kurs jest dostępny bezpłatnie w Udacity.
Obrazy w znacznikach
Element img jest potężny – pobiera, dekoduje i renderuje treści. Nowoczesne przeglądarki obsługują też wiele formatów obrazów. Dodawanie obrazów, które działają na różnych urządzeniach, nie różni się od tego na komputerach i wymaga tylko kilku drobnych poprawek.
Podsumowanie
- Używaj rozmiarów względnych obrazów, aby zapobiec przypadkowemu przejściu w kontenerze.
- Użyj elementu
picture, gdy chcesz określać różne obrazy w zależności od charakterystyki urządzenia (czyli kierunku grafiki). - Użyj właściwości
srcseti deskryptoraxw elemencieimg, aby poinformować przeglądarkę o tym, który obraz najlepiej zastosować przy wyborze spośród różnych gęstości. - Jeśli strona zawiera tylko 1 lub 2 obrazy i nie są one używane nigdzie indziej w witrynie, rozważ użycie obrazów wbudowanych, aby zmniejszyć liczbę żądań plików.
Używanie rozmiarów względnych w przypadku obrazów
Pamiętaj, aby przy określaniu szerokości obrazów używać jednostek względnych, aby uniknąć przypadkowego wypełnienia widocznego obszaru. Na przykład width: 50%; powoduje, że szerokość obrazu wynosi 50% zawierającego element (a nie 50% widocznego obszaru lub 50% rzeczywistego rozmiaru w pikselach).
CSS pozwala na przeniesienie zawartości do kontenera, więc może być konieczne użycie wartości max-width: 100%, by obrazy i inne treści nie wystawały poza kontener. Na przykład:
img, embed, object, video {
max-width: 100%;
}
Dodaj konkretne opisy w atrybucie alt w elementach img. Dzięki temu witryna będzie bardziej dostępna, ponieważ nadadzą kontekst czytnikom ekranu i innym technologii wspomagającej osoby z niepełnosprawnością.
Zwiększ jakość img dzięki srcset na urządzeniach o wysokiej rozdzielczości DPI
Atrybut srcset wzmacnia działanie elementu img, co ułatwia przesyłanie wielu plików graficznych przeznaczonych na urządzenia o różnych cechach. Podobnie jak image-set
funkcja CSS wbudowana w CSS, srcset pozwala przeglądarce wybrać najlepszy obraz w zależności od charakterystyki urządzenia, np. użyć obrazu 2x na wyświetlaczu 2x, a w przyszłości również użyć obrazu 1x na urządzeniu o ograniczonej przepustowości.
<img src="photo.png" srcset="photo@2x.png 2x" ...>
W przeglądarkach, które nie obsługują srcset, przeglądarka używa po prostu domyślnego pliku graficznego określonego w atrybucie src. Dlatego ważne jest, aby zawsze dodawać obraz 1x, który może być wyświetlany na dowolnym urządzeniu, niezależnie od jego możliwości. Jeśli srcset jest obsługiwany, przed wysłaniem jakichkolwiek żądań analizowana jest lista rozdzielonych przecinkami obrazów/warunków, dzięki czemu pobrane i wyświetlane są tylko najbardziej odpowiednie obrazy.
Warunki mogą obejmować wszystko, od gęstości pikseli po szerokość i wysokość, ale obecnie obsługiwana jest tylko gęstość pikseli. Aby zrównoważyć aktualne zachowanie z przyszłymi funkcjami, w atrybucie wystarczy przesłać obraz podwójny.
Kierunek grafiki w obrazach elastycznych – picture
Aby zmieniać obrazy w zależności od charakterystyki urządzenia, użyj elementu picture. Element picture określa deklaratywne rozwiązanie do udostępniania wielu wersji obrazu na podstawie różnych cech, takich jak rozmiar urządzenia, rozdzielczość urządzenia czy orientacja.
Używaj elementu picture, gdy źródło obrazu istnieje w różnych gęstościach lub gdy elastyczne projektowanie dyktuje nieco inne obrazy na niektórych typach ekranów. Podobnie jak w przypadku elementu video, można uwzględnić wiele elementów source, co pozwala wskazywać różne pliki graficzne w zależności od zapytań o multimedia lub formatu obrazu.
<picture>
<source media="(min-width: 800px)" srcset="head.jpg, head-2x.jpg 2x">
<source media="(min-width: 450px)" srcset="head-small.jpg, head-small-2x.jpg 2x">
<img src="head-fb.jpg" srcset="head-fb-2x.jpg 2x" alt="a head carved out of wood">
</picture>
Jeśli w powyższym przykładzie szerokość przeglądarki to co najmniej 800 pikseli, w zależności od rozdzielczości urządzenia używany jest head.jpg lub head-2x.jpg. Jeśli rozmiar przeglądarki mieści się w zakresie 450–800 pikseli, używany jest ponownie head-small.jpg lub head-small-
2x.jpg, w zależności od rozdzielczości urządzenia. W przypadku ekranów o szerokości mniejszej niż 450 pikseli i zgodności wstecznej, gdy element picture nie jest obsługiwany, przeglądarka renderuje element img i zawsze należy go uwzględniać.
Obrazy w rozmiarze względnym
Jeśli końcowy rozmiar obrazu nie jest znany, może być trudno określić deskryptor gęstości dla źródeł obrazów. Dotyczy to zwłaszcza obrazów rozciągających się na szerokość okna przeglądarki i dostosowanych do rozmiarów okna.
Zamiast podawać stałe rozmiary i gęstości obrazów, możesz określić rozmiar każdego przesłanego obrazu, dodając deskryptor szerokości wraz z rozmiarem elementu graficznego. Dzięki temu przeglądarka może automatycznie obliczyć efektywną gęstość pikseli i wybrać najlepszy obraz do pobrania.
<img src="lighthouse-200.jpg" sizes="50vw"
srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
lighthouse-1800.jpg 1800w" alt="a lighthouse">
Powyższy przykład renderuje obraz o połowie szerokości widocznego obszaru (sizes="50vw"). W zależności od szerokości przeglądarki i współczynnika pikseli urządzenia przeglądarka może wybrać właściwy obraz niezależnie od wielkości okna przeglądarki. Na przykład w tabeli poniżej widać, jaki obraz wybrałaby przeglądarka:
| Szerokość przeglądarki | Współczynnik pikseli urządzenia | Użyty obraz | Efektywna rozdzielczość |
|---|---|---|---|
| 400 piks. | 1 | 200.jpg |
1x |
| 400 piks. | 2 | 400.jpg |
2 x |
| 320 piks. | 2 | 400.jpg |
2,5x |
| 600px | 2 | 800.jpg |
2,67x |
| 640 piks. | 3 | 1000.jpg |
3,125x |
| 1100 piks. | 1 | 800.png |
1,45x |
Uwzględnij punkty przerwania w obrazach elastycznych
W wielu przypadkach rozmiar obrazu może się zmieniać w zależności od punktów przerwania układu witryny. Na przykład w przypadku małego ekranu obraz powinien rozciągać się na całą szerokość widocznego obszaru, a na większych ekranach powinien być niewielki.
<img src="400.png"
sizes="(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw"
srcset="100.png 100w, 200.png 200w, 400.png 400w,
800.png 800w, 1600.png 1600w, 2000.png 2000w" alt="an example image">
W powyższym przykładzie atrybut sizes używa kilku zapytań o media, aby określić rozmiar obrazu. Jeśli szerokość przeglądarki przekracza 600 pikseli, obraz zajmuje 25% szerokości widocznego obszaru. W przypadku od 500 do 600 pikseli obraz zajmuje 50% szerokości widocznego obszaru. Poniżej 500 pikseli ma pełną szerokość.
Ustaw zdjęcia produktów jako rozwijane
Klienci chcą widzieć, co kupują. W sklepach stacjonarnych użytkownicy spodziewają się, że będą mogli oglądać zbliżenia produktów w wysokiej rozdzielczości, aby mieć lepszy wgląd w szczegóły. Jeśli nie udało im się tego zrobić, uczestnicy badania się denerwowali.
Dobrym przykładem rozwijanych obrazów, które można kliknąć, jest J. Witryna dla ekipy. Znikająca nakładka oznacza, że obraz można kliknąć, co daje powiększony obraz i widocznie widoczne są drobne szczegóły.
Inne techniki obrazu
Kompresowane obrazy
Metoda kompresji obrazów wyświetla bardzo skompresowany 2x obraz na wszystkie urządzenia, niezależnie od ich rzeczywistych możliwości. W zależności od typu obrazu i poziomu kompresji jakość obrazu może się nie zmieniać, ale rozmiar pliku znacznie się zmniejsza.
Zastępowanie obrazów JavaScript
Zastępowanie obrazów JavaScriptem sprawdza możliwości urządzenia i „działa prawidłowo”. Możesz określić współczynnik pikseli urządzenia za pomocą funkcji window.devicePixelRatio, sprawdzić szerokość i wysokość ekranu, a nawet wykryć połączenia sieciowe za pomocą navigator.connection lub wysyłać fałszywe żądania. Po zebraniu wszystkich tych informacji możesz zdecydować, który obraz chcesz wczytać.
Jedną z dużych wad tego podejścia jest to, że używanie JavaScriptu powoduje opóźnienie wczytywania obrazów do chwili zakończenia przynajmniej części parsera widoku z wyprzedzeniem. Oznacza to, że pobieranie obrazów nie rozpocznie się nawet po uruchomieniu zdarzenia pageload. Przeglądarka najczęściej pobierze też obrazy 1x i 2x, co zwiększy wagę strony.
Obrazy w treści: rastrowe i wektorowe
Istnieją 2 głównie różne sposoby tworzenia i przechowywania obrazów. Mają one wpływ na elastyczne wdrażanie obrazów.
Obrazy rastrowe, np. fotografie i inne obrazy, są wyświetlane jako siatka pojedynczych kropek o różnym kolorze. Obrazy rastrowe mogą pochodzić z aparatu lub skanera albo tworzyć je za pomocą elementu HTML Canvas. Obrazy rastrowe są przechowywane w formatach takich jak PNG, JPEG i WebP.
Obrazy wektorowe, takie jak logo i grafika liniowa, są zdefiniowane jako zestaw krzywych, linii, kształtów, kolorów wypełnienia i gradientów. Obrazy wektorowe można tworzyć w programach takich jak Adobe Illustrator czy Inkscape, ale też odręcznie pisać w kodzie w formacie wektorowym, np. SVG.
SVG
SVG umożliwia umieszczenie na stronie internetowej elastycznej grafiki wektorowej. Zaletą formatów plików wektorowych w stosunku do formatów rastrowych jest to, że przeglądarka może renderować obrazy wektorowe o dowolnym rozmiarze. Formaty wektorowe opisują geometrię obrazu – formę z linii, krzywych, kolorów itd. Z kolei formaty rastrowe zawierają informacje tylko o poszczególnych kolorach, więc przeglądarka musi zgadnąć, jak wypełnić te luki podczas skalowania.
Poniżej znajdziesz 2 wersje tego samego obrazu: obraz PNG po lewej stronie i SVG po prawej. Obraz SVG wygląda świetnie w każdym rozmiarze, a plik PNG znajdujący się obok niego zaczyna rozmyć się przy większych rozmiarach wyświetlacza.
Jeśli chcesz zmniejszyć liczbę żądań plików wysyłanych przez Twoją stronę, możesz zakodować obrazy w tekście w formacie SVG lub Identyfikator URI danych. Jeśli wyświetlisz źródło tej strony, zobaczysz, że poniższe logo są zadeklarowane w tekście: identyfikator URI danych i obraz SVG.
SVG ma świetną obsługę na urządzeniach mobilnych i komputerach, a narzędzia do optymalizacji mogą znacznie zmniejszyć rozmiar SVG. Te 2 wbudowane logo SVG wyglądają identycznie, ale jedno zajmuje około 3 KB, a drugie tylko 2 KB:
Identyfikator URI danych
Identyfikatory URI danych pozwalają wstawiać pliki (np. obrazy) w treści przez ustawienie atrybutu src elementu img w postaci ciągu zakodowanego w standardzie Base64 w takim formacie:
<img src="data:image/svg+xml;base64,[data]">
Początek kodu powyższego logo HTML5 wygląda tak:
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">
(Pełna wersja ma ponad 5000 znaków długości!)
Narzędzie do przeciągania i upuszczania, takie jak jpillora.com/base64-encoder, jest dostępne do konwertowania plików binarnych, np. obrazów, na identyfikatory URI danych. Tak jak pliki SVG, identyfikatory URI danych są dobrze obsługiwane w przeglądarkach mobilnych i komputerowych.
Wbudowanie w CSS
Identyfikatory URI danych i pliki SVG również można wstawiać w CSS. Jest to możliwe zarówno na urządzeniach mobilnych, jak i na komputerach. Oto 2 identyczne obrazy zaimplementowane jako obrazy tła w CSS; jeden identyfikator URI danych i 1 plik SVG:
Zalety i wady
Wbudowany kod obrazów może być szczegółowy, zwłaszcza identyfikatory URI danych. Dlaczego więc miałbyś go używać? Aby ograniczyć liczbę żądań HTTP, Pliki SVG i identyfikatory URI danych umożliwiają pobieranie całej strony internetowej, łącznie z obrazami, CSS i JavaScriptem, za pomocą jednego żądania.
Wady:
- Na urządzeniach mobilnych wyświetlanie identyfikatorów URI danych na urządzeniach mobilnych może być znacznie wolniejsze niż wyświetlanie obrazów z zewnętrznego obiektu
src. - Identyfikatory URI danych mogą znacznie zwiększyć rozmiar żądania HTML.
- Zwiększają one złożoność znaczników i przepływu pracy.
- Format identyfikatora URI danych jest znacznie większy niż plik binarny (do 30%), więc nie zmniejsza całkowitego rozmiaru pobierania.
- Identyfikatory URI danych nie mogą być przechowywane w pamięci podręcznej, więc trzeba je pobrać z każdej strony, na której są używane.
- Nie są obsługiwane w IE 6 i 7, a w IE8 nie są obsługiwane.
- W przypadku HTTP/2 zmniejszenie liczby żądań zasobów ma mniejszy priorytet.
Tak jak w przypadku każdego rodzaju responsywnego działania, trzeba sprawdzić, co działa najlepiej. Używaj narzędzi dla programistów do mierzenia rozmiaru pobieranego pliku, liczby żądań i całkowitego czasu oczekiwania. Identyfikatory URI danych mogą być czasem przydatne w przypadku obrazów rastrowych, np. na stronie głównej zawierającej tylko 1 lub 2 zdjęcia, które nie są używane gdzie indziej. Jeśli chcesz wstawić obrazy wektorowe w tekście, znacznie lepszym rozwiązaniem jest format SVG.
Obrazy w CSS
Właściwość CSS background to zaawansowane narzędzie do dodawania złożonych obrazów do elementów, ułatwiające dodawanie wielu obrazów i powodowanie ich powtarzania. W połączeniu z zapytaniami o multimedia właściwość tła staje się jeszcze bardziej wydajna i umożliwia warunkowe wczytywanie obrazów na podstawie rozdzielczości ekranu, rozmiaru widocznego obszaru i innych czynników.
Podsumowanie
- Wybierz obraz najlepiej pasujący do wyświetlacza, weź pod uwagę rozmiar ekranu, rozdzielczość urządzenia i układ strony.
- Zmień właściwość
background-imagew CSS dla wyświetlaczy o wysokiej rozdzielczości za pomocą zapytań o media z elementamimin-resolutioni-webkit-min-device-pixel-ratio. - Używaj metody srcset, aby oprócz obrazu 1x w znacznikach wyświetlać obrazy o wysokiej rozdzielczości.
- Weź pod uwagę koszty wydajności w przypadku korzystania z technik zastępowania obrazów JavaScript lub wyświetlania wysoce skompresowanych obrazów o wysokiej rozdzielczości na urządzeniach o niższej rozdzielczości.
Używaj zapytań o multimedia do warunkowego wczytywania obrazu lub kierunku grafiki
Zapytania o multimedia wpływają nie tylko na układ strony, ale mogą też służyć do warunkowego wczytywania obrazów lub do określania kierunku grafiki w zależności od szerokości widocznego obszaru.
Na przykład w przykładzie poniżej na mniejszych ekranach tylko plik small.png jest pobierany i stosowany do zawartości div, a na większych ekranach zastosowano do treści background-image: url(body.png) parametr background-image:
url(large.png).div
.example {
height: 400px;
background-image: url(small.png);
background-repeat: no-repeat;
background-size: contain;
background-position-x: center;
}
@media (min-width: 500px) {
body {
background-image: url(body.png);
}
.example {
background-image: url(large.png);
}
}
Użyj zestawu obrazów, aby zapewnić wysoką rozdzielczość
Funkcja image-set() w CSS ulepsza właściwość background, co ułatwia dostarczanie wielu plików graficznych o różnych cechach urządzenia. Dzięki temu przeglądarka może wybrać najlepszy obraz w zależności od charakteru urządzenia. Może to być np. obraz 2x na wyświetlaczu 2x lub obraz 1x na urządzeniu 2x przy ograniczonej przepustowości.
background-image: image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
Oprócz wczytywania właściwego obrazu przeglądarka też go skaluje. Inaczej mówiąc, przeglądarka zakłada, że obrazy 2 razy są 2 razy większe od tych 1x – i skaluje obraz 2x w dół 2-krotnie, tak aby na stronie miał taki sam rozmiar.
Obsługa języka image-set() jest wciąż nowa i jest obsługiwana tylko w Chrome i Safari z prefiksem dostawcy -webkit. Dodaj obraz zastępczy, gdy image-set() nie jest obsługiwany, na przykład:
.sample {
width: 128px;
height: 128px;
background-image: url(icon1x.png);
background-image: -webkit-image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x
);
background-image: image-set(
url(icon1x.png) 1x,
url(icon2x.png) 2x
);
}
Powyższy zasób wczytuje odpowiedni zasób w przeglądarkach, które obsługują zestaw obrazów. W przeciwnym razie wraca do zasobu 1x. Wyraźne zastrzeżenie polega na tym, że choć liczba przeglądarek image-set() nie jest obsługiwana, większość z nich otrzymuje zasób 1x.
Używaj zapytań o multimedia, aby wyświetlać obrazy w wysokiej rozdzielczości lub wskazówki dotyczące grafiki
Zapytania o multimedia mogą tworzyć reguły na podstawie współczynnika pikseli urządzenia, co pozwala określać różne obrazy do wyświetlania na wyświetlaczach 2x i 1x.
@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
/* High dpi styles & resources here */
}
Chrome, Firefox i Opera obsługują standardowy (min-resolution: 2dppx), natomiast przeglądarki Safari i Android wymagają starszej składni dostawcy z prefiksem bez jednostki dppx. Pamiętaj, że te style są wczytywane tylko wtedy, gdy urządzenie pasuje do zapytania o media i musisz określić style dla wielkości liter.
Dzięki temu masz też pewność, że przeglądarka nie obsługuje zapytań o multimedia o konkretnej rozdzielczości.
.sample {
width: 128px;
height: 128px;
background-image: url(icon1x.png);
}
@media (min-resolution: 2dppx), /* Standard syntax */
(-webkit-min-device-pixel-ratio: 2) /* Safari & Android Browser */
{
.sample {
background-size: contain;
background-image: url(icon2x.png);
}
}
Aby wyświetlać alternatywne obrazy zależnie od rozmiaru widocznego obszaru, możesz też użyć składni o minimalnej szerokości. Zaletą tej metody jest to, że w przypadku niezgodności zapytania o multimedia obraz nie jest pobierany. Na przykład plik bg.png jest pobierany i stosowany do elementu body tylko wtedy, gdy szerokość przeglądarki wynosi 500 pikseli:
@media (min-width: 500px) {
body {
background-image: url(bg.png);
}
}
Ikony SVG
Dodając ikony do strony, używaj ikon SVG tam, gdzie jest to możliwe, a w niektórych przypadkach – znaków Unicode.
Podsumowanie
- Na potrzeby ikon zamiast obrazów rastrowych używaj kodu SVG lub Unicode.
Zastępowanie prostych ikon kodem Unicode
Wiele czcionek obsługuje niezliczone glify Unicode, których można używać zamiast obrazów. W przeciwieństwie do obrazów czcionki w standardzie Unicode skalują się dobrze i wyglądają dobrze, bez względu na to, jak duże czy małe są widoczne na ekranie.
Poza zwykłym zestawem znaków kod unicode może zawierać symbole strzałek (←), operatorów matematycznych (pierwszorzędnych), kształtów geometrycznych (★), zdjęć sterujących (▶), notacji muzycznej (♬), greckich liter (Ω), a nawet pionków (♞).
Znak Unicode można dodać tak samo jak elementy nazwane tak: &#XXXX, gdzie XXXX to numer znaku Unicode. Na przykład:
You're a super ★
Doskonale ★
Zastępowanie złożonych ikon za pomocą SVG
W przypadku bardziej złożonych wymagań dotyczących ikon warto użyć ikon SVG, które są zwykle lekkie i łatwe w użyciu oraz można do nich dostosowywać styl CSS. Obraz SVG ma wiele zalet w porównaniu z obrazami rastrowymi:
- Są to grafiki wektorowe, które można skalować w nieskończoność.
- Efekty CSS takie jak kolor, cienie, przezroczystość i animacje są proste.
- Obrazy SVG można wstawiać bezpośrednio w dokumencie.
- Są semantyczne.
- Dzięki odpowiednim atrybutom są one łatwiej dostępne.
With SVG icons, you can either add icons using inline SVG, like
this checkmark:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="32" height="32" viewBox="0 0 32 32">
<path d="M27 4l-15 15-7-7-5 5 12 12 20-20z" fill="#000000"></path>
</svg>
or by using an image tag, like this credit card icon:
<img src="credit.svg">.
Zachowaj ostrożność podczas korzystania z czcionek ikon
Czcionki ikon są popularne i łatwo ich używać, ale w porównaniu z ikonami SVG mają kilka wad:
- Są to grafiki wektorowe, które można skalować w nieskończoność, ale mogą też być wygładzane, co powoduje, że ikony nie są tak ostre, jak powinny.
- Ograniczone stosowanie stylów CSS.
- Doskonałe położenie piksela może być trudne – zależy to od wysokości wiersza, odstępów między literami itp.
- Nie są one semantyczne i mogą być trudne w obsłudze z czytnikami ekranu lub innymi technologiami wspomagającymi.
- Jeśli nie ustawisz odpowiedniego zakresu, mogą one powodować duży rozmiar pliku, ponieważ korzysta się tylko z niewielkiego podzbioru dostępnych ikon.
With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome"></span>)
or by adding special classes to an <i> element like the CSS3
logo (<i class="fa fa-css3"></i>).
Dostępne są setki bezpłatnych i płatnych czcionek ikon, w tym Font Awesome, Pictos i Glyphicons.
Pamiętaj, aby zachować równowagę między wagą dodatkowego żądania HTTP i rozmiarem plików a koniecznością używania ikon. Jeśli np. potrzebujesz tylko kilku ikon, lepiej użyć obrazu lub sprite’a.
Optymalizacja obrazów pod kątem skuteczności
Obrazy często odpowiadają za większość pobranych bajtów i często zajmują też znaczną ilość przestrzeni wizualnej na stronie. W rezultacie optymalizacja obrazów może często przynieść w witrynie największe oszczędności i poprawy wydajności: im mniej bajtów musi pobrać przeglądarka, tym mniejsza konkurencja o przepustowość łącza klienta i szybciej przeglądarka może pobrać i wyświetlić wszystkie zasoby.
Podsumowanie
- Nie ograniczaj się do losowego wybierania formatu obrazu – poznaj różne dostępne formaty i wybierz ten, który najlepiej pasuje.
- Aby zmniejszyć rozmiar plików, uwzględnij w przepływie pracy narzędzia do optymalizacji i kompresji obrazów.
- Zmniejsz liczbę żądań HTTP, umieszczając często używane obrazy we sprite'ach.
- Aby skrócić początkowy czas wczytywania strony i zmniejszyć jej wagę, rozważ wczytywanie obrazów dopiero po przewinięciu strony.
Wybór właściwego formatu
Istnieją 2 rodzaje obrazów: obrazy wektorowe i rastrowe.
W przypadku obrazów rastrowych musisz też wybrać odpowiedni format kompresji, np. GIF, PNG, JPG.
Obrazy rastrowe, takie jak fotografie i inne obrazy, są wyświetlane jako siatka pojedynczych kropek lub pikseli. Obrazy rastrowe zwykle pochodzą z aparatu lub skanera. Można je też tworzyć w przeglądarce z elementem canvas. Zwiększa się też rozmiar pliku, wraz z dużym rozmiarem obrazu. Po powiększeniu od pierwotnego rozmiaru obrazy rastrowe stają się rozmyte, ponieważ przeglądarka musi zgadnąć, jak uzupełnić brakujące piksele.
Obrazy wektorowe, takie jak logo i grafiki liniowe, są definiowane przez zestaw krzywych, linii, kształtów i kolorów wypełnienia. Obrazy wektorowe są tworzone w programach takich jak Adobe Illustrator czy Inkscape i zapisywane w formacie wektorowym, takim jak SVG. Obrazy wektorowe są tworzone na prostych elementach podstawowych, więc można je skalować bez utraty jakości czy zmiany rozmiaru pliku.
Wybierając odpowiedni format, należy wziąć pod uwagę zarówno pochodzenie obrazu (rastrowy lub wektorowy), jak i jego zawartość (kolory, animację, tekst itp.). Żaden format nie pasuje do wszystkich typów obrazów. Każdy format ma swoje mocne i słabe strony.
Wybierając odpowiedni format, zacznij od tych wytycznych:
- Do obróbki zdjęć użyj
JPG. - W przypadku grafiki wektorowej i jednolitych kolorów, np. logo i grafiki liniowej, używaj usługi
SVG. Jeśli grafika wektorowa jest niedostępna, użyjWebPlubPNG. - Użyj
PNGzamiastGIF, ponieważ pozwala to na więcej kolorów i zapewnia lepszy współczynnik kompresji. - W przypadku dłuższych animacji rozważ użycie parametru
<video>, który zapewnia lepszą jakość obrazu i daje użytkownikowi kontrolę nad odtwarzaniem.
Zmniejsz rozmiar pliku
Możesz znacznie zmniejszyć rozmiar pliku obrazu, przetwarzając je po zapisaniu. Jest wiele narzędzi do kompresji obrazu – stratna i bezstratna, online, GUI i wiersz poleceń. W miarę możliwości najlepiej jest wypróbować automatyczną optymalizację obrazów, aby była ona wbudowaną w przepływ pracy.
Dostępnych jest kilka narzędzi umożliwiających dalszą – bezstratną kompresję plików JPG i PNG bez wpływu na jakość obrazu. W przypadku systemu JPG spróbuj użyć jpegtran lub jpegoptim (dostępne tylko dla systemu Linux;
uruchamiane przy użyciu opcji --strip-all). W przypadku PNG wypróbuj
OptiPNG lub
PNGOUT.
Użyj obrazów sprite.
Sprite CSS to technika polegająca na połączeniu wielu obrazów w jednym „arkuszu sprite”. Aby użyć poszczególnych obrazów, określ obraz tła dla elementu (arkusza sprite) i odsunięcie, by wyświetlić właściwą część.
.sprite-sheet {
background-image: url(sprite-sheet.png);
width: 40px;
height: 25px;
}
.google-logo {
width: 125px;
height: 45px;
background-position: -190px -170px;
}
.gmail {
background-position: -150px -210px;
}
.maps {
height: 40px;
background-position: -120px -165px;
}
Spriting ma tę zaletę, że ogranicza liczbę pobrań wymaganych do uzyskania wielu obrazów, a jednocześnie umożliwia buforowanie.
Rozważ leniwe ładowanie
Leniwe ładowanie może znacznie przyspieszyć wczytywanie na długich stronach, które zawierają wiele obrazów w części strony widocznej po przewinięciu. Można je ładować w razie potrzeby lub po zakończeniu wczytywania i renderowania głównej treści. Oprócz poprawy wydajności korzystanie z leniwego ładowania może zapewnić przewijanie nieskończone.
Zachowaj ostrożność, tworząc strony z przewijaniem nieskończonym – ponieważ treści są wczytywane w chwili, gdy stają się widoczne, wyszukiwarki mogą ich nigdy nie zobaczyć. Ponadto użytkownicy, którzy szukają informacji, których spodziewali się znaleźć w stopce, nigdy nie zobaczą jej, ponieważ nowe treści są zawsze wczytywane.
Całkowicie unikaj obrazów
Czasami najlepsze zdjęcie wcale nie jest zdjęciem. W miarę możliwości korzystaj z natywnych funkcji przeglądarki, aby udostępniać te same lub podobne funkcje. Przeglądarki generują treści wizualne, które wcześniej musiały zawierać wymagane obrazy. Oznacza to, że przeglądarki nie muszą już pobierać osobnych plików graficznych, co zapobiega niezręcznie skalowaniu obrazów. Ikony można renderować za pomocą standardu Unicode lub specjalnych czcionek.
Umieszczaj tekst w znacznikach zamiast w obrazach
Tekst powinien być w miarę możliwości tekstem i nie być osadzony w obrazach. Na przykład używanie obrazów w nagłówkach oraz umieszczanie informacji kontaktowych, takich jak numery telefonów czy adresy, bezpośrednio w obrazach uniemożliwia użytkownikom ich kopiowanie i wklejanie. Sprawiają, że czytniki ekranu nie mają do nich dostępu, a same informacje nie reagują na reklamy. Zamiast tego umieść tekst w znacznikach i w razie potrzeby użyj czcionek internetowych, aby uzyskać odpowiedni styl.
Zastępowanie obrazów przy użyciu CSS
Nowoczesne przeglądarki mogą korzystać z funkcji CSS, aby tworzyć style, które wcześniej miały wymagane obrazy. Na przykład: złożone gradienty można tworzyć za pomocą właściwości background, cienie można tworzyć za pomocą właściwości box-shadow, a zaokrąglone narożniki można dodawać za pomocą właściwości border-radius.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet augue eu magna scelerisque porta ut ut dolor. Nullam Placerat egestas nisl sed sollicitudin. Fusce Placerat, ipsum ac vestibulum porta, purus dolor mollis nunc, pharetra vehicula nulla nunc quis elit. Duis ornare fringilla dui non vehicula. In hac habitasse platea dictumst. Donec ipsum lectus, hendrerit malesuada sapien eget, venenatis tempus purus.
<style>
div#noImage {
color: white;
border-radius: 5px;
box-shadow: 5px 5px 4px 0 rgba(9,130,154,0.2);
background: linear-gradient(rgba(9, 130, 154, 1), rgba(9, 130, 154, 0.5));
}
</style>
Pamiętaj, że korzystanie z tych technik wymaga cykli renderowania, co może być ważne na urządzeniach mobilnych. Jeśli będziesz ich nadużywać, stracisz wszystkie korzyści i może to negatywnie wpłynąć na skuteczność.