{"id":3664,"date":"2018-12-04T14:23:50","date_gmt":"2018-12-04T13:23:50","guid":{"rendered":"https:\/\/lsbeta.szmigiel.design\/?p=3664"},"modified":"2020-06-02T17:29:41","modified_gmt":"2020-06-02T15:29:41","slug":"skuteczna-optymalizacja-grafik-w-wordpress-dzieki-wtyczce-litespeed-cache","status":"publish","type":"post","link":"https:\/\/retro.szmigiel.design\/pl\/blog\/skuteczna-optymalizacja-grafik-w-wordpress-dzieki-wtyczce-litespeed-cache\/","title":{"rendered":"Skuteczna optymalizacja grafik w WordPress dzi\u0119ki wtyczce LiteSpeed Cache"},"content":{"rendered":"
\n

Po co opty\u00adma\u00adli\u00adzowa\u0107 zdj\u0119cia na stronie?<\/h2>\n

Zdj\u0119cia, tak jak i inne grafiki umiesz\u00adczone na stronie inter\u00adne\u00adtowej, przed wy\u015bwie\u00adtle\u00adniem musz\u0105 zosta\u0107 pobrane na komputer lub urz\u0105\u00addzenie przeno\u015bne. Im wi\u0119cej zajmuj\u0105 pliki z grafikami, tym d\u0142u\u017cej b\u0119d\u0105 pobierane. W skrajnych przy\u00adpad\u00adkach, je\u017celi umiesz\u00adczasz na stronie zdj\u0119cia w orygi\u00adnal\u00adnych rozmia\u00adrach, mog\u0105 zajmowa\u0107 nawet kilka do kilku\u00adnastu mega\u00adbajt\u00f3w.<\/p>\n

Odbiorcy tre\u015bci umiesz\u00adcza\u00adnych w inter\u00adnecie z regu\u0142y nie lubi\u0105 czeka\u0107. Cz\u0119sto nawet trzy sekundy ocze\u00adki\u00adwania to warto\u015b\u0107 graniczna, po kt\u00f3rej \u0142adowanie zostanie przerwane<\/strong> przez u\u017cyt\u00adkow\u00adnika. Bardziej zdeter\u00admi\u00adno\u00adwani zapewne poczekaj\u0105 d\u0142u\u017cej, ale dziesi\u0119\u0107 czy pi\u0119t\u00adna\u00ad\u015bcie sekund to warto\u015b\u0107 zaporowa, nawet dla najwy\u00adtr\u00adwal\u00adszych.<\/p>\n

Nawet je\u017celi prowa\u00addzisz bloga foto\u00adgra\u00adficz\u00adnego i jako\u015b\u0107 zdj\u0119\u0107 jest dla Ciebie istotna, nie ma potrzeby wy\u015bwie\u00adtlania zbyt du\u017cych plik\u00f3w<\/strong>. Zdj\u0119cia docelowo s\u0105 skalowane do szero\u00adko\u015bci kontenera, w kt\u00f3rym znajduj\u0105 si\u0119 na stronie, osta\u00adtecznie \u2014 do szero\u00adko\u015bci ekranu. Praw\u00addo\u00adpo\u00addobnie nigdy nie zostan\u0105 wy\u015bwie\u00adtlone w orygi\u00adnalnym rozmiarze. Warto wi\u0119c przesy\u0142a\u0107 je na serwer odpo\u00adwiednio zmniej\u00adszone.<\/p>\n<\/div>\n

\"Najlepsza<\/p>\n

\n

O tym, dlaczego opty\u00adma\u00adli\u00adzacja zdj\u0119\u0107 i obraz\u00f3w<\/a> jest warto\u00ad\u015bciowa, mo\u017cesz r\u00f3wnie\u017c prze\u00adczyta\u0107 na zaprzy\u00adja\u017a\u00adnionym blogu w linko\u00adwanym studium przypadku.<\/p>\n

Na rozmiar pliku graficz\u00adnego ma tak\u017ce wp\u0142yw zasto\u00adso\u00adwana kompresja. Cho\u0107 mocniejsza kompresja<\/strong> zwykle oznacza spadek szcze\u00adg\u00f3\u00ad\u0142o\u00adwo\u015bci obraz\u00f3w i poja\u00adwienie si\u0119 nieprzy\u00adjem\u00adnych arte\u00adfakt\u00f3w (pasko\u00adwanie, poste\u00adry\u00adzacja, widoczne bloki wyni\u00adka\u00adj\u0105ce z kompresji), istniej\u0105 skuteczne metody opty\u00adma\u00adli\u00adzacji mini\u00adma\u00adli\u00adzu\u00adj\u0105ce utrat\u0119 jako\u015bci.<\/p>\n

W tym artykule poka\u017c\u0119 Ci dwa darmowe narz\u0119dzia<\/strong>, kt\u00f3re sprawi\u0105, \u017ce proces opty\u00adma\u00adli\u00adzacji plik\u00f3w graficz\u00adnych w WordPress b\u0119dzie auto\u00adma\u00adtyczny.<\/p>\n

Najpierw zmniejsz rozmiar plik\u00f3w graficz\u00adnych prze\u00adsy\u00ad\u0142a\u00adnych na serwe\u00adr<\/h2>\n

WordPress od wielu lat radzi sobie ca\u0142kiem nie\u017ale z prezen\u00adtacj\u0105 grafik za spraw\u0105 wewn\u0119trz\u00adnego silnika, kt\u00f3ry auto\u00adma\u00adtycznie tworzy mniejsze wersje orygi\u00adna\u0142\u00f3w prze\u00ads\u0142a\u00adnych do zak\u0142adki Media. Domy\u015blne trzy miniatury (thumbnail, medium, large), kt\u00f3rych wymiary mo\u017cesz perso\u00adna\u00adli\u00adzowa\u0107 w usta\u00adwie\u00adniach CMS, mog\u0105 by\u0107 \u0142atwo rozsze\u00adrzone o warto\u015bci zako\u00addo\u00adwane we wtyczkach lub motywach \u2014 zar\u00f3wno tych darmowych, jak i komer\u00adcyj\u00adnych. Pozwala to wy\u015bwie\u00adtla\u0107 w tre\u015bci strony tylko tak du\u017ce grafiki, jak du\u017cy jest ich kontener. Niestety nie wszystkie wtyczki i nie wszystkie motywy korzy\u00adstaj\u0105 w stu procen\u00adtach z tej techniki i zdarza si\u0119, \u017ce w niekt\u00f3\u00adrych miejscach wy\u015bwie\u00adtlane s\u0105 orygina\u0142y, kt\u00f3re u\u017cyt\u00adkownik przes\u0142a\u0142 na serwer.<\/p>\n<\/div>\n

\"Unsplash<\/p>\n

\n

WordPress domy\u015blnie nie skaluje orygi\u00adna\u0142\u00f3w<\/strong>. Je\u017celi wi\u0119c prze\u00ads\u0142a\u0142e\u015b na serwer plik JPEG o rozdziel\u00adczo\u015bci 6000 \u00d7 4000 pikseli i rozmiarze 12 MB to taki plik zostanie zapisany i mo\u017ce zosta\u0107 wy\u015bwie\u00adtlony w tre\u015bci strony. Mo\u017cesz tego unikn\u0105\u0107, ka\u017cdo\u00adra\u00adzowo zmie\u00adniaj\u0105c rozmiar pliku przed jego wys\u0142aniem, ale\u2026 Komu by si\u0119 chcia\u0142o robi\u0107 to r\u0119cznie?Zamiast tego mo\u017cna pos\u0142u\u017cy\u0107 si\u0119 darmow\u0105 wtyczk\u0105<\/strong> Imsanity, kt\u00f3ra auto\u00adma\u00adtycznie skaluje wszystkie pliki JPEG oraz PNG prze\u00adsy\u00ad\u0142ane do zak\u0142adki Media do mniej\u00adszych rozmiar\u00f3w. Domy\u015blne usta\u00adwienia tej wtyczki to 2048 pikseli na d\u0142ugim boku, ale nic nie stoi na prze\u00adszko\u00addzie, aby by\u0142a to warto\u015b\u0107 np. 1920 pikseli lub jeszcze mniej.<\/p>\n<\/i><\/span>Pobierz Imsanity<\/span><\/a>\n\n

Imsanity posiada tak\u017ce funk\u00adcjo\u00adnal\u00adno\u015b\u0107 prze\u00adtwa\u00adrzania wsadowego \u2014 tzn. potrafi prze\u00adska\u00adlowa\u0107 wszystkie grafiki ju\u017c istnie\u00adj\u0105ce na Twojej stronie<\/strong>. Warto wi\u0119c skorzy\u00adsta\u0107 z tego rozwi\u0105\u00adzania w pierwszej kolej\u00adno\u015bci \u2014 zanim przy\u00adst\u0105\u00adpisz do dalszej opty\u00adma\u00adli\u00adzacji z wyko\u00adrzy\u00adsta\u00adniem kompresji. Pami\u0119taj o zrobieniu kopii folderu \/wp-conten\u00adt\/u\u00adplo\u00adads\/ przed skorzy\u00adsta\u00adniem z prze\u00adtwa\u00adrzania wsadowego \u2014 wtyczka nie tworzy kopii zapasowej orygi\u00adna\u0142\u00f3w.<\/p>\n

Wtyczka dzia\u0142a z usta\u00adwieniami domy\u015bl\u00adnymi po insta\u00adlacji i aktywacji. Je\u017celi chcesz zmieni\u0107 jej usta\u00adwienia, mo\u017cesz to zrobi\u0107 na zapleczu WordPress, kieruj\u0105c si\u0119 do menu Usta\u00adwienia<\/em>, nast\u0119pnie Imsanity<\/em>.<\/p>\n

Zain\u00adstaluj i skon\u00adfi\u00adguruj wtyczk\u0119 LiteSpeed Cache dla WordPress do opty\u00adma\u00adli\u00adzacji obraz\u00f3w<\/h2>\n

Na temat wtyczki LiteSpeed Cache pisa\u0142em w osobnym artykule<\/a>. Przypomn\u0119 tylko, \u017ce to kompletne rozwi\u0105\u00adzanie do opty\u00adma\u00adli\u00adzacji WordPress, kt\u00f3re wymaga serwera LiteSpeed do urucho\u00admienia funkcji odpo\u00adwie\u00addzial\u00adnych za obs\u0142ug\u0119 pami\u0119ci podr\u0119cznej. Na szcz\u0119\u015bcie, autorzy wtyczki posta\u00adno\u00adwili udost\u0119pni\u0107 wi\u0119kszo\u015b\u0107 jej funkcji dla wszyst\u00adkich u\u017cyt\u00adkownik\u00f3w. Oznacza to, \u017ce rozbu\u00addo\u00adwany modu\u0142 opty\u00adma\u00adli\u00adzacji obraz\u00f3w jest dost\u0119pny dla ka\u017cdego<\/strong>.<\/p>\n

Najwa\u017c\u00adniejsze cechy wyr\u00f3\u017c\u00adnia\u00adj\u0105ce opty\u00adma\u00adli\u00adzacj\u0119 obraz\u00f3w LiteSpeed Cache na tle rozwi\u0105za\u0144 konku\u00adren\u00adcyj\u00adny\u00adch<\/h3>\n

Mo\u017c\u00adli\u00adwo\u015bci wtyczki s\u0105 impo\u00adnu\u00adj\u0105ce i je\u015bli przyjrze\u0107 si\u0119 rozwi\u0105\u00adza\u00adniom konku\u00adren\u00adcyjnym \u2014 to zdumie\u00adwa\u00adj\u0105ce, \u017ce autorzy posta\u00adno\u00adwili udost\u0119pni\u0107 wszystkie te funk\u00adcjo\u00adnal\u00adno\u015bci nieod\u00adp\u0142atnie. By\u0107 mo\u017ce ten stan ulegnie zmianie w przy\u00adsz\u0142o\u015bci, ale na chwil\u0119 obecn\u0105, wtyczka pod wzgl\u0119dem funkcji zwi\u0105\u00adza\u00adnych z opty\u00adma\u00adli\u00adzacj\u0105 obraz\u00f3w oferuje:<\/p>\n