Obraz jest wart 1000 słów, a obrazy stanowią integralną część każdej strony. Jednak często stanowią one większość pobranych bajtów. Dzięki elastycznemu projektowaniu witryn możemy zmieniać nie tylko układy, ale też obrazy, w zależności od właściwości urządzenia.
Elastyczne projektowanie witryn oznacza, że nie tylko układy mogą się zmieniać w zależności od cech urządzenia, ale także treści. Na przykład na wyświetlaczach o wysokiej rozdzielczości (2x) grafika o wysokiej rozdzielczości zapewnia ostrość. Obraz o szerokości 50% może wyglądać dobrze w przeglądarce o szerokości 800 pikseli, ale zajmuje zbyt dużo miejsca na wąskim ekranie telefonu i wymaga takiej samej przepustowości, gdy jest skalowany w dół, aby zmieścił się na mniejszym ekranie.
Kierownictwo artystyczne
Innym razem może być konieczna bardziej drastyczna zmiana obrazu: zmiana proporcji, przycięcie, a nawet zastąpienie całego obrazu. W takim przypadku zmiana obrazu jest zwykle określana jako kierownictwo artystyczne. Więcej przykładów znajdziesz na stronie responsiveimages.org/demos/.
Obrazy elastyczne
Czy wiesz, że obrazy stanowią średnio ponad 60% bajtów potrzebnych do wczytania strony internetowej?
Na tym kursie dowiesz się, jak pracować z obrazami w nowoczesnej sieci, aby wyglądały świetnie i szybko się ładowały na każdym urządzeniu.
Przy okazji poznasz szereg umiejętności i technik, które pozwolą Ci płynnie zintegrować obrazy elastyczne z procesem programowania. Pod koniec kursu będziesz tworzyć obrazy, które dostosowują się do różnych rozmiarów widocznego obszaru i scenariuszy użycia.
Jest to bezpłatny kurs oferowany przez Udacity.
Obrazy w znacznikach
Element img jest bardzo przydatny – pobiera, dekoduje i renderuje treści, a nowoczesne przeglądarki obsługują różne formaty obrazów. Dodawanie obrazów, które działają na różnych urządzeniach, nie różni się od dodawania ich na komputerze i wymaga tylko kilku drobnych zmian, aby zapewnić dobre wrażenia.
Podsumowanie
- Używaj względnych rozmiarów obrazów, aby zapobiec ich przypadkowemu przepełnieniu kontenera.
- Używaj elementu
picture, gdy chcesz określić różne obrazy w zależności od cech urządzenia (czyli kierunku artystycznego). - Użyj
srcseti deskryptoraxw elemencieimg, aby podpowiedzieć przeglądarce, który obraz najlepiej wybrać spośród różnych gęstości. - Jeśli na stronie znajduje się tylko 1 lub 2 obrazy, które nie są używane w żadnym innym miejscu w witrynie, rozważ użycie obrazów wbudowanych, aby zmniejszyć liczbę żądań plików.
Używanie względnych rozmiarów obrazów
Pamiętaj, aby podczas określania szerokości obrazów używać jednostek względnych, aby zapobiec przypadkowemu przepełnieniu widocznego obszaru. Na przykład width: 50%; powoduje, że szerokość obrazu wynosi 50% szerokości elementu nadrzędnego (a nie 50% szerokości widocznego obszaru lub 50% rzeczywistego rozmiaru w pikselach).
Ponieważ CSS umożliwia przepełnienie kontenera, może być konieczne użycie właściwości max-width: 100%, aby zapobiec przepełnieniu obrazów i innych treści. Na przykład:
img, embed, object, video {
max-width: 100%;
}
Pamiętaj, aby podawać zrozumiałe opisy za pomocą atrybutu alt w elementach img. Dzięki temu Twoja witryna będzie bardziej dostępna, ponieważ czytniki ekranu i inne technologie wspomagające osoby z niepełnosprawnością będą mogły odczytać kontekst.
Ulepszanie img za pomocą srcset na urządzeniach z wysoką rozdzielczością
Atrybut srcset rozszerza działanie elementu img, ułatwiając udostępnianie wielu plików graficznych dla różnych urządzeń. Podobnie jak funkcja CSS image-set, srcset umożliwia przeglądarce wybór najlepszego obrazu w zależności od parametrów urządzenia, np. obrazu 2x na wyświetlaczu 2x, a w przyszłości być może obrazu 1x na urządzeniu 2x w przypadku sieci o ograniczonej przepustowości.
<img src="photo.png" srcset="photo@2x.png 2x" ...>
W przeglądarkach, które nie obsługują atrybutu srcset, przeglądarka używa domyślnego pliku graficznego określonego przez atrybut src. Dlatego ważne jest, aby zawsze dołączać obraz 1x, który można wyświetlić na dowolnym urządzeniu, niezależnie od jego możliwości. Jeśli obsługiwany jest atrybut srcset, lista obrazów i warunków rozdzielona przecinkami jest analizowana przed wysłaniem żądań, a pobierany i wyświetlany jest tylko najbardziej odpowiedni obraz.
Warunki mogą obejmować wszystko, od gęstości pikseli po szerokość i wysokość, ale obecnie dobrze obsługiwana jest tylko gęstość pikseli. Aby zachować równowagę między obecnym działaniem a przyszłymi funkcjami, wystarczy podać w atrybucie obraz w rozmiarze 2x.
Kierunek artystyczny w obrazach elastycznych z użyciem elementu picture
Aby zmieniać obrazy na podstawie cech urządzenia (tzw. kierunek artystyczny), użyj elementu picture. Element picture definiuje deklaratywne rozwiązanie umożliwiające udostępnianie wielu wersji obrazu na podstawie różnych cech, takich jak rozmiar urządzenia, rozdzielczość urządzenia, orientacja i inne.
Używaj elementu picture, gdy źródło obrazu występuje w różnych gęstościach lub gdy elastyczne projektowanie stron wymaga nieco innego obrazu na niektórych typach ekranów. Podobnie jak w przypadku elementu video, można uwzględnić wiele elementów source, co umożliwia określenie różnych plików graficznych w zależności od zapytań o media lub formatu pliku graficznego.
<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>
W powyższym przykładzie, jeśli szerokość przeglądarki wynosi co najmniej 800 pikseli, używany jest obraz head.jpg lub head-2x.jpg, w zależności od rozdzielczości urządzenia. Jeśli szerokość okna przeglądarki wynosi od 450 do 800 pikseli, używany jest rozmiar head-small.jpg lub head-small-
2x.jpg, również w zależności od rozdzielczości urządzenia. 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 powinien być zawsze uwzględniony.
Obrazy o rozmiarze względnym
Gdy ostateczny rozmiar obrazu nie jest znany, określenie deskryptora gęstości dla źródeł obrazu może być trudne. Dotyczy to zwłaszcza obrazów, które rozciągają się na proporcjonalną szerokość przeglądarki i są płynne w zależności od jej rozmiaru.
Zamiast podawać stałe rozmiary i gęstości obrazów, możesz określić rozmiar każdego dostarczonego obrazu, dodając deskryptor szerokości wraz z rozmiarem elementu obrazu. 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">
W powyższym przykładzie obraz jest renderowany na połowę 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ć odpowiedni obraz niezależnie od rozmiaru okna. W tabeli poniżej pokazujemy, który obraz wybierze przeglądarka:
| Szerokość przeglądarki | Współczynnik pikseli urządzenia | Użyty obraz | Rzeczywista rozdzielczość |
|---|---|---|---|
| 400 pikseli | 1 | 200.jpg |
1x |
| 400 pikseli | 2 | 400.jpg |
2 x |
| 320 pikseli | 2 | 400.jpg |
2,5× |
| 600 pikseli | 2 | 800.jpg |
2,67x |
| 640 piks. | 3 | 1000.jpg |
3,125x |
| 1100px | 1 | 800.png |
1,45x |
Uwzględnianie punktów 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 na małym ekranie obraz może zajmować całą szerokość widocznego obszaru, a na większych ekranach – tylko niewielką 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">
W powyższym przykładzie atrybut sizes używa kilku zapytań o media, aby określić rozmiar obrazu. Gdy szerokość przeglądarki jest większa niż 600 pikseli, obraz zajmuje 25% szerokości widocznego obszaru. Gdy szerokość przeglądarki wynosi od 500 do 600 pikseli, obraz zajmuje 50% szerokości widocznego obszaru. Gdy szerokość przeglądarki jest mniejsza niż 500 pikseli, obraz zajmuje całą szerokość widocznego obszaru.
Umożliwianie powiększania zdjęć produktów
Klienci chcą widzieć, co kupują. W witrynach sklepów internetowych użytkownicy oczekują możliwości wyświetlania zbliżeń produktów w wysokiej rozdzielczości, aby lepiej przyjrzeć się szczegółom. Uczestnicy badania byli sfrustrowani, gdy nie mogli tego zrobić.
Dobrym przykładem obrazów, które można kliknąć i rozwinąć, jest reklama firmy J. Witryna dla ekipy. Znikająca nakładka wskazuje, że obraz można kliknąć, aby wyświetlić go w powiększeniu i zobaczyć szczegóły.
Inne techniki dotyczące obrazów
Obrazy skompresowane
Technika kompresji obrazu polega na wyświetlaniu na wszystkich urządzeniach obrazu o wysokim stopniu kompresji i dwukrotnie większym rozmiarze, niezależnie od rzeczywistych możliwości urządzenia. W zależności od typu obrazu i poziomu kompresji jakość obrazu może nie ulec zmianie, ale rozmiar pliku znacznie się zmniejszy.
Zastępowanie obrazu za pomocą JavaScriptu
Zastępowanie obrazów za pomocą JavaScriptu sprawdza możliwości urządzenia i „robi to, co trzeba”. Możesz określić współczynnik pikseli urządzenia za pomocą window.devicePixelRatio, uzyskać szerokość i wysokość ekranu, a nawet potencjalnie wykryć połączenie sieciowe za pomocą navigator.connection lub wysyłając fałszywe żądanie. Gdy zbierzesz wszystkie te informacje, możesz zdecydować, który obraz chcesz wczytać.
Dużą wadą tego podejścia jest to, że użycie JavaScriptu oznacza, że opóźnisz wczytywanie obrazu co najmniej do momentu zakończenia działania parsera look-ahead. Oznacza to, że obrazy nie zaczną się pobierać, dopóki nie zostanie wywołane zdarzenie pageload. Dodatkowo przeglądarka najprawdopodobniej pobierze obrazy w rozdzielczości 1x i 2x, co zwiększy wagę strony.
Wstawianie obrazów: rastrowych i wektorowych
Istnieją 2 zasadniczo różne sposoby tworzenia i przechowywania obrazów, co wpływa na sposób ich wdrażania w trybie elastycznym.
Obrazy rastrowe – takie jak zdjęcia i inne obrazy, są reprezentowane jako siatka pojedynczych kolorowych punktów. Obrazy rastrowe mogą pochodzić z aparatu lub skanera albo zostać utworzone za pomocą elementu canvas w HTML. Formaty takie jak PNG, JPEG i WebP służą do przechowywania obrazów rastrowych.
Obrazy wektorowe, takie jak logo i grafika liniowa, są definiowane jako zbiór krzywych, linii, kształtów, kolorów wypełnienia i gradientów. Obrazy wektorowe można tworzyć za pomocą programów takich jak Adobe Illustrator czy Inkscape lub ręcznie pisać kod w formacie wektorowym, np. SVG.
SVG
SVG umożliwia umieszczanie na stronie internetowej elastycznej grafiki wektorowej. Zaletą formatów plików wektorowych w porównaniu z formatami plików rastrowych jest to, że przeglądarka może renderować obraz wektorowy w dowolnym rozmiarze. Formaty wektorowe opisują geometrię obrazu – jak jest on zbudowany z linii, krzywych, kolorów itd. Z kolei formaty rastrowe zawierają tylko informacje o poszczególnych kolorowych punktach, więc przeglądarka musi zgadywać, jak wypełnić puste miejsca podczas skalowania.
Poniżej znajdują się 2 wersje tego samego obrazu: po lewej stronie obraz PNG, a po prawej SVG. Plik SVG wygląda świetnie w każdym rozmiarze, podczas gdy plik PNG obok niego zaczyna wyglądać na rozmazany przy większych rozmiarach wyświetlacza.
Jeśli chcesz zmniejszyć liczbę żądań plików wysyłanych przez stronę, możesz zakodować obrazy w kodzie, używając formatu SVG lub identyfikatora URI danych. Jeśli wyświetlisz źródło tej strony, zobaczysz, że oba poniższe logotypy są zadeklarowane w kodzie: identyfikator URI danych i plik SVG.
Format SVG jest świetnie obsługiwany na urządzeniach mobilnych i komputerach, a narzędzia do optymalizacji mogą znacznie zmniejszyć rozmiar plików SVG. Te 2 wbudowane logotypy SVG wyglądają identycznie, ale jeden ma rozmiar około 3 KB, a drugi tylko 2 KB:
Identyfikator URI danych
Identyfikatory URI danych pozwalają wstawiać pliki (np. obrazy) w treści za pomocą parametru src elementu img w postaci ciągu z kodowaniem Base64 zgodnie z tym formatem:
<img src="data:image/svg+xml;base64,[data]">
Początek kodu logo HTML5 powyżej wygląda tak:
<img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiB
BZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW ...">
(Pełna wersja ma ponad 5000 znaków).
Do konwertowania plików binarnych, takich jak obrazy, na identyfikatory URI danych można używać narzędzi typu „przeciągnij i upuść”, np. jpillora.com/base64-encoder. Podobnie jak SVG, identyfikatory URI danych są dobrze obsługiwane w przeglądarkach mobilnych i na komputerach.
Wstawianie w kodzie CSS
Identyfikatory URI danych i pliki SVG można też wstawiać w arkuszach CSS – jest to obsługiwane zarówno na urządzeniach mobilnych, jak i na komputerach. Oto 2 identycznie wyglądające obrazy zaimplementowane jako obrazy tła w CSS – jeden z identyfikatorem URI danych, a drugi w formacie SVG:
Zalety i wady wstawiania
Kod obrazów wstawianych w treści może być bardzo długi, zwłaszcza w przypadku identyfikatorów URI danych. Dlaczego więc warto go używać? Aby zmniejszyć liczbę żądań HTTP. Pliki SVG i identyfikatory URI danych umożliwiają pobranie całej strony internetowej, w tym obrazów, plików CSS i JavaScript, za pomocą jednego żądania.
Wady:
- Na urządzeniach mobilnych wyświetlanie identyfikatorów URI danych może być znacznie wolniejsze niż wyświetlanie obrazów z zewnętrznego źródła
src. - Identyfikatory URI danych mogą znacznie zwiększyć rozmiar żądania HTML.
- Zwiększają złożoność znaczników i przepływu pracy.
- Format identyfikatora URI danych jest znacznie większy niż format binarny (nawet o 30%), więc nie zmniejsza całkowitego rozmiaru pobieranych danych.
- Identyfikatorów URI danych nie można zapisać w pamięci podręcznej, więc muszą być pobierane na każdej stronie, na której są używane.
- Nie są obsługiwane w IE 6 i 7, a w IE 8 są obsługiwane tylko częściowo.
- W przypadku HTTP/2 zmniejszenie liczby żądań zasobów będzie miało mniejszy priorytet.
Podobnie jak w przypadku wszystkich elementów elastycznych, musisz przetestować, co działa najlepiej. Użyj narzędzi dla programistów, aby zmierzyć rozmiar pobieranego pliku, liczbę żądań i całkowite opóźnienie. Identyfikatory URI danych mogą być czasami przydatne w przypadku obrazów rastrowych – na przykład na stronie głównej, która zawiera tylko 1 lub 2 zdjęcia, które nie są używane w innym miejscu. Jeśli musisz wstawić obrazy wektorowe, znacznie lepszym rozwiązaniem jest SVG.
Obrazy w CSS
Właściwość CSS background to zaawansowane narzędzie do dodawania złożonych obrazów do elementów, które ułatwia dodawanie wielu obrazów, ich powtarzanie i nie tylko. W połączeniu z zapytaniami o media właściwość background staje się jeszcze bardziej zaawansowana, umożliwiając warunkowe wczytywanie obrazów na podstawie rozdzielczości ekranu, rozmiaru widocznego obszaru i innych czynników.
Podsumowanie
- Używaj obrazu, który najlepiej pasuje do właściwości wyświetlacza, biorąc pod uwagę rozmiar ekranu, rozdzielczość urządzenia i układ strony.
- Zmień właściwość
background-imagew kodzie CSS dla wyświetlaczy o wysokiej rozdzielczości, używając zapytań o media zmin-resolutioni-webkit-min-device-pixel-ratio. - Użyj srcset, aby oprócz obrazu 1x w znacznikach udostępnić obrazy w wysokiej rozdzielczości.
- Weź pod uwagę koszty związane z wydajnością, gdy używasz technik zastępowania obrazów za pomocą JavaScriptu lub gdy wyświetlasz mocno skompresowane obrazy o wysokiej rozdzielczości na urządzeniach o niższej rozdzielczości.
Używanie zapytań o media do warunkowego wczytywania obrazów lub kierunku artystycznego
Zapytania o multimedia wpływają nie tylko na układ strony. Możesz ich też używać do warunkowego wczytywania obrazów lub do określania kierunku artystycznego w zależności od szerokości widocznego obszaru.
Na przykład w poniższym przykładzie na mniejszych ekranach pobierany jest tylko plik small.png i stosowany do treści div, natomiast na większych ekranach do treści strony stosowany jest plik background-image: url(body.png), a do treści div – plik background-image:
url(large.png).
.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 elementu image-set do dostarczania obrazów w wysokiej rozdzielczości
Funkcja image-set() w CSS rozszerza działanie właściwości background, ułatwiając udostępnianie wielu plików graficznych dla różnych urządzeń. Dzięki temu przeglądarka może wybrać najlepszy obraz w zależności od cech urządzenia, np. użyć obrazu 2x na wyświetlaczu 2x lub obrazu 1x na urządzeniu 2x, gdy sieć ma ograniczoną przepustowość.
background-image: image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
Oprócz wczytania prawidłowego obrazu przeglądarka odpowiednio go skaluje. Innymi słowy, przeglądarka zakłada, że obrazy 2x są 2 razy większe niż obrazy 1x, i skaluje obraz 2x o współczynnik 2, aby obraz wydawał się mieć ten sam rozmiar na stronie.
Obsługa image-set() jest nadal nowa i jest dostępna tylko w Chrome i Safari z prefiksami dostawcy -webkit. Pamiętaj, aby dodać obraz zastępczy na wypadek, gdyby format image-set() nie był 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 kod wczytuje odpowiedni komponent w przeglądarkach, które obsługują image-set. W przeciwnym razie używany jest komponent 1x. Oczywistym zastrzeżeniem jest to, że chociaż obsługa przeglądarek image-set() jest niska, większość przeglądarek otrzymuje zasób 1x.
Używanie zapytań o media w celu dostarczania obrazów o wysokiej rozdzielczości lub wskazówek dotyczących kierunku artystycznego
Zapytania o media mogą tworzyć reguły na podstawie współczynnika pikseli urządzenia, co umożliwia określanie różnych obrazów dla wyświetlaczy 2x i 1x.
@media (min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2)
{
/* High dpi styles & resources here */
}
Chrome, Firefox i Opera obsługują standard (min-resolution: 2dppx),
natomiast Safari i przeglądarki na Androida wymagają starszej składni z prefiksami dostawcy 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 przypadku podstawowego.
Dzięki temu masz pewność, że coś się wyrenderuje, jeśli przeglądarka nie obsługuje zapytań o media zależnych od 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);
}
}
Możesz też użyć składni min-width, aby wyświetlać alternatywne obrazy w zależności od rozmiaru widocznego obszaru. Zaletą tej metody jest to, że obraz nie jest pobierany, jeśli zapytanie o media nie pasuje. Na przykład plik bg.png jest pobierany i stosowany do elementu body tylko wtedy, gdy szerokość przeglądarki wynosi co najmniej 500 pikseli:
@media (min-width: 500px) {
body {
background-image: url(bg.png);
}
}
Używanie SVG w przypadku ikon
Dodając ikony do strony, używaj w miarę możliwości ikon SVG lub w niektórych przypadkach znaków Unicode.
Podsumowanie
- Zamiast obrazów rastrowych używaj ikon w formacie SVG lub Unicode.
Zastąp proste ikony znakami Unicode
Wiele czcionek obsługuje mnóstwo glifów Unicode, których można używać zamiast obrazów. W przeciwieństwie do obrazów czcionki Unicode dobrze się skalują i wyglądają dobrze niezależnie od tego, jak małe lub duże są na ekranie.
Oprócz standardowego zestawu znaków Unicode może zawierać symbole strzałek (←), operatorów matematycznych (√), kształtów geometrycznych (★), obrazów sterujących (▶), notacji muzycznej (♬), liter greckich (Ω), a nawet figur szachowych (♞).
Znak Unicode jest dołączany w taki sam sposób jak encje nazwane: &#XXXX, gdzie XXXX reprezentuje numer znaku Unicode. Na przykład:
You're a super ★
You're a super ★
Zastępowanie złożonych ikon grafiką SVG
W przypadku bardziej złożonych wymagań dotyczących ikon ikony SVG są zazwyczaj lekkie, łatwe w użyciu i można je stylizować za pomocą CSS. Pliki SVG mają 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, cieniowanie, przezroczystość i animacje, są proste.
- Obrazy SVG można umieszczać bezpośrednio w dokumencie.
- Są semantyczne.
- Zapewniają lepszą dostępność dzięki odpowiednim atrybutom.
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">.
Ostrożnie używaj czcionek ikon
Czcionki ikon są popularne i łatwe w użyciu, ale mają pewne wady w porównaniu z ikonami SVG:
- Są to grafiki wektorowe, które można skalować w nieskończoność, ale mogą być poddawane antyaliasingowi, co powoduje, że ikony nie są tak ostre, jak oczekiwano.
- Ograniczone możliwości stylizacji za pomocą CSS.
- Precyzyjne pozycjonowanie może być trudne w zależności od wysokości wiersza, odstępów między literami itp.
- Nie są semantyczne i mogą być trudne w użyciu z czytnikami ekranu lub innymi technologiami wspomagającymi osoby z niepełnosprawnością.
- Jeśli nie zostaną odpowiednio ograniczone, mogą spowodować, że plik będzie miał duży rozmiar, mimo że używany jest tylko niewielki podzbiór 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 zrównoważyć obciążenie związane z dodatkowym żądaniem HTTP i rozmiarem pliku z potrzebą użycia ikon. Jeśli na przykład potrzebujesz tylko kilku ikon, lepiej użyć obrazu lub sprite'a.
Optymalizowanie obrazów pod kątem skuteczności
Obrazy często stanowią większość pobranych bajtów i zajmują znaczną część przestrzeni wizualnej na stronie. W rezultacie optymalizacja obrazów może często przynieść największe oszczędności bajtów i poprawę wydajności witryny: im mniej bajtów przeglądarka musi pobrać, tym mniejsze jest obciążenie przepustowości klienta i tym szybciej przeglądarka może pobrać i wyświetlić wszystkie zasoby.
Podsumowanie
- Nie wybieraj formatu pliku graficznego losowo – zapoznaj się z różnymi dostępnymi formatami i użyj tego, który najlepiej pasuje do Twoich potrzeb.
- Uwzględnij w przepływie pracy narzędzia do optymalizacji i kompresji obrazów, aby zmniejszyć rozmiary plików.
- Zmniejsz liczbę żądań HTTP, umieszczając często używane obrazy w duszkach.
- Aby skrócić czas wczytywania strony i zmniejszyć jej początkową wagę, rozważ wczytywanie obrazów dopiero po ich przewinięciu do widoku.
Wybierz odpowiedni format
Istnieją 2 rodzaje obrazów:
obrazy wektorowe
i obrazy rastrowe.
W przypadku obrazów rastrowych musisz też wybrać odpowiedni format kompresji, np. GIF, PNG, JPG.
Obrazy rastrowe, takie jak zdjęcia i inne obrazy, są reprezentowane jako siatka pojedynczych punktów lub pikseli. Obrazy rastrowe zwykle pochodzą z aparatu lub skanera albo mogą być tworzone w przeglądarce za pomocą elementu canvas. Wraz ze wzrostem rozmiaru obrazu rośnie też rozmiar pliku. Po powiększeniu ponad oryginalny rozmiar obrazy rastrowe stają się rozmyte, ponieważ przeglądarka musi zgadywać, jak wypełnić brakujące piksele.
Obrazy wektorowe, takie jak logo i grafika liniowa, są definiowane przez zestaw krzywych, linii, kształtów i kolorów wypełnienia. Obrazy wektorowe są tworzone w programach takich jak Adobe Illustrator lub Inkscape i zapisywane w formacie wektorowym, np. SVG. Obrazy wektorowe są tworzone na podstawie prostych elementów podstawowych, więc można je skalować bez utraty jakości i zmiany rozmiaru pliku.
Wybierając odpowiedni format, należy wziąć pod uwagę zarówno pochodzenie obrazu (rastrowy lub wektorowy), jak i jego zawartość (kolory, animacje, tekst itp.). Nie ma jednego formatu, który pasowałby do wszystkich typów obrazów, a każdy z nich ma swoje mocne i słabe strony.
Wybierając odpowiedni format, zacznij od tych wskazówek:
- W przypadku zdjęć używaj formatu
JPG. - Używaj formatu
SVGw przypadku grafiki wektorowej i grafiki jednokolorowej, takiej jak logo i grafika liniowa. Jeśli sztuka wektorowa jest niedostępna, spróbuj użyć styluWebPlubPNG. - Używaj formatu
PNGzamiastGIF, ponieważ pozwala on na uzyskanie większej liczby kolorów i zapewnia lepsze współczynniki kompresji. - W przypadku dłuższych animacji rozważ użycie formatu
<video>, który zapewnia lepszą jakość obrazu i daje użytkownikowi kontrolę nad odtwarzaniem.
Zmniejsz rozmiar pliku.
Możesz znacznie zmniejszyć rozmiar pliku graficznego, poddając go „post-processingowi” po zapisaniu. Istnieje wiele narzędzi do kompresji obrazów – stratnej i bezstratnej, online, z interfejsem graficznym i wierszem poleceń. Jeśli to możliwe, najlepiej jest zautomatyzować optymalizację obrazów, aby była ona wbudowana w proces roboczy.
Dostępnych jest kilka narzędzi, które umożliwiają dalszą bezstratną kompresję plików JPG i PNG bez wpływu na jakość obrazu. W przypadku plików JPG wypróbuj jpegtran lub jpegoptim (dostępne tylko w systemie Linux; uruchom z opcją --strip-all). W przypadku plików PNG wypróbuj OptiPNG lub PNGOUT.
Używanie duszków obrazu
Technika sprite'ów CSS polega na połączeniu kilku obrazów w jeden „arkusz sprite”. Możesz następnie używać poszczególnych obrazów, określając obraz tła elementu (arkusz sprite) i przesunięcie, aby wyświetlić odpowiednią 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;
}
Zaletą spritingu jest zmniejszenie liczby pobrań wymaganych do uzyskania wielu obrazów przy jednoczesnym umożliwieniu buforowania.
Rozważ leniwe ładowanie
Leniwe ładowanie może znacznie przyspieszyć wczytywanie długich stron, które zawierają wiele obrazów w części strony widocznej po przewinięciu, ponieważ obrazy te są wczytywane w miarę potrzeb lub po zakończeniu wczytywania i renderowania głównej zawartości. Oprócz poprawy wydajności leniwe ładowanie może też zapewnić wrażenia związane z przewijaniem nieskończonym.
Zachowaj ostrożność podczas tworzenia stron z przewijaniem nieskończonym – ponieważ treść jest ładowana, gdy staje się widoczna, wyszukiwarki mogą jej nigdy nie zobaczyć. Ponadto użytkownicy, którzy szukają informacji, które powinny znajdować się w stopce, nigdy jej nie zobaczą, ponieważ zawsze będą się ładować nowe treści.
Unikaj obrazów
Czasami najlepszym obrazem nie jest wcale obraz. Jeśli to możliwe, używaj natywnych funkcji przeglądarki, aby zapewnić takie same lub podobne funkcje. Przeglądarki generują elementy wizualne, które wcześniej wymagały obrazów. Oznacza to, że przeglądarki nie muszą już pobierać osobnych plików graficznych, co zapobiega nieprawidłowemu skalowaniu obrazów. Do renderowania ikon możesz używać czcionek Unicode lub specjalnych czcionek ikon.
Umieszczanie tekstu w znacznikach, a nie w obrazach
O ile to możliwe, tekst powinien być tekstem, a nie elementem obrazu. Na przykład używanie obrazów jako nagłówków lub umieszczanie informacji kontaktowych, takich jak numery telefonów czy adresy, bezpośrednio w obrazach uniemożliwia użytkownikom kopiowanie i wklejanie tych informacji. Sprawia też, że informacje te są niedostępne dla czytników ekranu i nie są responsywne. Zamiast tego umieść tekst w znacznikach i w razie potrzeby użyj czcionek internetowych, aby uzyskać odpowiedni styl.
Zastępowanie obrazów za pomocą CSS
Nowoczesne przeglądarki mogą używać funkcji CSS do tworzenia stylów, które wcześniej wymagałyby obrazów. Na przykład: złożone gradienty można tworzyć za pomocą właściwości background, cienie – za pomocą właściwości box-shadow, a zaokrąglone rogi 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 stosowanie tych technik wymaga cykli renderowania, które mogą być znaczące na urządzeniach mobilnych. Jeśli będziesz używać go zbyt często, utracisz wszelkie korzyści, które udało Ci się uzyskać, i może to negatywnie wpłynąć na skuteczność.