Optymalizacja obrazu rozpoczyna się od wyboru najlepszego formatu pliku dla Twoich potrzeb. To wykracza poza PNG vs. JPEG. Nie ma jednego formatu pliku, który by rządził nimi wszystkimi.
Potrzeby każdego obrazu są różne, choćby różne obrazy w jednej witrynie mają różne wymagania. Ale nie martw się, mamy wszystko pod kontrolą.
W tym poście nauczę cię, jak wybrać najlepszy format obrazu dla Twojej witryny WordPress. Przejrzymy stare ulubione, JPEG, PNG i GIF-y oraz niektóre z nich następnej generacji, takie jak WebP i SVG. Omówimy ich mocne, słabe strony i idealne przypadki użycia, abyś mógł zoptymalizować swoje obrazy jak profesjonalista. Przygotowałem również ściągawkę w formacie PDF do pobrania, abyś mógł się do niej odnieść! Kliknij tutaj, aby otrzymać kopię
Czytaj dalej lub skorzystaj z poniższych linków, aby przejść do konkretnej sekcji.
Użyj przewodnika Smush po formatach plików, aby znaleźć najlepszy typ pliku dla obrazów.
Rozmiar ma wpływ na prędkość, A Prędkość ma znaczenie
Dlaczego wybór odpowiedniego formatu pliku jest ważny? Ponieważ coraz więcej odwiedzających odwiedza strony internetowe na urządzeniach mobilnych. Nie tylko prędkości sieci są stosunkowo wolniejsze w porównaniu do sieci dedykowanych, ale nie każdy ma nieograniczoną ilość danych.
A ponieważ Google karze strony, które ładują się zbyt wolno, pokazując je niżej w wynikach wyszukiwania, poprawa czasu ładowania jest bezmyślnym sposobem na zwiększenie ruchu, sprzedaży i konwersji.
Gdy wybierzesz niewłaściwy format obrazu, możesz przypadkowo serwować większy obraz niż jest to konieczne. Dodatkowe funkcje plików graficznych (takie jak przezroczystość), niepotrzebne szczegóły i zbyt duża liczba kolorów-wszystko to powoduje uwędzenie obrazów. Czasami są one konieczne, a innym razem nie. jeżeli na przykład obraz nie ma przezroczystości, nie rezygnujesz z niczego, jeżeli wybierzesz typ obrazu, który nie obsługuje przezroczystości.
Kluczem jest dodanie tylko tego, czego potrzebujesz.
Wybór optymalnego rozmiaru pliku
Należy również wziąć pod uwagę obraz w stosunku do reszty strony internetowej, aby wybrać optymalny rozmiar pliku. Średnia strona internetowa jest w tej chwili w pobliżu 2MB, więc chcesz pozostać w tym limicie, aby mieć stosunkowo szybką stronę. Oznacza to, iż musisz spojrzeć na sumę wszystkich zasobów w swojej witrynie, a nie tylko obrazów.
Duży szczegółowy obraz bohatera, który ma 1 MB, nie będzie wielkim problemem, jeżeli jest to jedyny obraz na stronie z głównie tekstem; jednak jeżeli masz zamiar wyświetlić 10 dużych obrazów na stronie, które mają 1 MB, to będzie to lenistwo do załadowania. Możesz iść na kompromis, wyświetlając mniej obrazów lub wyświetlając je wszystkie w mniejszym rozmiarze.
Jak kompresować obrazy: Lossy vs Lossless
Aby wybrać idealny format obrazu, musisz zrozumieć różnicę między kompresją stratną i bezstratną. Idealnie, obraz powinien wykorzystywać oba te procesy algorytmiczne w celu wytworzenia najmniejszego rozmiaru pliku. Nie wszystkie formaty obsługują oba.
Dzięki kompresji stratnej niektóre dane zostaną utracone na zawsze. Stratna Kompresja obrazu trwale usuwa dane obrazu i degraduje obraz w procesie.
Nie jest tak źle, jak się wydaje, ponieważ niektóre z tych dodatkowych szczegółów mogą choćby nie być dostrzegalne dla ludzkiego oka.
Bezstratna kompresja obrazu, natomiast, zachowuje dane, więc nic nie jest stracone. Bezstratne algorytmy przechowują wszystkie niezbędne dane do odtworzenia dokładnie.
Najlepiej, aby obraz najpierw przeszedł fazę kompresji stratnej, a następnie fazę bezstratną, w której to, co pozostało, zostanie zoptymalizowane.
Najlepszy przewodnik po optymalizacji obrazu dla WordPress
JPEG
JPEG oznacza Joint Photographic Experts Group i został zaprojektowany do wykorzystania do zdjęć. Jako standardowy format plików dla większości konsumenckich aparatów cyfrowych i telefonów komórkowych, znajdziesz go praktycznie wszędzie.
Jpeg mają kilka zalet:
- Jpeg mogą zawierać miliony kolorów, dzięki czemu wytwarzają bogate, żywe obrazy
- Produkują stosunkowo mały rozmiar pliku, choćby przy tak wielu kolorach
- Są obsługiwane we wszystkich nowoczesnych przeglądarkach.
Nic dziwnego, iż JPEG jest tak popularnym formatem plików w Internecie.
Ponieważ format JPEG został zaprojektowany do zdjęć nieruchomych, nie obsługuje przezroczystości ani animacji.
Kompresja JPEG
Jpeg wykorzystują kompresję stratną, aby utrzymać mały rozmiar pliku.
Kompresja JPEG nie jest ustawieniem “wszystko albo nic”. Możesz dostosować współczynnik kompresji od 0% (ciężka kompresja) do 100% (brak kompresji), aby stworzyć idealną równowagę dla twojej sytuacji.
Ogólnie rzecz biorąc, Kompresja obrazu między 75-100% zachowa integralność i wysoką jakość obrazu, ale przy 75% obraz jest o połowę mniejszy. Połowa! Dlatego większość sieci społecznościowych kompresuje swoje obrazy w zakresie 70-85%. Na przykład Facebook kompresuje Twoje zdjęcia w 85%.
Jeśli więc przygotowujesz zdjęcia w programie Adobe Photoshop lub Lightroom, nie bój się przesunąć tego suwaka.
Spójrz na te dwa zdjęcia. Jeden nie został skompresowany i wynosi 229K, podczas gdy drugi został skompresowany w 75% i wynosi 95k.
Wariant 1
Możesz powiedzieć, który jest który?
Wariant 2
Istnieje bezstratny format JPEG o nazwie JPEG-2000, ale nie jest powszechnie przyjęty.
Ponadto zawsze należy unikać rekompresowania skompresowanego obrazu. Czy kiedykolwiek zrobiłeś kopię kserokopii lub pobrałeś i ponownie umieściłeś obraz w mediach społecznościowych? Jakość zostaje zniekształcona, ponieważ przechodzisz kolejną rundę kompresji.
(Nawiasem mówiąc, Opcja 1 to skompresowany obraz)
Jak zoptymalizować, zmienić rozmiar i służyć skalowane obrazy z WordPress
JPG vs. PNG
Jpeg są słabym wyborem dla obrazów o wysokim kontraście. To dlatego zrzuty ekranu JPEG z czarnym tekstem na białym tle wydają się być rozmyte.
JPEG jest idealnym typem pliku obrazu dla zdjęć, zwłaszcza tych bez tekstu, gdy mniejszy plik obrazu ma pierwszeństwo przed jakością obrazu. Np. duże obrazy bohaterów, podkreślające profesjonalną fotografię
JPEG są znacznie mniejsze niż PNG. Nasz obraz powyższej scenerii jako PNG to 329k, czyli prawie 3,5 x tyle ile wersja skompresowana.
Jest to wersja PNG tego samego obrazu, co powyżej, tylko 329kb
PNGs
Przejdźmy do innego ulubionego typu pliku obrazu w sieci, PNGs. Pliki png zostały zaprojektowane, aby zastąpić GIF z powodu problemów z licencjami, stąd podobieństwa funkcjonalne.
PNG ‘ s strength jest jego bezstratnym algorytmem kompresji. Nie tracisz żadnych danych podczas procesu kompresji, dzięki czemu obraz można odtworzyć bez utraty jakości. W rezultacie pliki png zachowują najdrobniejsze szczegóły w obrazach, choćby jeżeli chodzi o tekst. Minusem jest to, iż rozmiary plików PNG są zwykle większe w stosunku do innych typów plików obrazu z powodu wszystkich tych danych.
Kolejną zaletą jest wsparcie dla przejrzystości. Nie tylko można utworzyć plik logo z przezroczystym tłem, ale można również tworzyć zaawansowane gradienty przezroczystości i Więcej z PNGs.
Trzy rodzaje PNGs
Istnieją trzy rodzaje PNGs: PNG-8, PNG-24 i tajemniczy PNG-32. Technicznie rzecz biorąc, istnieją również animowane pliki png, ale nie będziemy o tym mówić, ponieważ nie są one jeszcze powszechnie wspierane.
PNG-8 jest jak GIF z PNGs. PNG-8 obsługuje 256 indeksowanych kolorów, ale przy znacznie mniejszym rozmiarze pliku, choćby mniejszym niż jego odpowiednik JPEG. W przeciwieństwie do GIFów, PNG-8 ma słabą obsługę animacji. PNG-8 jest idealny do prostej grafiki internetowej z przezroczystym tłem, takim jak logo i ikony witryny.
Podczas gdy PNG-8 obsługuje 8-bitowe kolory, PNG-24 obsługuje 24-bitowe kolory, co oznacza wsparcie dla 16 milionów kolorów. YAS! PNG-24 jest bardziej podobny do JPEG, ale przy znacznie większym rozmiarze pliku. Ale jakość obrazu PNG-24 jest doskonała, choćby przy powiększeniu, co czyni go idealnym do zdjęć ecommerce, a także zrzutów ekranu lub obrazów z tekstem.
Nie ma opcji dla PNG-32, prawdopodobnie z założenia, więc ludzie nie używają go, chyba iż potrzebują tych możliwości
Jeśli utworzysz pliki png w Photoshopie Save for Web w oknie dialogowym nie zobaczysz PNG – 32 jako opcji, ale twój PNG zostanie po cichu przekonwertowany na PNG-32, jeżeli dodasz obsługę przezroczystości. Dlaczego?
PNG-32S obsługuje 24-bitowe kolory z dodatkowym 8-bitowym kanałem alfa dla zaawansowanych możliwości przezroczystości. PNG – 32s zostały zaprojektowane tak, aby mieć możliwość tworzenia zaawansowanych obrazów z gradientem przezroczystości.
Te zaawansowane możliwości oznaczają, iż PNG-32 produkuje znacznie większe rozmiary plików. jeżeli nie tworzysz obrazu wymagającego złożonej przezroczystości, pozostań przy PNG-24. jeżeli tworzysz nakładkę obrazu, która zanika do zera, jest to zadanie dla formatu PNG-32.
Możesz zobaczyć przykład tutaj. Obraz utworzony w programie Photoshop ma przezroczysty gradient z dwoma kolorami, które zanikają od całkowitego krycia do całkowitej bezbarwnej przezroczystości. Aby to zilustrować, zrobiłem tło za obrazkiem Czarne używając style=”background: #222″.
PNG-32 /166kb
Możesz zobaczyć, jak czarne tło wpływa na sposób wyświetlania obrazu, ponieważ przyciemnia kolory w całym gradiencie.
PNG-8 / 37kb
Dla powyższego PNG-8 efekt ten jest zniekształcony. Obrazy PNG-8 obsługują tylko jeden poziom przezroczystości, więc przezroczystość pojawia się tylko w cienkim zniekształconym paśmie u góry.
WebPs
Czy nie byłoby wspaniale, gdybyś mógł połączyć najlepsze z PNGs i JPEG? Google wymyślił to samo i wynalazł sieć open sourceFormat P.
WebP może być jednym z najlepiej strzeżonych sekretów, jeżeli chodzi o optymalizację obrazów. Ogromne witryny, takie jak YouTube i eBay, już zaczęły używać go na dole, aby poprawić wydajność witryny.
Istnieją dwa rodzaje obrazów WebP. Jeden jest znany po prostu jako WebP i używa kompresji stratnej. Możesz myśleć o tym jako o wersji JPEG formatu WebP. Podczas tworzenia stratnej strony internetowej w programie takim jak Photoshop możesz wybrać stopień kompresji.
Druga wersja znana jest jako WebP Lossless i jest bardziej jak PNG. Uzyskasz większy rozmiar pliku, ale nie stracisz szczegółów.
Oba rodzaje formatów WebP wytwarzają obraz, który jest znacznie mniejszy niż ich odpowiedniki JPEG i PNG. Ile dokładnie?
Według danych Google obrazy WebP są średnio o 25-34% mniejsze niż porównywalne pliki JPEG i o 26% mniejsze niż porównywalne pliki png.
To coś wielkiego! Dlaczego nie przerzuciliśmy się jeszcze na obrazy WebP?
Oto zła wiadomość. Mimo iż WebP wkroczył na scenę obrazu w 2010 roku, Firefox i Safari nie wspierały go. Safari przez cały czas nie, chociaż teraz, gdy Firefox wszedł na pokład, jest to najprawdopodobniej tylko kwestia czasu. Tak więc w tej chwili WebP nie jest w pełni obsługiwanym przez przeglądarkę rozwiązaniem.
Możesz obejść to ograniczenie, serwując odpowiedniki PNG lub JPEG odwiedzającym, którzy korzystają z przeglądarki bez obsługi WebP.
Jeśli chodzi o tworzenie tych fajnych plików WebP dla WordPress, możesz użyć wtyczki, aby to zrobić za Ciebie. W rzeczywistości Smush Pro CDN konwertuje obrazy na WebP. jeżeli ktoś odwiedzi Twoją witrynę w przeglądarce obsługującej WebP, Smush przekonwertuje Twoje obrazy i wyświetli obrazy WebP. jeżeli są w przeglądarce, która nie obsługuje WebP, otrzymają Twój codzienny JPEG lub PNG.
Opowieść o dwóch rodzajach Grafiki obrazkowej
Istnieją dwa rodzaje grafiki obrazu, wektorowej i rastrowej.
Obrazy wektorowe są generowane matematycznie z serii punktów, które są połączone liniami i krzywymi, tworząc kształty geometryczne. Dzięki grafice wektorowej można zmienić rozmiar obrazu do dowolnego kształtu, dużego lub małego, bez uszczerbku dla jakości obrazu.
Grafika rastrowa składa się z pikseli ułożonych na siatce, a każdy piksel reprezentuje kolor. Grafika rastrowa pojawia się tylko w wysokiej jakości w rozdzielczości, w której miała być wyświetlana. jeżeli obraz zostanie przeskalowany do większego rozmiaru, nastąpi pikselacja.
SVGs
Wyjaśnijmy sobie jedną rzecz, pliki SVG nie są w rzeczywistości formatem pliku obrazu. SVG to język znaczników, który umożliwia tworzenie grafiki dwuwymiarowej. Pliki SVG są bardziej podobne do HTML niż PNG lub JPEG.
Pliki SVG są technicznie oparte na XML i mogą być manipulowane i animowane dzięki Javascript i CSS. Spójrz na ten niesamowity obraz bohatera.
Pliki SVG są również wyjątkowe, ponieważ w przeciwieństwie do formatów obrazów, o których mówiliśmy do tej pory, tworzą obrazy wektorowe. Oznacza to, iż obrazy są nieskończenie skalowalne i wyglądają dobrze we wszystkich rozdzielczościach. Co czyni je świetnymi w dostosowywaniu się do różnych urządzeń.
Nie otrzymasz pikselacji, która występuje w innych typach plików obrazów. Ponieważ jednak pliki SVG zostały zaprojektowane do wyświetlania prostych obrazów opartych na geometrycznych kształtach, takich jak logo, flagi, wykresy i ikony. Nie sprawdzają się w fotografii.
Pliki SVG można tworzyć w programie wektorowym, takim jak Adobe Illustrator, Inkscape, Vectr, SVG-edit lub Sketch. jeżeli tworzysz proste obrazy, Rozmiar pliku wynikowego będzie znacznie mniejszy niż PNG, JPEG lub WebP imwiek, choćby duże obrazy w wysokich rozdzielczościach. Złożone pliki SVG będą jednak negować te zalety.
Mimo iż jest to język znaczników, Google indeksuje pliki SVG, więc pojawiają się one w wyszukiwaniach obrazów. I są kompatybilne ze wszystkimi przeglądarkami.
Do SVG czy nie do SVG?
Jeśli sprzedałem Ci pliki SVG i próbowałeś przesłać je do WordPressa podczas czytania tego artykułu, być może zauważyłeś, iż WordPress nie zezwala na pliki SVG ze względów bezpieczeństwa.
Ale WordPress nie jest jedyny. Serwisy społecznościowe, takie jak Medium, Tumblr i Facebook, również nie zezwalają na pliki SVG.
Możesz spróbować obejść to i zmodyfikować swój plik funkcji, aby umożliwić pliki SVG, ale nie polecam tego. Ponieważ pliki SVG zawierają język znaczników, są otwarte na wstrzykiwanie złośliwego oprogramowania. jeżeli jesteś administratorem witryny i włączasz pliki SVG, ale autorzy i współpracownicy witryny nie są świadomi ryzyka,mogą przesyłać skompromitowane pliki SVG bez wiedzy.
Jeśli zdecydujesz się zainstalować wtyczkę zezwalającą na pliki SVG, powinieneś przesyłać je tylko od zaufanych osób i ograniczać możliwość wysyłania plików SVG osobom, które rozumieją, jak bezpiecznie przesyłać pliki SVG.
Gify
Zapisałem najbardziej znany typ pliku na koniec. Chociaż świetnie nadaje się do animowania żartów w ironiczny, zły sposób, gify nie są dobre dla wielu innych dni.
Chcesz wiedzieć coś, co cię rozwali? Animowane gify na Twitterze nie są już choćby gifami! To pliki WebM.
Bo prawda jest taka, iż gify nigdy nie były przeznaczone do animacji. Produkują wyjątkowo duże rozmiary plików. Im więcej klatek, tym gorzej. jeżeli przełączysz się na plik WebM, będziesz miał plik, który jest 9 razy mniejszy i dużo wyższej jakości. MP4 to kolejna realna opcja, która jest kompatybilna ze wszystkimi przeglądarkami.
Gify mają ograniczoną paletę kolorów 256 kolorów i używają bezstratnej kompresji. Ale, podobnie jak pliki PNG-8, i przy znacznie mniejszym rozmiarze pliku i mają również przezroczystość.
Więc być może jedynym przypadkiem użycia GIFów jest próba serwowania czegoś, co jest kompatybilne ze starszymi przeglądarkami, które nie obsługują HTML 5, źle wyglądają celowo lub dla efektu nostalgicznego.
The Ultimate Mega Guide to Speeding Up WordPress
Optymalny rozmiar pliku jest jak najmniejszy
Podczas gdy korzystanie z obrazów w witrynie, aby uzyskać swój punkt, jest świetne, te słowa 1000 nie są tanie! Potrzebują wielu środków, by służyć. Najlepszym podejściem jest wybór formatu pliku, który daje Ci to, czego potrzebujesz i nic więcej.
Oto krótkie podsumowanie funkcjonalności
WordPress stara się pomóc w dziale optymalizacji obrazu, automatycznie kompresując obrazy, ale nie robi wiele. W tym celu dedykowane narzędzie, takie jak Smush Pro, może zaoszczędzić dużo czasu i dostarczyć obrazy szybciej, niż kiedykolwiek myślałeś.
Kiedy pisałem ten post i uczyłem się o obrazach WebP, kompresji i innych technikach optymalizacji obrazu, byłem podekscytowany, aby wykorzystać moją nową wiedzę, aby poprawić moją osobistą stronę. Miałem zamiar przeczytać długi samouczek na temat tworzenia obrazów WebP, kiedy dowiedziałem się, iż Smush Pro robi to dzięki przełącznika.
Aktywowałem również Smush CDN i zobaczyłem, iż czas ładowania strony spada. Przed Smush Pro ładowanie zdjęć trwało 3 sekundy na niektórych stronach, ale po konwersji do nasbPs i dzięki Smush CDN, to coś ładuje się w ciągu sekundy. Byłem zdumiony.
Możesz wypróbować Smush Pro za darmo. Śmiało i zobacz, jak wiele to zmienia dla Twojej witryny.
Tagi:
