Poniewa\u017c po\u0142owa danych, kt\u00f3re u\u017cytkownicy musz\u0105 pobra\u0107, gdy przegl\u0105daj\u0105 Twoj\u0105 witryn\u0119, pochodzi z obraz\u00f3w, ka\u017cda optymalizacja, kt\u00f3r\u0105 tutaj przeprowadzisz, mo\u017ce mie\u0107 ogromny wp\u0142yw na wydajno\u015b\u0107 Twojej witryny.<\/p>\n
W rzeczywisto\u015bci, je\u015bli Twoje obrazy nie s\u0105 w og\u00f3le zoptymalizowane, mo\u017cesz zmniejszy\u0107 wag\u0119 obrazu o 50-80%,<\/strong> post\u0119puj\u0105c zgodnie z tym przewodnikiem.<\/p>\n Je\u015bli chodzi o optymalizacj\u0119 obrazu, istniej\u0105 trzy proste techniki.<\/p>\n Pierwszym i najskuteczniejszym sposobem optymalizacji obraz\u00f3w jest ich kompresja.<\/p>\n Kliknij tutaj, aby wypr\u00f3bowa\u0107 ShortPixel dla siebie<\/a><\/p>\n Kompresja obrazu to podstawowy spos\u00f3b optymalizacji grafiki. Je\u015bli post\u0119powa\u0142e\u015b zgodnie z przewodnikiem optymalizacji WP Rocket,<\/a> zapoznasz si\u0119 z wprowadzon\u0105 tam koncepcj\u0105 minifikacji. Kompresja obrazu nie r\u00f3\u017cni si\u0119 tak bardzo.<\/p>\n Podczas kompresji obrazu algorytm zasadniczo przepisuje kod w obrazie, aby zmniejszy\u0107 ca\u0142kowity rozmiar pliku. Istniej\u0105 dwa g\u0142\u00f3wne rodzaje kompresji.<\/p>\n Kompresja bezstratna optymalizuje obrazy, zachowuj\u0105c dok\u0142adnie ten sam wy\u015bwietlacz piksel po pikselu. Nie ma powodu, aby pomija\u0107 kompresj\u0119 bezstratn\u0105, poniewa\u017c zmniejsza ona rozmiar pliku, nie robi\u0105c dos\u0142ownie \u017cadnej wizualnej r\u00f3\u017cnicy.<\/p>\n To powiedziawszy, zaleci\u0142em zamiast tego u\u017cycie kompresji stratnej.<\/p>\n Kompresja stratna zapewnia znacznie wi\u0119ksz\u0105 optymalizacj\u0119, ale kosztem niewielkiego pogorszenia jako\u015bci. Jednak ta utrata jako\u015bci jest tak niewielka, \u017ce \u200b\u200bcz\u0119sto niezauwa\u017calna.<\/p>\n Kompresja bezstratna jest wa\u017cna w przypadku obrazowania medycznego i rysunk\u00f3w technicznych, ale w przypadku obraz\u00f3w wy\u015bwietlanych na stronie internetowej stratna z \u0142atwo\u015bci\u0105 spe\u0142nia nasze standardy jako\u015bci.<\/p>\n Mam zamiar poleci\u0107 wtyczk\u0119 ShortPixel<\/a> do optymalizacji obrazu, kt\u00f3rej u\u017cywam tutaj w Compete Themes. Obejmuje kompresj\u0119 stratn\u0105 i bezstratn\u0105 oraz kompresj\u0119 \u201eb\u0142yszcz\u0105c\u0105”, kt\u00f3ra jest rodzajem opcji po\u015bredniej.<\/p>\n ShortPixel automatycznie kompresuje obrazy podczas przesy\u0142ania ich do witryny, co mo\u017ce by\u0107 naprawd\u0119 wygodne. Jestem raczej niecierpliwy podczas edycji, wi\u0119c wol\u0119 wy\u0142\u0105czy\u0107 t\u0119 opcj\u0119 i p\u00f3\u017aniej optymalizowa\u0107 obrazy z menu Media.<\/p>\n Mo\u017cna wy\u0142\u0105czy\u0107 automatyczn\u0105 kompresj\u0119 podczas przesy\u0142ania<\/p>\n Mo\u017cesz u\u017cy\u0107 narz\u0119dzia takiego jak TinyPNG,<\/a> aby skompresowa\u0107 swoje obrazy, ale \u0142atwiej jest przes\u0142a\u0107 obrazy do mojej witryny, jak zawsze, a nast\u0119pnie zoptymalizowa\u0107 je za pomoc\u0105 ShortPixel.<\/p>\n To tutaj ShortPixel<\/a> naprawd\u0119 si\u0119 wyr\u00f3\u017cnia.<\/p>\n Je\u015bli u\u017cywasz narz\u0119dzia takiego jak TinyPNG do optymalizacji obraz\u00f3w, zoptymalizujesz tylko nowe obrazy, kt\u00f3re przesy\u0142asz do swojej witryny. A co ze wszystkimi obrazami, kt\u00f3re ju\u017c przes\u0142a\u0142e\u015b? Jak je zoptymalizowa\u0107?<\/p>\n ShortPixel ma niesamowit\u0105 opcj\u0119 optymalizacji zbiorczej, kt\u00f3ra wy\u015bwietli wszystkie Twoje obrazy jednocze\u015bnie.<\/p>\n Powy\u017cszy obrazek jest do\u015b\u0107 oczywisty, z wyj\u0105tkiem cz\u0119\u015bci \u201emniejsze miniatury”. Dlaczego jest 4 razy wi\u0119cej mniejszych miniaturek i czym one s\u0105?<\/p>\n Mo\u017cesz tego nie wiedzie\u0107, ale za ka\u017cdym razem, gdy przesy\u0142asz obraz do WordPressa, automatycznie tworzy on trzy dodatkowe rozmiary (je\u015bli obraz jest wystarczaj\u0105co du\u017cy):<\/p>\n Mo\u017cesz przegl\u0105da\u0107 i edytowa\u0107 wymiary tych rozmiar\u00f3w obraz\u00f3w w menu Ustawienia > Media.<\/p>\n Oto problem\u2026<\/p>\n Za\u0142\u00f3\u017cmy, \u017ce kompresujesz obraz, a nast\u0119pnie przesy\u0142asz go do swojej witryny. \u201ePe\u0142na” wersja jest w pe\u0142ni zoptymalizowana, ale trzy dodatkowe rozmiary nie. Je\u015bli wstawisz \u201e\u015bredni\u0105” wersj\u0119 obrazu do posta, obraz zostanie nieskompresowany. ShortPixel zoptymalizuje przes\u0142ane przez Ciebie oryginalne obrazy i wszystkie dodatkowe rozmiary, kt\u00f3re tworzy WordPress.<\/p>\n Sama kompresja zapewnia niesamowity wzrost wydajno\u015bci, ale s\u0105 jeszcze dwa proste sposoby dalszej optymalizacji obraz\u00f3w w witrynie.<\/p>\n Za\u0142\u00f3\u017cmy, \u017ce przesy\u0142asz do swojej witryny obraz o wymiarach 5000 x 2500 pikseli. Nast\u0119pnie wstawiasz go do posta, w kt\u00f3rym wy\u015bwietla si\u0119 w rozdzielczo\u015bci 800 x 400px. Pomimo tego, \u017ce obraz ma tylko 800 pikseli szeroko\u015bci na ekranie odwiedzaj\u0105cego, nadal musz\u0105 pobra\u0107 wersj\u0119 5000 pikseli.<\/p>\n Nie trzeba dodawa\u0107, \u017ce obraz o szeroko\u015bci 5000 pikseli jest ogromny i prawdopodobnie \u0142aduje si\u0119 d\u0142u\u017cej ni\u017c ka\u017cdy inny plik w Twojej witrynie razem wzi\u0119ty.<\/p>\n S\u0105 dwa sposoby, aby tego unikn\u0105\u0107.<\/p>\n Zgodnie z og\u00f3ln\u0105 zasad\u0105 nie przesy\u0142aj \u017cadnych obraz\u00f3w o szeroko\u015bci przekraczaj\u0105cej 2000 pikseli. Niezale\u017cnie od tego, czy korzystasz z systemu Windows, czy Mac, masz prosty edytor obraz\u00f3w, kt\u00f3rego mo\u017cesz u\u017cy\u0107 do szybkiej zmiany rozmiaru zbyt du\u017cych obraz\u00f3w przed ich przes\u0142aniem.<\/p>\n Kolejn\u0105 wskaz\u00f3wk\u0105 jest unikanie \u201epe\u0142nej” wersji podczas wstawiania zbyt du\u017cego obrazu do posta. Zamiast tego wybierz rozmiar \u201eDu\u017cy”, kt\u00f3ry domy\u015blnie wynosi 1024 pikseli.<\/p>\n \u0141atwo jest zmieni\u0107 rozmiar obraz\u00f3w przed ich przes\u0142aniem, ale co z tymi, kt\u00f3re ju\u017c znajduj\u0105 si\u0119 w Twojej witrynie?<\/p>\n ShortPixel<\/a> ma ustawienie, kt\u00f3re pozwala ustawi\u0107 maksymaln\u0105 szeroko\u015b\u0107 i wysoko\u015b\u0107 obraz\u00f3w.<\/p>\n Mo\u017cesz ustawi\u0107 t\u0119 opcj\u0119, aby obrazy nigdy nie by\u0142y przycinane podczas zmiany rozmiaru. Po w\u0142\u0105czeniu tego ustawienia mo\u017cesz uruchomi\u0107 optymalizator zbiorczy, a ShortPixel zmieni rozmiar napotkanych zbyt du\u017cych obraz\u00f3w. B\u0119dzie r\u00f3wnie\u017c zmienia\u0107 rozmiar nowych obraz\u00f3w podczas ich przesy\u0142ania.<\/p>\n Je\u015bli u\u017cywasz wielu du\u017cych obraz\u00f3w, mo\u017ce to by\u0107 najlepszy krok dla Twojej witryny. Jest jeszcze tylko jedna technika optymalizacji i jest to naj\u0142atwiejsza jak dot\u0105d.<\/p>\n Pliki obraz\u00f3w mog\u0105 zawiera\u0107 dodatkowe dane, kt\u00f3re nie s\u0105 wy\u015bwietlane na samym obrazie, zwane danymi EXIF. EXIF mo\u017ce by\u0107 bardzo przydatny i zawiera informacje takie jak producent aparatu, data i godzina wykonania zdj\u0119cia, a nawet wsp\u00f3\u0142rz\u0119dne GPS.<\/p>\n Nie potrzebujesz tych danych do\u0142\u0105czonych do zdj\u0119\u0107, kt\u00f3re publikujesz w swojej witrynie. Nie wspominaj\u0105c o tym, \u017ce ze wzgl\u0119du na prywatno\u015b\u0107 prawdopodobnie najlepiej jest, aby Twoje zdj\u0119cia nie zawiera\u0142y wsp\u00f3\u0142rz\u0119dnych GPS!<\/p>\n Po raz kolejny ShortPixel<\/a> radzi sobie z tym z \u0142atwo\u015bci\u0105. Domy\u015blnie w\u0142\u0105czone jest ustawienie, kt\u00f3re usuwa dane EXIF \u200b\u200bze wszystkich obraz\u00f3w podczas procesu optymalizacji.<\/p>\n \u015arednio prowadzi to do dodatkowego zmniejszenia rozmiaru pliku o 8,5%.<\/p>\n Je\u015bli w og\u00f3le nie zoptymalizowa\u0142e\u015b swoich obraz\u00f3w, to b\u0119dzie wspania\u0142y dzie\u0144 dla Twojej witryny!<\/p>\n Wszyscy m\u00f3wi\u0105 o hostingu i optymalizacjach plik\u00f3w, ale z jakiego\u015b powodu cz\u0119sto zaniedbuje si\u0119 optymalizacj\u0119 obrazu. To szale\u0144stwo, poniewa\u017c mo\u017cna osi\u0105gn\u0105\u0107 ogromne korzy\u015bci.<\/p>\n U\u017cywam ShortPixel do obs\u0142ugi wszystkich praktyk optymalizacji obrazu opisanych w tym przewodniku i polecam go ka\u017cdemu, kto dba o wydajno\u015b\u0107 swojej witryny WordPress.<\/p>\n Kliknij tutaj, aby wypr\u00f3bowa\u0107 teraz ShortPixel<\/a><\/p>\n Teraz, gdy jeste\u015b w drodze do super zoptymalizowanej biblioteki multimedi\u00f3w, mo\u017cesz rozwa\u017cy\u0107 hosting premium, taki jak WP Engine,<\/a> aby jeszcze szybciej \u0142adowa\u0107 te obrazy. Powiniene\u015b r\u00f3wnie\u017c zapozna\u0107 si\u0119 z przewodnikiem WP Rocket,<\/a> szczeg\u00f3lnie z cz\u0119\u015bci\u0105 dotycz\u0105c\u0105 leniwego \u0142adowania w<\/a> celu dalszej optymalizacji obrazu.<\/p>\nTrzy sposoby optymalizacji obraz\u00f3w<\/h2>\n
1 Kompresuj swoje obrazy<\/h3>\n
Kompresja bezstratna<\/h4>\n
Kompresja stratna<\/h4>\n
Jak skompresowa\u0107 obrazy<\/h4>\n
![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f3240ca972.png\")
<\/a><\/p>\n![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f32428aed6.png\")
<\/a><\/p>\nA co z obrazami, kt\u00f3re ju\u017c przes\u0142a\u0142e\u015b?<\/h4>\n
![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f32446974a.png\")
<\/a><\/p>\nZoptymalizuj wszystkie rozmiary obraz\u00f3w<\/h4>\n
\n
![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f32466e04b.png\")
<\/a><\/p>\n2 Zmie\u0144 rozmiar obraz\u00f3w<\/h3>\n
Prze\u015blij mniejsze obrazy<\/h4>\n
![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f3248c6bb4.png\")
<\/a><\/p>\nZmie\u0144 rozmiar obraz\u00f3w w Bibliotece multimedi\u00f3w<\/h4>\n
![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f324ac8d3b.png\")
<\/a><\/p>\n3 Usu\u0144 dane EXIF<\/h3>\n
![\"Jak](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-176813-616f324cc2416.png\")
<\/a><\/p>\nMniejsze obrazy = szybsze strony<\/h2>\n