{"id":13334,"date":"2022-02-03T09:01:23","date_gmt":"2022-02-03T08:01:23","guid":{"rendered":"https:\/\/www.nazwa.pl\/blog\/?p=13334"},"modified":"2022-07-04T11:28:53","modified_gmt":"2022-07-04T09:28:53","slug":"prezentuj-mniejsze-obrazki-w-formacie-webp","status":"publish","type":"post","link":"https:\/\/www.nazwa.pl\/blog\/prezentuj-mniejsze-obrazki-w-formacie-webp","title":{"rendered":"Prezentuj mniejsze obrazki w formacie WebP"},"content":{"rendered":"

Pliki graficzne mo\u017cna zapisywa\u0107 w bardzo wielu formatach. Do najpopularniejszych nale\u017c\u0105 GIF, PNG, JPG i WebP. Ten ostatni, stworzony przez Google, doskonale sprawdza si\u0119 w przypadku stron internetowych. Pozwala na lepszy poziom kompresji obraz\u00f3w, przy zachowaniu ich por\u00f3wnywalnej jako\u015bci. A poniewa\u017c a\u017c 80% czasu potrzebnego na wczytanie strony WWW zajmuje przesy\u0142anie plik\u00f3w mi\u0119dzy serwerem, na kt\u00f3rym jest strona, a przegl\u0105dark\u0105 WWW, warto skorzysta\u0107 w\u0142a\u015bnie z WebP, aby przyspieszy\u0107 dzia\u0142anie swojej witryny.<\/p>\n

WebP vs inne formaty plik\u00f3w<\/strong><\/h2>\n

Je\u017celi zastanawiasz si\u0119, czy korzystanie z WebP przyniesie wymierne korzy\u015bci w postaci zmniejszenia rozmiaru plik\u00f3w graficznych na Twojej stronie WWW, pozw\u00f3l, \u017ce zaczniemy od por\u00f3wnania tego formatu do innych popularnych sposob\u00f3w zapisu grafik wykorzystywanych w Internecie. I tak, pliki zapisane w WebP, w por\u00f3wnaniu do plik\u00f3w JPG o zbli\u017conej jako\u015bci, b\u0119d\u0105 od nich mniejsze do 35%. To bardzo du\u017ca r\u00f3\u017cnica. JPG jest popularnym formatem wykorzystywanym na przyk\u0142ad do zapisu zdj\u0119\u0107 wykonywanych smartfonami czy aparatami cyfrowymi. Gdy takie zdj\u0119cie zapisane w formacie JPG zajmuje oko\u0142o 3 MB, po konwersji do WebP jego rozmiar zmniejszy si\u0119 do 2 MB!<\/p>\n

Innym popularnym formatem stosowanym w\u015br\u00f3d tw\u00f3rc\u00f3w stron WWW jest PNG. Podobnie jak WebP obs\u0142uguje on prze\u017aroczysto\u015b\u0107, co jest wa\u017cne przy projektowaniu witryn. Prze\u017aroczysto\u015b\u0107 umo\u017cliwia u\u017cycie tej samej grafiki w ramach kilku warstw na stronie WWW. Zmieniaj\u0105c kompresj\u0119 z PNG na WebP, mo\u017cemy liczy\u0107 na spadek rozmiaru pliku o oko\u0142o 25%, zak\u0142adaj\u0105c t\u0119 sam\u0105 jako\u015b\u0107 grafiki, co w przypadku PNG. Podobnie rzecz si\u0119 ma, gdy we\u017amiemy pod uwag\u0119 format GIF, od kt\u00f3rego WebP b\u0119dzie lepszy przy zapisie statycznych obraz\u00f3w.<\/p>\n

\r\n
\r\n
\r\n \"Odbierz\r\n <\/div>\r\n
\r\n Odbierz Voucher<\/span>\r\n na CloudHosting z CDN w Polsce<\/span>\r\n i aktywuj serwer a\u017c 80% taniej!<\/strong><\/span>\r\n Pobierz Voucher<\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\n

Wiele typ\u00f3w urz\u0105dze\u0144 \u2013 wiele wersji tego samego obrazka<\/strong><\/h2>\n

Mo\u017cna powiedzie\u0107, \u017ce \u017cyjemy mobilnie. Ka\u017cdego dnia korzystamy z kilku r\u00f3\u017cnych urz\u0105dze\u0144, za pomoc\u0105 kt\u00f3rych mo\u017cemy wy\u015bwietla\u0107 strony WWW. S\u0105 to i laptopy, i komputery stacjonarne, i smartfony, i tablety. Ka\u017cde z nich ma inn\u0105 rozdzielczo\u015b\u0107 i inny rozmiar ekranu. Smartfony maj\u0105 ekrany \u015brednio 5 calowe, tablety 10 calowe, laptopy na og\u00f3\u0142 15-16 calowe, a monitory do komputer\u00f3w stacjonarnych \u2013 nawet 20 czy 30 calowe. Nie zapominajmy te\u017c o telewizorach z funkcjami Smart, kt\u00f3re mog\u0105 s\u0142u\u017cy\u0107 nam jako przegl\u0105darka strony WWW. W tych ostatnich liczba cali nierzadko przekracza kilkadziesi\u0105t.<\/p>\n

\"<\/p>\n

Skoro grafiki zajmuj\u0105 \u015brednio 70% ka\u017cdej strony internetowej, przed webmasterami i w\u0142a\u015bcicielami stron stoi nie lada wyzwanie – trzeba sprosta\u0107 oczekiwaniom ka\u017cdego pojedynczego u\u017cytkownika, godz\u0105c rozmiar grafiki, kt\u00f3r\u0105 umieszcza si\u0119 na serwerze, z w\u0142a\u015bciw\u0105 szybko\u015bci\u0105 jej \u0142adowania i odpowiedni\u0105 jako\u015bci\u0105, kt\u00f3ra pozwoli na wy\u015bwietlenie obrazu bez strat na ka\u017cdym urz\u0105dzeniu.<\/p>\n

W\u0142a\u015bciwa optymalizacja grafik to umieszczenie na stronie nie tylko jednego obrazu w mniejszym rozmiarze, ale jest to przygotowanie kilku wersji tej samej grafiki stworzonych pod konkretn\u0105 rozdzielczo\u015b\u0107 ekranu, na kt\u00f3rym wy\u015bwietlana jest strona. Dzi\u0119ki mo\u017cliwo\u015bci odczytania przez serwer informacji, z jakim ekranem aktualnie ma on do czynienia, do u\u017cytkownika w takim przypadku b\u0119dzie wys\u0142any odpowiedni plik dobrany nie tylko pod wzgl\u0119dem w\u0142a\u015bciwego formatu zapisu, ale r\u00f3wnie\u017c pod wzgl\u0119dem rozdzielczo\u015bci. Oznacza to, \u017ce poza przekonwertowaniem obraz\u00f3w do nowoczesnego formatu WebP, konieczne jest przygotowanie kilku wersji ka\u017cdej grafiki i zapisanie ich wszystkich na serwerze.<\/p>\n

Odpowiednio przygotowany i wgrany na serwer w kilku rozmiarach obrazek wymaga w\u0142a\u015bciwego oprogramowania w kodzie strony, tak, aby serwer przesy\u0142a\u0142 do przegl\u0105darki u\u017cytkownika grafik\u0119 odpowiednio dobran\u0105 pod wzgl\u0119dem rozdzielczo\u015bci ekranu. Z pomoc\u0105 przychodzi HTML5, dzi\u0119ki kt\u00f3remu mi\u0119dzy znacznikami <picture> musimy umie\u015bci\u0107 informacje o naszej grafice. Korzystaj\u0105c z <source> podajemy maksymaln\u0105 rozdzielczo\u015b\u0107, dla kt\u00f3rej ma by\u0107 wysy\u0142any przez serwer okre\u015blony plik, a za pomoc\u0105 <img> definiujemy grafik\u0119 domy\u015bln\u0105.<\/p>\n

Przyk\u0142ad:<\/u><\/p>\n

<picture<\/span>>
\n<source media=”(max-width: 400px)” srcset=”obrazek-do-400px.webp”>
\n<source media=”(max-width: 800px)” srcset=”obrazek-do-800px.webp”>
\n<img src=”obrazek.webp” style=”width:auto” alt=”Moja grafika”>
\n<\/picture<\/span>><\/div>\n

Dzi\u0119ki zastosowaniu powy\u017cszego kodu, na ekranach do szeroko\u015bci 400 px wy\u015bwietlony b\u0119dzie obrazek o nazwie obrazek-do-400px.webp, na ekranach mi\u0119dzy 400 px a 800 px \u2013 obrazek-do-800px.webp, a na ekranach o wi\u0119kszej rozdzielczo\u015bci \u2013 obrazek.webp. Wszystkie trzy obrazki trzeba uprzednio przygotowa\u0107 i wgra\u0107 na serwer, tak samo, jak trzeba przygotowa\u0107 i opublikowa\u0107 zmiany w kodzie naszej strony.<\/p>\n

Mo\u017cna samemu, mo\u017cna automatycznie<\/strong><\/h2>\n

O ile przekonwertowanie obraz\u00f3w z innych, u\u017cywanych przez nas format\u00f3w graficznych do WebP jest w zasadzie jednorazow\u0105 czynno\u015bci\u0105, to ju\u017c ich optymalizacja \u2013 nie tylko pod wzgl\u0119dem rozmiaru, ale te\u017c estetyki (jako\u015bci) \u2013 mo\u017ce wymaga\u0107 od nas bardzo du\u017co pracy. Trzeba wzi\u0105\u0107 tu pod uwag\u0119 konieczno\u015b\u0107 wykonania kilku wersji tego samego obrazka, zapisania go z odpowiednimi parametrami na serwerze,\u00a0 przechowywania go tam przez ca\u0142y czas kiedy b\u0119dzie wy\u015bwietlany oraz wykonania zmian w kodzie strony WWW. Przy ma\u0142o rozbudowanych stronach takie czynno\u015bci pomimo \u017ce s\u0105 czasoch\u0142onne, to s\u0105 do wykonania. Mog\u0105 jednak skutecznie utrudnia\u0107 prac\u0119 zwi\u0105zan\u0105 z obs\u0142ug\u0105 cz\u0119sto aktualizowanych i rozbudowanych serwis\u00f3w.<\/p>\n

A gdyby mo\u017cna by\u0142o to wszystko zrobi\u0107 za pomoc\u0105 jednego klikni\u0119cia… Brzmi jak \u017cyczenie? By\u0107 mo\u017ce, ale na pewno nie w nazwa.pl! Ot\u00f3\u017c jednym z najbardziej komfortowych rozwi\u0105za\u0144 jest skorzystanie z funkcji konwersji do formatu webp i zmiany wielko\u015bci obraz\u00f3w<\/strong>, kt\u00f3ra jest dost\u0119pna dla u\u017cytkownik\u00f3w serwer\u00f3w CloudHosting oraz u\u017cytkownik\u00f3w us\u0142ugi CDN nazwa.pl.<\/p>\n

\"Jak<\/p>\n

W\u0142a\u015bciciele serwis\u00f3w internetowych obs\u0142ugiwanych czy to na serwerach CloudHostingu, czy to korzystaj\u0105cych z us\u0142ugi CDN nazwa.pl, nie musz\u0105 samodzielnie optymalizowa\u0107 materia\u0142\u00f3w graficznych. Zrobi to za nich nasza funkcja, dzi\u0119ki kt\u00f3rej obrazy s\u0105<\/strong> automatycznie konwertowane do formatu <\/strong>WebP<\/strong>, a ich rozmiar jest dostosowywany do rozdzielczo\u015bci urz\u0105dzenia osoby wchodz\u0105cej na stron\u0119 WWW<\/strong>. Sama aktywacja funkcji odbywa si\u0119 za pomoc\u0105 Panelu Klienta nazwa.pl w ramach ustawie\u0144 serwera CloudHosting (je\u017celi posiadasz w nazwa.pl sw\u00f3j hosting) lub ustawie\u0144 us\u0142ugi CDN nazwa.pl (je\u017celi korzystasz z sieci CDN nazwa.pl, ale sam hosting masz w innej firmie).<\/p>\n

\n

KONIECZNIE PRZECZYTAJ NA BLOGU:<\/span><\/p>\n