Missed the action at this year's Chrome Dev Summit? Catch up with our playlist on YouTube. Watch now.

Obrazy

Obraz jest wart tysiąc słów, a grafiki są nieodłączną częścią każdej strony. Jednak często stanowią większość pobieranych danych. Elastyczne projektowanie witryn pozwala na podstawie cech urządzenia zmieniać nie tylko układ strony, ale też obrazy.

Elastyczne obrazy

Elastyczne projektowanie witryn oznacza, że na podstawie cech urządzenia może zmieniać się nie tylko układ strony, ale też jej zawartość. Na przykład wyświetlacze o wysokiej rozdzielczości (2x) wymagają grafiki o wysokiej rozdzielczości, by zagwarantować ostrość. Obraz przy szerokości 50% może wyglądać dobrze w przeglądarce szerokiej na 800 pikseli, ale zajmuje za dużo miejsca na wąskim telefonie i wciąż tak samo obciąża łącze, mimo przeskalowania i dopasowania do mniejszego ekranu.

Dostosowywanie grafiki

Przykład dostosowywania grafiki

Czasami obraz trzeba zmienić w większym stopniu – dopasować proporcje, przyciąć, a nawet zastąpić innym. W takiej sytuacji zmianę obrazu określa się zwykle jako dostosowywanie grafiki. Więcej przykładów znajdziesz na responsiveimages.org/demos/.

Responsive Images

Did you know that images account for more than 60% of the bytes on average needed to load a web page?

In this course you will learn how to work with images on the modern web, so that your images look great and load quickly on any device.

Along the way, you will pick up a range of skills and techniques to smoothly integrate responsive images into your development workflow. By the end of the course, you will be developing with images that adapt and respond to different viewport sizes and usage scenarios.

This is a free course offered through Udacity

Take Course

Obrazy w znacznikach

Element img ma duże możliwości – pobiera, dekoduje i renderuje treści – a współczesne przeglądarki obsługują szeroką gamę formatów graficznych. Dodawanie obrazów, które wyświetlają się na różnych urządzeniach, nie różni się od dodawania tych przeznaczonych na komputery. Aby stworzyć atrakcyjny interfejs, wystarczy wprowadzić tylko kilka drobnych poprawek.

TL;DR

  • Użyj względnych rozmiarów obrazów, by zapobiec przypadkowemu wyjściu poza kontener.
  • Gdy chcesz określić różne obrazy wyświetlane w zależności od cech urządzenia (tzn. dostosować grafikę), użyj elementu picture.
  • Użyj atrybutu srcset i deskryptora x w elemencie img, by przy wyborze obrazu podpowiedzieć przeglądarce, której rozdzielczości najlepiej użyć.

Korzystanie ze względnych rozmiarów obrazów

Przy określaniu szerokości obrazów używaj jednostek względnych, by zapobiec przypadkowemu wyjściu poza widoczny obszar. Na przykład width: 50% powoduje, że obraz ma 50% szerokości elementu, w którym się znajduje (nie widocznego obszaru ani konkretnego rozmiaru w pikselach).

CSS pozwala, by treści wychodziły poza swój kontener, więc czasami trzeba użyć parametru max-width: 100%, by uniemożliwić to obrazom i innym elementom. Na przykład:

img, embed, object, video {
  max-width: 100%;
}

Pamiętaj, by w atrybucie alt elementów img podać treściwe opisy. Zwiększają one dostępność strony, przekazując informacje czytnikom ekranu i innym funkcjom ułatwień dostępu.

Rozszerzanie elementów img o atrybut srcset na potrzeby urządzeń z wysoką liczbą DPI

Atrybut srcset rozszerza działanie elementu img, ułatwiając wyświetlanie różnych plików graficznych w zależności od cech urządzenia. Podobnie jak natywna funkcja CSS image-set, atrybut srcset pozwala przeglądarce wybrać obraz, który najlepiej pasuje do możliwości urządzenia. Na przykład pokazać obraz 2x na ekranie 2x, a w przyszłości być może obraz 1x na urządzeniu 2x przy ograniczonej przepustowości sieci.

<img src="photo.png" srcset="photo@2x.png 2x" ...>

Przeglądarki, które nie obsługują atrybutu srcset, wyświetlają domyślny plik graficzny podany w atrybucie src. Dlatego zawsze trzeba dołączać obraz 1x, który można pokazać na dowolnym urządzeniu, niezależnie od jego możliwości. Gdy atrybut srcset jest obsługiwany, przed wysłaniem jakichkolwiek żądań przeglądarka analizuje listę rozdzielonych przecinkami par obrazów i warunków, po czym pobiera i wyświetla najbardziej odpowiednią grafikę.

Warunki mogą obejmować wszystkie parametry – od gęstości pikseli aż po szerokość i wysokość, jednak obecnie dobrze działa tyko gęstość pikseli. Aby zachować równowagę między obecnym działaniem a przyszłymi funkcjami, poprzestań na wskazaniu obrazu 2x w atrybucie.

Używanie elementu picture przy dostosowywaniu grafiki w postaci elastycznych obrazów

Jeśli chcesz wyświetlać obrazy na podstawie cech urządzenia, czyli dostosowywać grafikę, użyj elementu picture. Element picture pozwala stworzyć deklarację z wieloma wersjami obrazu, które zależą od różnych cech urządzenia – takich jak rozmiar, rozdzielczość, orientacja itp.

Przykład dostosowywania grafiki

Elementu picture należy używać wtedy, gdy mamy obraz źródłowy w różnych gęstościach lub gdy zasady projektowania elastycznego wymagają użycia nieco innego obrazu na niektórych typach ekranów. Podobnie jak w przypadku elementu video, możesz dodać wiele elementów source. To pozwala wskazać różne pliki graficzne w zależności od zapytań o media czy 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 przeglądarka w przykładzie powyżej ma szerokość co najmniej 800 pikseli, to w zależności od rozdzielczości urządzenia wyświetli się plik head.jpg lub head-2x.jpg. Jeśli szerokość widoku wynosi od 450 do 800 pikseli, na tej samej zasadzie pojawi się plik head-small.jpg lub head-small-2x.jpg. W przypadku szerokości ekranu mniejszej niż 450 pikseli i zgodności wstecznej, gdy element picture nie jest obsługiwany, przeglądarka renderuje element img, który zawsze należy dołączyć.

Względne rozmiary obrazów

Jeśli ostateczny rozmiar obrazu jest nieznany, trudno określić deskryptor gęstości przy obrazach źródłowych. Szczególnie wtedy, gdy obrazy rozciągają się proporcjonalnie do szerokości przeglądarki i zmieniają się płynnie w zależności od jej rozmiaru.

Zamiast podawać stałe rozmiary i gęstości obrazów, wielkość każdego z nich możesz określić, dodając deskryptor szerokości do rozmiaru w elemencie image. To pozwala przeglądarce automatycznie obliczać skuteczną gęstość pikseli i wybierać 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">

W przykładzie powyżej renderujemy obraz, który ma połowę szerokości widocznego obszaru (sizes="50vw"). Przeglądarka w zależności od swojej szerokości i współczynnika pikseli urządzenia wybiera właściwy obraz, bez względu na to, jak duże jest jej okno. Ta tabela pokazuje, który obraz wybierze przeglądarka:

Szerokość przeglądarki Współczynnik pikseli urządzenia Wyświetlony obraz Skuteczna rozdzielczość
400 pikseli 1 200.png 1 x
400 pikseli 2 400.png 2 x
320 pikseli 2 400.png 2,5 x
600 pikseli 2 800.png 2,67 x
640 pikseli 3 1000.png 3,125 x
1100 pikseli 1 1400.png 1,27 x

Uwzględnianie punktów granicznych przy elastycznych obrazach

W wielu przypadkach rozmiar lub obraz może się zmieniać w zależności od punktów granicznych w układzie strony. Na przykład na małym ekranie obraz może rozciągać się na całą szerokość widocznego obszaru, a na większym – zajmować tylko jego część.

<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">

Atrybut sizes w przykładowym kodzie powyżej zawiera kilka zapytań o media, które określają rozmiar obrazu. Gdy szerokość przeglądarki przekracza 600 pikseli, obraz ma 25% szerokości widocznego obszaru, od 500 do 600 pikseli ma 50%, a poniżej 500 pikseli – pełną szerokość.

Ustawianie obrazów produktów jako rozwijanych

Klienci chcą zobaczyć, co kupują. Spodziewają się, że na stronie sklepu będą mogli wyświetlić zbliżenia produktu w wysokiej rozdzielczości, by lepiej przyjrzeć się szczegółom. Uczestników naszego badania irytował brak takiej możliwości.

Witryna J. Crew z rozwijanym zdjęciem produktu
Witryna J. Crew z rozwijanym zdjęciem produktu

Dobry przykład obrazów, które można kliknąć i rozwinąć, znajdziemy w witrynie J. Crew. Znikająca nakładka wskazuje, że obraz można kliknąć, by go powiększyć i zobaczyć drobne szczegóły.

Inne techniki związane z obrazami

Obrazy kompresowane

Technika obrazów kompresowanych pozwala wyświetlać bardzo skompresowane obrazy 2x na wszystkich urządzeniach, bez względu na ich faktyczne możliwości. W zależności od typu obrazu i poziomu kompresji zmiana jakości może być niezauważalna, ale rozmiar pliku znacznie się zmniejsza.

Zobacz przykład

Zastępowanie obrazów w JavaScripcie

Zastępowanie obrazów w JavaScripcie pozwala sprawdzić możliwości urządzenia i zastosować najlepsze rozwiązanie. Można sprawdzić współczynnik pikseli urządzenia (dzięki window.devicePixelRatio) oraz szerokość i wysokość ekranu, a nawet przeanalizować połączenie internetowe (korzystając z navigator.connection lub wysyłając fałszywe żądanie). Po zebraniu wszystkich tych informacji można wybrać obraz do wczytania.

Dużą wadą tej metody jest to, że użycie JavaScriptu opóźnia wczytanie obrazu przynajmniej do momentu zakończenia działania parsera podglądu. To oznacza, że pobieranie obrazów zaczyna się dopiero po wywołaniu zdarzenia pageload. Oprócz tego przeglądarka zwykle wczytuje zarówno obraz 1x, jak i 2x, pobierając więcej danych.

Obrazy w CSS

Właściwość CSS background to skuteczne narzędzie do umieszczania złożonych obrazów w elementach, które ułatwia dodawanie wielu obrazów, pozwala powtarzać je w elemencie itp. W połączeniu z zapytaniami o media staje się jeszcze bardziej przydatna, umożliwiając warunkowe wczytywanie obrazów na podstawie rozdzielczości ekranu, rozmiaru widocznego obszaru i innych parametrów.

TL;DR

  • Używaj obrazów, które najlepiej pasują do cech wyświetlacza. Weź pod uwagę rozmiar ekranu, rozdzielczość urządzenia i układ strony.
  • Zmień właściwość background-image w CSS na potrzeby wyświetlaczy o wysokiej liczbie DPI, korzystając z zapytań o media z parametrami min-resolution i -webkit-min-device-pixel-ratio.
  • Dodaj do znaczników atrybut srcset, by oprócz obrazów w skali 1x wyświetlać też wersje w wysokiej rozdzielczości.
  • Rozważ spadek wydajności podczas stosowania technik zastępowania grafik w JavaScripcie lub wyświetlania mocno skompresowanych obrazów w wysokiej rozdzielczości na urządzeniach o niższej rozdzielczości.

Używanie zapytań o media do warunkowego wczytywania obrazów lub dostosowywania grafiki

Zapytania o media nie tylko wypływają na układ strony, ale też pozwalają warunkowo wczytywać obrazy i dostosowywać grafikę na podstawie szerokości widocznego obszaru.

W przykładzie poniżej na mniejszych ekranach tylko plik small.png jest pobierany i stosowany do elementu div. Z kolei na większych polecenie background-image: url(body.png) jest stosowane do treści, a background-image: url(large.png) – do elementu 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żywanie funkcji image-set do wyświetlania obrazów w wysokiej rozdzielczości

Funkcja image-set() w CSS rozszerza działanie właściwości background, ułatwiając wyświetlanie różnych plików graficznych w zależności od cech urządzenia. Dzięki niej przeglądarka może wybrać obraz, który najlepiej pasuje do możliwości urządzenia. Na przykład pokazać obraz 2x na ekranie 2x lub obraz 1x na urządzeniu 2x przy ograniczonej przepustowości sieci.

background-image: image-set(
  url(icon1x.jpg) 1x,
  url(icon2x.jpg) 2x
);

Oprócz wczytania poprawnej grafiki przeglądarka także odpowiednio ją skaluje. Krótko mówiąc, przeglądarka zakłada, że obrazy 2x są dwa razy większe niż 1x, więc pomniejsza je dwukrotnie, by miały właściwy rozmiar na stronie.

Funkcja image-set() jest dość nowa i działa tylko w Chrome i Safari z przedrostkiem dostawcy -webkit. Pamiętaj też, by dołączyć obraz zastępczy, na wypadek gdyby funkcja image-set() nie była obsługiwana, 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  
  );
}

Kod powyżej powoduje wczytanie odpowiedniego zasobu w przeglądarkach, w których działa funkcja image-set, a w pozostałych – wyświetlenie zasobu zastępczego 1x. Oczywiście dopóki niewiele przeglądarek obsługuje image-set(), najczęściej użytkownicy będą widzieć zasób 1x.

Używanie zapytań o media do wyświetlania obrazów w wysokiej rozdzielczości lub dostosowywania grafiki

W zapytaniach o media można tworzyć reguły, które zależą od współczynnika pikseli urządzenia, co pozwala określać różne obrazy przeznaczone na wyświetlacze 2x lub 1x.

@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
  /* High dpi styles & resources here */
}

Chrome, Firefox i Opera obsługują standardowe polecenie (min-resolution: 2dppx), a Safari i przeglądarka w Androidzie wymagają starszej wersji składni z przedrostkiem dostawcy i bez jednostki dppx. Pamiętaj, że te style wczytują się tylko wtedy, gdy urządzenie pasuje do zapytania o media, więc musisz zdefiniować też style stosowane w podstawowym przypadku. Dzięki temu zyskasz pewność, że nawet gdy przeglądarka nie obsługuje rozdzielczości podanej w konkretnych zapytaniach o media, wyrenderuje poprawny widok.

.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);
  }
}

Możesz też użyć polecenia min-width, by wyświetlać alternatywne obrazy w zależności od rozmiaru widocznego obszaru. Zaleta tej techniki polega na tym, że jeśli zapytanie o media nie pasuje, obraz nie jest pobierany. Na przykład plik bg.png jest pobierany i stosowany w elemencie body tylko wtedy, gdy szerokość przeglądarki wynosi co najmniej 500 pikseli:

@media (min-width: 500px) {
  body {
    background-image: url(bg.png);
  }
}

Używanie obrazów SVG jako ikon

Jeśli to możliwe, jako ikon na swojej stronie użyj obrazów SVG, a w niektórych przypadkach znaków Unicode.

TL;DR

  • Zamiast obrazów rastrowych jako ikon użyj obrazów SVG lub znaków Unicode.

Zastępowanie prostych ikon znakami Unicode

Wiele czcionek zawiera rozmaite symbole Unicode, których możesz użyć zamiast obrazów. W przeciwieństwie do obrazów czcionki Unicode poprawnie się skalują i niezależnie od wielkości dobrze wyglądają na ekranie.

Oprócz normalnego zestawu znaków czcionka Unicode może obejmować formy numeryczne (⅐), strzałki (←), operatory matematyczne (√), kształty geometryczne (★), symbole elementów sterujących (▶), kody alfabetu Braille`a (⠏), nuty (♬), litery greckie (Ω), a nawet bierki szachowe (♞).

Znaki Unicode można dodawać do strony tak samo jak nazwane elementy – &#XXXX, gdzie XXXX to numer znaku Unicode. Na przykład:

Jesteś super&#9733;

Jesteś super★

Zastępowanie złożonych ikon obrazami SVG

Jeśli potrzebujesz bardziej złożonych ikon, skorzystaj z formatu SVG, który ma niewielkie wymagania, jest prosty w użyciu i działa ze stylami CSS. Obrazy SVG mają kilka zalet w porównaniu z obrazami rastrowymi:

  • To grafika wektorowa, którą można skalować bez ograniczeń.
  • Pozwalają w prosty sposób stosować efekty CSS takie jak kolor, cienie, przezroczystość i animacje.
  • Można umieszczać je bezpośrednio w treści dokumentu.
  • Mają charakter semantyczny.
  • Dzięki odpowiednim atrybutom lepiej współpracują z funkcjami ułatwień dostępu.

 

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">.

Problemy przy stosowaniu czcionek z ikonami

Czcionki z ikonami są popularne i łatwe w użyciu, ale w porównaniu z ikonami SVG mają kilka wad.

  • To grafika wektorowa, którą nie tylko można skalować bez ograniczeń, ale też poddawać wygładzaniu krawędzi. W efekcie ikony czasami nie są odpowiednio ostre.
  • W ograniczonym stopniu działają ze stylami CSS.
  • Dokładne pozycjonowanie pikseli może być trudne ze względu na wysokość wiersza, odstępy między literami itp.
  • Nie mają charakteru semantycznego i niezbyt dobrze współpracują z czytnikami ekranu oraz innymi funkcjami ułatwień dostępu.
  • Przy braku prawidłowego zakresu mogą powodować pobieranie dużych plików, mimo że używasz tylko niewielkiego podzbioru dostępnych ikon.

Przykład strony z czcionką z ikonami Font Awesome

With Font Awesome, you can either add icons by using a unicode
entity, like this HTML5 logo (<span class="awesome">&#xf13b;</span>)
or by adding special classes to an &lt;i&gt; element like the CSS3
logo (<i class="fa fa-css3"></i>).

Istnieją setki darmowych i płatnych czcionek z ikonami, np. Font Awesome, Pictos czy Glyphicons.

Pamiętaj, by podczas wybierania ikon wziąć pod uwagę dodatkowe żądania HTTP i ilość pobieranych danych. Jeśli np. potrzebujesz tylko kilku ikon, lepiej użyć obrazu lub sprite`a graficznego.

Optymalizowanie obrazów pod kątem wydajności

Obrazy często stanowią większość pobranych danych i zajmują znaczną część powierzchni strony. W efekcie ich optymalizacja może przynieść zauważalny spadek ilości pobieranych danych i zwiększenie wydajności witryny. Im mniej bajtów musi pobrać przeglądarka, tym szybciej pobierze i wyświetli wszystkie zasoby oraz w mniejszym stopniu obciąży łącze klienta.

TL;DR

  • Nie wybieraj przypadkowo formatu obrazu. Zapoznaj się z dostępnymi formatami i wybierz ten najbardziej odpowiedni.
  • W procesie tworzenia używaj narzędzi do optymalizacji i kompresji obrazów, by zmniejszyć rozmiary plików.
  • Zmniejsz liczbę żądań HTTP, umieszczając często używane obrazy w sprite`ach graficznych.
  • Rozważ opcję wczytywania obrazów dopiero wtedy, gdy po przewinięciu strony pojawią się w widoku, tak by skrócić czas początkowego wyświetlania strony i zmniejszyć ilość pobieranych danych.

Wybór właściwego formatu

Należy wziąć pod uwagę dwa typy obrazów: wektorowe i rastrowe. W przypadku obrazów rastrowych trzeba jeszcze wybrać właściwy format kompresji – np. GIF, PNG lub JPG.

Obrazy rastrowe, do których należą fotografie i inne grafiki, mają postać siatki osobnych kropek (pikseli). Zwykle pochodzą z aparatu lub skanera. Można też utworzyć je w przeglądarce, korzystając z elementu canvas. Wraz z powiększaniem się obrazu wzrasta wielkość pliku. Obraz przeskalowany do większego rozmiaru niż pierwotny staje się rozmazany, bo przeglądarka musi zgadywać, jak wypełnić brakujące piksele.

Obrazy wektorowe, do których należą logo i rysunki kreskowe, składają się z zestawu linii, krzywych, kształtów i kolorów wypełnienia. Powstają w takich programach jak Adobe Illustrator lub Inkscape i są zapisywane w formacie wektorowym, np. SVG. Obrazy wektorowe tworzy się z prostych elementów, dlatego można je skalować bez straty jakości i zmiany rozmiaru pliku.

Przy wyborze właściwego formatu musisz rozważyć zarówno rodzaj obrazu (rastrowy lub wektorowy), jak i jego treść (kolory, animacja, tekst itp.). Każdy format pasuje tylko do niektórych rodzajów obrazów oraz ma swoje zalety i wady.

Podczas wybierania formatu postępuj zgodnie z tymi wskazówkami:

  • Przy fotografiach użyj JPG.
  • Przy grafikach wektorowych i zawierających jednolite kolory (np. logo i rysunki kreskowe) użyj SVG. Jeśli grafika wektorowa jest niedostępna, skorzystaj z WebP lub PNG.
  • Zamiast formatu GIF użyj PNG, który pozwala zastosować więcej kolorów i ma lepsze współczynniki kompresji.
  • Przy dłuższych animacjach użyj tagu <video>, który daje wyższą jakość obrazu i pozwala użytkownikowi sterować odtwarzaniem.

Zmniejszanie rozmiaru pliku

Plik można znacznie zmniejszyć, przetwarzając go po zapisaniu. Jest wiele narzędzi do kompresji obrazów – stratnej lub bezstratnej, online, z interfejsem graficznym, wierszem polecenia itp. W miarę możliwości najlepiej zautomatyzować optymalizację obrazów, by stała się uniwersalnym etapem procesu tworzenia.

Niektóre dostępne narzędzia wykonują dodatkową, bezstratną kompresję plików JPG i PNG, bez wpływu na jakość obrazu. W przypadku JPG wypróbuj jpegtran lub jpegoptim (dostępny tylko na Linuksa, uruchamiany z opcją --strip-all). W przypadku PNG wypróbuj OptiPNG lub PNGOUT.

Korzystanie ze sprite`ów graficznych

Spriting CSS to technika, w której wiele obrazów łączy się w jeden obraz arkusza spriteów. Aby następnie wybrać konkretną grafikę, trzeba określić obraz tła elementu (arkusz spriteów) i przesunięcie wskazujące właściwą część.

Arkusz sprite'ów graficznych użyty jako przykład

.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;
}

Zaletą spritingu jest obniżenie liczby plików pobieranych przy wyświetlaniu wielu obrazów, bez utrudniania zapisu w pamięci podręcznej.

Stosowanie leniwego wczytywania

Leniwe wczytywanie może znacznie przyspieszyć wyświetlanie długich stron, które w części widocznej po przewinięciu zawierają wiele obrazów. Obrazy te wczytują się w razie potrzeby lub po zakończeniu wczytywania i renderowania głównych treści. Oprócz podnoszenia wydajności leniwe wczytywanie pozwala tworzyć strony o nieograniczonej długości.

Podczas tworzenia takich stron zachowaj jednak ostrożność, bo wyszukiwarki mogą nie wykryć treści, które wczytują się dopiero po przewinięciu. Podobnie użytkownicy szukający informacji, które zwykle są w stopce, nigdy jej nie zobaczą, bo zawsze będą wczytywać się nowe treści.

Całkowite unikanie obrazów

Czasami najlepszym rozwiązaniem jest całkowita rezygnacja z dodawania obrazu. Gdy to możliwe, warto używać natywnych funkcji przeglądarki, które dają takie same lub podobne efekty. Przeglądarki mogą obecnie generować elementy wizualne, które dawniej wymagały stosowania obrazów. Dzięki temu przeglądarka nie musi już pobierać osobnych plików graficznych i nie wyświetla obrazów w dziwnej skali. Ikony można renderować, korzystając ze standardu Unicode lub specjalnych czcionek z ikonami.

Umieszczanie tekstu w znacznikach zamiast na obrazach

Gdy to tylko możliwe, tekst powinien być tekstem, a nie elementem obrazu. Na przykład nie należy używać grafik jako nagłówków ani umieszczać w nich informacji kontaktowych takich jak numery telefonów czy adresy. To uniemożliwia użytkownikom skopiowanie i wklejenie tych danych oraz ukrywa je przed czytnikami ekranu. Strona jest wtedy nieelastyczna. Zamiast tego umieść tekst w znacznikach i w razie potrzeby użyj czcionek internetowych, by uzyskać odpowiedni styl.

Zastępowanie obrazów stylami CSS

Wiele przeglądarek pozwala korzystać z funkcji CSS, by tworzyć style, które dawniej wymagały stosowania obrazów. Na przykład właściwość background umożliwia tworzenie złożonych gradientów, box-shadow – cieni, a border-radius – zaokrąglonych narożników.

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 te techniki wymagają cykli renderowania, co może mieć znaczenie na urządzeniach mobilnych. Jeśli będziesz ich nadużywać, możesz stracić uzyskane korzyści i obniżyć wydajność strony.