Obraz jest wart 1000 słów, a obrazy stanowią integralną część każdej strony. Często stanowią one też większość pobranych bajtów. Dzięki elastycznemu projektowaniu witryn można zmieniać układ nie tylko w zależności od charakterystyki urządzenia, ale także w odniesieniu do obrazów.
Elastyczne projektowanie witryn oznacza, że układ może się nie tylko zmieniać 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 w wysokiej rozdzielczości zapewnia ostrość. Obraz o szerokości 50% może się sprawdzić w przypadku przeglądarki o szerokości 800 pikseli, ale zajmuje za dużo miejsca na wąskim telefonie i wymaga odpowiedniej przepustowości łącza po zmniejszeniu do rozmiaru mniejszego ekranu.
Kierunek sztuki
Czasem może się zdarzyć, że konieczna będzie bardziej drastyczna zmiana obrazu: zmodyfikowanie jego proporcji, przycięcie, a nawet zastąpienie całego obrazu. W tym przypadku zmiana obrazu określa się zwykle mianem kierunku sztuki. Więcej przykładów znajdziesz na stronie responsiveimages.org/demos/.
Obrazy elastyczne
Czy wiesz, że obrazy odpowiadają za średnio ponad 60% bajtów niezbędnych do załadowania strony internetowej?
Podczas tego kursu dowiesz się, jak pracować z obrazami we współczesnym internecie, by wyglądały one dobrze i szybko się ładowały na każdym urządzeniu.
Nauczysz się też korzystać z wielu umiejętności i technik, które pozwolą Ci płynnie zintegrować elastyczne obrazy z procesem programowania. Po zakończeniu kursu będziesz tworzyć obrazy, które dostosowują się do różnych rozmiarów widocznego obszaru i scenariuszy użycia.
To bezpłatny kurs dostępny w witrynie Udacity
Obrazy w znacznikach
Element img jest potężny – pobiera, dekoduje i renderuje treść. 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, aby zapewnić wygodę korzystania z usługi.
Podsumowanie
- Używaj względnych rozmiarów obrazów, aby zapobiec przypadkowemu przekroczeniu kontenera.
- Elementu
pictureużywaj, gdy chcesz określać różne obrazy w zależności od charakterystyki urządzenia (lub kierunek grafiki). - Użyj właściwości
srcseti deskryptoraxw elemencieimg, aby poinformować przeglądarkę o tym, który obraz ma najlepiej skorzystać z różnych gęstości. - Jeśli strona zawiera tylko 1 lub 2 obrazy i nie są one używane w innym miejscu w witrynie, rozważ użycie obrazów wbudowanych, aby zmniejszyć liczbę żądań plików.
Używaj względnych rozmiarów obrazów
Pamiętaj, aby przy określaniu szerokości obrazów używać jednostek względnych, aby zapobiec przypadkowemu przekroczeniu widocznego obszaru. Na przykład właściwość width: 50%; powoduje, że szerokość obrazu wynosi 50% elementu zawierającego (nie 50% widocznego obszaru lub 50% rzeczywistego rozmiaru w pikselach).
CSS pozwala zawartość nie wykraczać poza kontener, więc może być konieczne użycie wartości max-width: 100%, by obrazy i inne treści nie wystawiły się poza kontener. Na przykład:
img, embed, object, video {
max-width: 100%;
}
Zadbaj o to, aby za pomocą atrybutu alt elementów img podawać miarodajne opisy. Dzięki temu Twoja witryna stanie się bardziej dostępna, ponieważ jej kontekst będzie dostępny dla czytników ekranu i innych technologii wspomagających osoby z niepełnosprawnością.
Zwiększ jakość img s za pomocą srcset na urządzeniach o wysokiej rozdzielczości DPI
Atrybut srcset wzmacnia działanie elementu img, ułatwiając podawanie wielu plików graficznych o różnych cechach urządzenia. Podobnie jak image-set
funkcja CSS
natywna w CSS, srcset umożliwia przeglądarce wybór najlepszego obrazu w zależności od charakterystyki urządzenia, np. użycie obrazu dwukrotnego na wyświetlaczu dwukrotnym, a w przyszłości również obrazu 1x na urządzeniu 2x przy 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 tak ważne jest, aby zawsze zawierać obraz 1x, który będzie wyświetlany na każdym urządzeniu, niezależnie od jego możliwości. Jeśli funkcja srcset jest obsługiwana, przed wysłaniem jakichkolwiek żądań analizowana jest rozdzielona przecinkami lista zdjęć/stanów. Pobierane są i wyświetlane tylko najbardziej odpowiednie zdjęcia.
Warunki mogą obejmować wszystko, od gęstości pikseli po szerokość i wysokość, ale obecnie dobrze obsługiwana jest tylko gęstość pikseli. Aby zrównoważyć obecne zachowanie z przyszłymi funkcjami, prześlij tylko obraz podwójny w atrybucie.
Kierunek artystyczny w obrazach elastycznych – picture
Aby zmieniać obrazy na podstawie charakterystyki urządzenia (nazywanego też kierunkiem artystycznym), użyj elementu picture. Element picture określa deklaratywne rozwiązanie umożliwiające przesyłanie 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 o różnych gęstościach lub gdy elastyczny projekt dyktuje nieco inny obraz na niektórych rodzajach ekranów. Podobnie jak w przypadku elementu video można uwzględnić wiele elementów source, co pozwala określić 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 przykładzie powyżej szerokość przeglądarki to co najmniej 800 pikseli, w zależności od rozdzielczości urządzenia używana jest wartość head.jpg lub head-2x.jpg. Jeśli rozmiar przeglądarki mieści się w przedziale od 450 do 800 pikseli, w zależności od rozdzielczości urządzenia też jest używana opcja head-small.jpg lub head-small-
2x.jpg. W przypadku szerokości ekranu mniejszych niż 450 pikseli i zgodności wstecznej, gdy element picture nie jest obsługiwany, przeglądarka renderuje element img i powinna być zawsze uwzględniana.
Obrazy o względnym rozmiarze
Jeśli końcowy rozmiar obrazu nie jest znany, może być trudno określić deskryptor gęstości dla źródeł obrazu. Dotyczy to zwłaszcza obrazów, które rozciągają się proporcjonalnie na szerokość przeglądarki i są elastyczne w zależności od rozmiaru przeglądarki.
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 i rozmiar elementu obrazu. Umożliwi to przeglądarce automatyczne obliczenie efektywnej gęstości pikseli i wybranie najlepszego obrazu 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"), a w zależności od szerokości przeglądarki i współczynnika piksela urządzenia pozwala przeglądarce wybrać właściwy obraz niezależnie od tego, jak duże jest okno przeglądarki. Na przykład w poniższej tabeli widać, który obraz wybrałby przeglądarka:
| Szerokość przeglądarki | Współczynnik pikseli urządzenia | Użyto obrazu | Efektywna rozdzielczość |
|---|---|---|---|
| 400 piks. | 1 | 200.jpg |
1x |
| 400 piks. | 2 | 400.jpg |
2 x |
| 320 piks. | 2 | 400.jpg |
2,5× |
| 600 piks. | 2 | 800.jpg |
2,67x |
| 640 piks. | 3 | 1000.jpg |
3,125x |
| 1100 piks. | 1 | 800.png |
1,45× |
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 na małym ekranie może być tak, że obraz rozciąga się na całą szerokość widocznego obszaru, a na większych ekranach powinien robić tylko niewielką proporcję.
<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 korzysta z kilku zapytań o multimedia, aby określić rozmiar obrazu. Jeśli szerokość przeglądarki przekracza 600 pikseli, obraz zajmuje 25% szerokości widocznego obszaru. Od 500 do 600 pikseli zajmuje 50% szerokości widocznego obszaru, a poniżej 500 pikseli ma pełną szerokość.
Rozwijanie zdjęć produktów
Klienci chcą widzieć, co kupują. W witrynach handlowych użytkownicy spodziewają się, że będą mogli oglądać zbliżenia produktów w wysokiej rozdzielczości, aby lepiej orientować się w szczegółach. Jeśli nie będą mogli tego zrobić, uczestnicy badania będą frustrowani.
Dobrym przykładem możliwych do kliknięcia, rozwijalnych obrazów jest interfejs J. Witryna ekipy. Znikające nakładki oznaczają, że obraz można kliknąć, co daje mu obraz w powiększeniu z widocznymi drobnymi szczegółami.
Inne techniki obrazu
Kompresyjne obrazy
Metoda kompresji obrazów przesyła na wszystkie urządzenia bardzo skompresowane podwójne obrazy, niezależnie od ich możliwości. W zależności od typu obrazu i poziomu kompresji jakość obrazu może się nie zmieniać, ale znacznie rozmiar pliku się zmniejsza.
Zastępowanie obrazów JavaScript
Zastępowanie obrazów w JavaScript sprawdza możliwości urządzenia i „działa prawidłowo”. Za pomocą funkcji window.devicePixelRatio możesz określić współczynnik pikseli urządzenia, sprawdzić szerokość i wysokość ekranu, a nawet wykryć połączenia sieciowe za pomocą navigator.connection lub wysłać fałszywe żądanie. Po zebraniu wszystkich tych informacji możesz zdecydować, który obraz wczytać.
Jedną z dużych wad tego podejścia jest to, że używanie JavaScriptu powoduje opóźnienie wczytywania obrazu do momentu zakończenia działania parsera wyświetlanego z wyprzedzeniem. Oznacza to, że pobieranie obrazów rozpocznie się dopiero po uruchomieniu zdarzenia pageload. Dodatkowo przeglądarka prawdopodobnie pobierze zarówno obraz 1x, jak 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. Ma to wpływ na elastyczne wdrażanie obrazów.
Obrazy rastrowe, np. fotografie i inne obrazy, są prezentowane w postaci siatki składającej się z pojedynczych kolorowych kropek. Obrazy rastrowe mogą pochodzić z aparatu lub skanera albo tworzyć za pomocą elementu HTML canvas. Obrazy rastrowe są przechowywane w takich formatach jak PNG, JPEG i WebP.
Obrazy wektorowe, takie jak logo i grafika linii, to zbiór 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, albo pisać odręcznie w kodzie w formacie wektorowym, np. SVG.
SVG
SVG umożliwia umieszczenie na stronie internetowej elastycznej grafiki wektorowej. Zaletą plików wektorowych w stosunku do plików rastrowych jest to, że przeglądarka może renderować te obrazy o dowolnym rozmiarze. Formaty wektorowe opisują geometrię obrazu – formę z linii, krzywych, kolorów itd. Formaty rastrowe zawierają natomiast tylko informacje o poszczególnych kolorach, więc przeglądarka musi zgadnąć, jak przy skalowaniu uzupełnić puste pola.
Poniżej znajdziesz 2 wersje tego samego obrazu: obraz PNG po lewej i SVG po prawej. Obraz SVG wygląda świetnie w każdym rozmiarze, a obraz PNG obok niego zaczyna się rozmyć przy większych rozmiarach wyświetlacza.
Jeśli chcesz zmniejszyć liczbę żądań plików wysyłanych przez Twoją stronę, możesz umieszczać w kodzie obrazy w formacie SVG lub identyfikatora URI danych. Jeśli wyświetlisz źródło tej strony, zobaczysz, że oba te logo są zadeklarowane w tekście: identyfikator URI danych i kod SVG.
Format SVG ma świetną obsługę na urządzeniach mobilnych i komputerach, a narzędzia do optymalizacji pozwalają znacznie zmniejszyć rozmiar SVG. Te 2 wbudowane logo SVG wyglądają identycznie, ale jedno z nich ma 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 formacie 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 „przeciągnij i upuść”, takie jak jpillora.com/base64-encoder, umożliwia konwertowanie plików binarnych, np. obrazów, na identyfikatory URI danych. Podobnie 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 można też uwzględnić w kodzie CSS. Ta funkcja jest obsługiwana 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, jeden plik SVG:
Zalety i wady umieszczenia
Kod wbudowany w obrazy może być szczegółowy – zwłaszcza identyfikatory URI danych – dlaczego więc warto go używać? Żeby zmniejszyć liczbę żądań HTTP, Pliki SVG i identyfikatory URI danych umożliwiają pobieranie całej strony internetowej, w tym obrazów, arkuszy CSS i JavaScriptu, za pomocą jednego żądania.
Wady:
- Na urządzeniach mobilnych identyfikatory URI danych mogą być wyświetlane wolniej niż obrazy z zewnętrznego typu
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 przez IE 6 i 7. Niekompletna obsługa w IE8.
- W przypadku HTTP/2 zmniejszenie liczby żądań zasobów ma niższy priorytet.
Tak jak w przypadku innych rozwiązań, musisz sprawdzić, co działa najlepiej. Za pomocą narzędzi dla programistów możesz mierzyć rozmiar pliku do pobrania, liczbę żądań i łączny czas oczekiwania. Identyfikatory URI danych przydają się czasem 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 powtarzanie ich, a także inne funkcje. W połączeniu z zapytaniami o multimedia właściwość tła staje się jeszcze bardziej wydajna, umożliwiając warunkowe wczytywanie obrazu m.in. na podstawie rozdzielczości ekranu i rozmiaru widocznego obszaru.
Podsumowanie
- Użyj obrazu najlepiej pasującego do charakteru wyświetlacza, weź pod uwagę rozmiar ekranu, rozdzielczość urządzenia i układ strony.
- Zmień właściwość
background-imagew CSS w przypadku wyświetlaczy o wysokiej wartości DPI za pomocą zapytań o multimedia z elementamimin-resolutioni-webkit-min-device-pixel-ratio. - Użyj atrybutu srcset, aby oprócz obrazu 1x dodać w znacznikach również obrazy o wysokiej rozdzielczości.
- Podczas korzystania z metod zastępowania obrazów JavaScript lub wyświetlania wysoce skompresowanych obrazów o wysokiej rozdzielczości na urządzeniach o niższej rozdzielczości weź pod uwagę koszty wydajności.
Używanie zapytań o multimedia do warunkowego wczytywania obrazu lub kierunku grafiki
Zapytania o multimedia wpływają nie tylko na układ strony, ale także do warunkowego wczytywania obrazów lub do wyznaczania kierunku grafiki w zależności od szerokości widocznego obszaru.
Na przykład w przykładzie poniżej na mniejszych ekranach tylko small.png jest pobierany i stosowany do treści div, a na większych ekranach – do treści aplikacji – background-image: url(body.png), a do treści div stosowana jest właściwość 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żywaj zestawu zdjęć, aby przesyłać obrazy w wysokiej rozdzielczości
Funkcja image-set() w CSS ulepsza właściwość background, ułatwiając dodanie 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 właściwości urządzenia, np. na wyświetlaczu 2x lub na urządzeniu 2x (o ograniczonej przepustowości).
background-image: image-set(
url(icon1x.jpg) 1x,
url(icon2x.jpg) 2x
);
Oprócz wczytywania prawidłowego obrazu przeglądarka również go odpowiednio skaluje. Inaczej mówiąc, przeglądarka zakłada, że obrazy 2 razy są 2 razy większe niż obrazy 1 razy, więc skaluje obraz podwójny w dół 2-krotnie w celu uzyskania takiego samego rozmiaru na stronie.
Obsługa 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, np.:
.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 używany jest zasób 1x. Wyraźnym zastrzeżeniem jest to, że chociaż obsługa image-set() w przeglądarkach nie jest obsługiwana, większość przeglądarek uzyskuje zasób 1x.
Używaj zapytań o multimedia, aby wyświetlać obrazy w wysokiej rozdzielczości lub kierunek artystyczny
Zapytania o multimedia mogą tworzyć reguły oparte na współczynniku pikseli urządzenia. Dzięki temu można określać różne obrazy dla wyświetlaczy o wymiarach 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 język (min-resolution: 2dppx), natomiast przeglądarki Safari i Android wymagają starszej składni 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 też pewność, że coś się wyrenderuje, jeśli przeglądarka nie obsługuje zapytań o multimedia związane z konkretną 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 minimalnej szerokości, aby wyświetlać alternatywne obrazy w zależności od rozmiaru widocznego obszaru. Zaletą tej metody jest to, że obraz nie jest pobierany, gdy zapytanie o multimedia nie pasuje. Na przykład parametr bg.png jest pobierany i stosowany do parametru body tylko wtedy, gdy przeglądarka ma szerokość 500 pikseli lub większą:
@media (min-width: 500px) {
body {
background-image: url(bg.png);
}
}
Używaj ikon 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
- Zamiast obrazów rastrowych używaj ikon w formacie SVG lub Unicode.
Zastępowanie prostych ikon kodem Unicode
Wiele czcionek obsługuje wiele glifów 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, niezależnie od tego, 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 (✓), kształtów geometrycznych, (★), obrazów sterujących (▶), notacji muzycznej (♬), greckich liter (・), a nawet pionków (♞).
Znak unicode trzeba dodać tak samo jak encje nazwane:
&#XXXX, gdzie XXXX oznacza numer znaku Unicode. Na przykład:
You're a super ★
Świetnie Ci idzie ★
Zastępowanie złożonych ikon za pomocą SVG
W przypadku bardziej złożonych wymagań związanych z ikonami ikony SVG są zazwyczaj lekkie i łatwe w użyciu. Można w nich też zmieniać styl za pomocą CSS. Obrazy 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, cienie, przezroczystość i animacje, są proste.
- Obrazy SVG można wbudować bezpośrednio w dokument.
- 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">.
Używaj czcionek ikon z rozwagą
Czcionki ikon są popularne i łatwe w obsłudze, 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ż zostać wyeliminowane, co powoduje, że ikony nie są tak ostre, jak się spodziewasz.
- Ograniczone używanie stylów w CSS.
- Doskonałe położenie pikseli może być trudne w zależności od wysokości wiersza, odstępów między literami itp.
- Nie są one semantyczne i mogą być trudne w użyciu z czytnikami ekranu lub innymi technologiami wspomagającymi osoby z niepełnosprawnością.
- Jeśli ich zakres nie jest prawidłowo ograniczony, może to prowadzić do zwiększenia rozmiaru pliku tylko przy użyciu 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 zrównoważyć wagę dodatkowego żądania HTTP i rozmiar pliku z koniecznością używania ikon. Jeśli na przykład potrzebujesz tylko kilku ikon, lepiej użyć obrazu lub obrazu sprite.
Optymalizacja obrazów pod kątem skuteczności
Obrazy często odpowiadają za większość pobranych bajtów i często zajmują znaczną ilość miejsca na stronie. W rezultacie optymalizacja obrazów może często przynieść w witrynie największe korzyści z oszczędności bajtów i poprawy wydajności: im mniej bajtów musi pobierać przeglądarka, tym mniejsza jest konkurencja w zakresie przepustowości klienta i tym szybciej przeglądarka może pobrać i wyświetlić wszystkie zasoby.
Podsumowanie
- Nie wybieraj losowo tylko formatu obrazu – poznaj różne dostępne formaty i wybierz ten, który najlepiej pasuje.
- Aby zmniejszyć rozmiar plików, włącz do swojego przepływu pracy narzędzia do optymalizacji i kompresji obrazów.
- Zmniejsz liczbę żądań HTTP, umieszczając często używane obrazy w sprite'ach obrazów.
- Aby poprawić czas wstępnego wczytywania strony i zmniejszyć jej wagę, rozważ wczytywanie obrazów dopiero wtedy, gdy pojawią się na ekranie.
Wybierz właściwy format
Są 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, np. fotografie i inne obrazy, są przedstawiane jako siatka pojedynczych kropek lub pikseli. Obrazy rastrowe zwykle pochodzą z aparatu lub skanera. Można też je tworzyć w przeglądarce za pomocą elementu canvas. Im większy rozmiar obrazu, tym większy jest rozmiar pliku. Obrazy rastrowe po skalowaniu od ich oryginalnego rozmiaru stają się rozmyte, ponieważ przeglądarka musi odgadnąć, jak uzupełnić brakujące piksele.
Obrazy wektorowe, takie jak logo i grafika linii, 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ą oparte na prostych elementach podstawowych, więc można je skalować bez utraty jakości i rozmiaru pliku.
Wybierając odpowiedni format, należy wziąć pod uwagę zarówno pochodzenie obrazu (rastrowe lub wektorowe), jak i jego zawartość (kolory, animację, tekst itp.). Żaden format nie sprawdzi się we wszystkich typach obrazów, a każdy z nich ma swoje mocne i słabe strony.
Wybierając odpowiedni format, zapoznaj się z tymi wskazówkami:
- Do sfotografowania zdjęć użyj
JPG. - W przypadku grafiki wektorowej i jednolitych kolorów, np. logo i grafiki, używaj
SVG. Jeśli grafika wektorowa jest niedostępna, użyjWebPlubPNG. - Używaj
PNGzamiastGIF, ponieważ pozwala to na więcej kolorów i zapewnia lepsze współczynniki kompresji. - W przypadku dłuższych animacji rozważ użycie właściwości
<video>, która zapewnia lepszą jakość obrazów i daje użytkownikowi kontrolę nad odtwarzaniem.
Zmniejsz rozmiar pliku
Możesz znacznie zmniejszyć rozmiar pliku graficznego, przetwarzając je po zapisaniu. Istnieje wiele narzędzi do kompresji obrazów: stratna i bezstratna, online, GUI czy wiersz poleceń. W miarę możliwości najlepiej jest korzystać z automatyzacji optymalizacji obrazów, aby była ona wbudowaną w Twój przepływ pracy.
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 JPG spróbuj użyć jpegtran lub jpegoptim (dostępne tylko w systemach Linux; uruchamiaj przy użyciu opcji --strip-all). W przypadku PNG wypróbuj OptiPNG lub PNGOUT.
Użyj sprite’ów obrazu
Duszki CSS to technika, w której wiele obrazów jest łączonych w jeden obraz w „arkuszu sprite”. Następnie możesz użyć pojedynczych obrazów, określając obraz tła elementu (arkusza sprite) oraz 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;
}
Spriting ma tę zaletę, że ogranicza liczbę pobrań wymaganych do pobrania 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 wczytywać w razie potrzeby lub po zakończeniu wczytywania i renderowania głównej treści. Oprócz poprawy wydajności zastosowanie leniwego ładowania może pomóc w przewijaniu nieskończonego.
Zachowaj ostrożność przy tworzeniu stron z przewijaniem nieskończonym – ponieważ treść jest wczytywana w chwili, gdy staje się widoczna, wyszukiwarki mogą jej nigdy nie zobaczyć. Poza tym użytkownicy szukający informacji, których spodziewają się znaleźć w stopce, nigdy jej nie widzą, bo nowa treść zawsze jest wczytywana.
Całkowicie unikaj obrazów
Czasami najlepszy obraz w ogóle nie jest obrazem. W miarę możliwości korzystaj z natywnych funkcji przeglądarki, aby udostępnić te same lub podobne funkcje. Przeglądarki generują treści wizualne, które wcześniej wymagały obrazów. Oznacza to, że przeglądarki nie muszą już pobierać osobnych plików graficznych, co zapobiega niewłaściwie skalowaniu obrazów. Ikony można renderować za pomocą czcionek Unicode lub specjalnych.
Umieszczaj tekst w znacznikach, a nie w obrazach.
Tekst powinien być w miarę możliwości tekstowy i nie powinien być osadzony w obrazach. Na przykład użycie obrazów w nagłówkach lub umieszczanie informacji kontaktowych (np. numerów telefonów lub adresów) bezpośrednio w obrazach uniemożliwia użytkownikom ich kopiowanie i wklejanie, a przez to sprawia, że czytniki ekranu nie mają dostępu do tych informacji, a użytkownik nie reaguje. 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 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 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 egestasni 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, co może być istotne na urządzeniach mobilnych. Jeśli będziesz ich używać zbyt dużo, stracisz korzyści i mogą pogarszać skuteczność kampanii.