Czy nie kochasz obrazów?

Obrazy mogą przekształcić kawałek tekstu w ciekawe doświadczenie podczas czytania. Obrazy poprawiają wpis na blogu, sprawiają, że jest on bardziej podzielny i nadają ton i markę całej witrynie.

I wiesz co? Jesteśmy zakodowani, aby reagować na obrazy. Dlatego włączenie obrazów do treści jest potężnym narzędziem do wykorzystania podczas marketingu swojego bloga.

Ale jeśli nie jesteś ostrożny, obrazy mogą stanowić ponad połowę (lub więcej) całkowitego rozmiaru Twojej strony internetowej. Jeszcze kilka lat temu, średni rozmiar strony internetowej wynosił 600-700K. Teraz średnia wynosi 2MB i rośnie z każdym rokiem.

To jest ogromne!

Głównym powodem, dla którego tak się dzieje jest to, że wiele obrazów jest częściej używanych na stronach internetowych, a te obrazy nie są prawidłowo zwymiarowane i zoptymalizowane. Oznacza to, że nie są one zapisywane lub kompilowane w sposób przyjazny dla stron internetowych, a zamiast tego rozdęwają twoje strony.

Większość z nas, choć, zostawić optymalizacji obrazów jako afterthought i wolą cieszyć się robi rzeczy zabawy jak crafting epickiej postu lub sieci z innymi blogerami w swojej niszy.

Możesz nie myśleć, że to coś wielkiego, jeśli korzystasz z szybkiego łącza, ale wielu z Twoich odwiedzających tak nie jest. Ponadto, Google nie lubi wolno ładujących się stron i może to negatywnie wpłynąć na Twoje SEO.

Dlaczego trzeba optymalizować obrazy

Ciężko pracujesz nad tworzeniem znakomitych treści i spędzasz niezliczone godziny na promowaniu swojego bloga i nawiązywaniu kontaktów z innymi blogerami, więc ostatnią rzeczą, jakiej chcesz, jest porzucenie przez potencjalnych odwiedzających Twojej strony internetowej, zanim jeszcze się załaduje!

Badania pokazują, że nawet 40% odwiedzających klika przycisk wstecz, jeśli ładowanie strony trwa dłużej niż trzy sekundy.

Wiem, trzy sekundy to naprawdę nie tak długo, ale kiedy jesteś na połączeniu mobilnym i czekasz na załadowanie strony, sekunda może wydawać się wiecznością.

A ponieważ wielu z Twoich odwiedzających może korzystać z wolniejszych połączeń mobilnych, staje się jasne - musisz zmniejszyć rozmiar strony. A wiemy już, co jest największym sprawcą rozdęcia strony - to Twoje obrazy.

Niepotrzebnie duże obrazy zajmują również miejsce na koncie hostingowym. Podczas gdy niektórzy z was mogą mieć hosting z "nieograniczoną" przestrzenią dyskową, wielu dostawców hostingu premium ogranicza cię do około 10 GB przestrzeni dyskowej w planach niższego rzędu. To może się szybko zapełnić, zwłaszcza jeśli hostujesz wiele stron obfitujących w obrazy na tym samym koncie.

Jak więc możesz stwierdzić, czy Twoje obrazy spowalniają Twoją witrynę? Przetestuj szybkość swojej witryny za pomocą Google PageSpeed Insights.

Jeśli Google zgłasza niezoptymalizowane obrazy jako problem, oto co musisz wiedzieć, aby go naprawić.

Podstawy optymalizacji obrazu

Jeśli chodzi o optymalizację obrazów na blogu, istnieje kilka różnych rzeczy, które musisz być świadomy: typ pliku, rozmiar i wymiary obrazu, sposób serwowania obrazów i kompresja obrazu.

Przyjrzyjmy się bliżej każdemu z tych obszarów.

Typ pliku

Obrazy w sieci są zazwyczaj zapisywane w formacie PNG lub JPEG - lub GIF w przypadku animacji. Kto nie kocha tych zabawnych animowanych GIF-ów krążących po sieci!

Teraz jest to technicznie ok. jeśli zapiszesz swoje obrazy w obu formatach - przeglądarka odwiedzającego nie będzie miała problemów z wyświetleniem Twojej strony - ale dla najlepszej jakości i optymalizacji trzymaj się następujących zasad:

• JPEG - używany do zdjęć i projektów, w których występują ludzie, miejsca lub rzeczy
• PNG - najlepszy dla grafik, logo, projektów z dużą ilością tekstu, zrzutów ekranu i gdy potrzebujesz obrazów z przezroczystym tłem
• GIF - jeśli potrzebujesz animacji, w przeciwnym razie użyj PNG

Dlaczego więc istnieją różne formaty?

Cóż, PNG jest tradycyjnie używany do zapisywania logo i grafiki, ponieważ zachowuje oryginalną jakość obrazu - nikt nie chce rozmytego tekstu i rozpikselowanych kształtów. Ale jeśli spróbujesz zapisać zdjęcie jako PNG, będzie wyglądać niesamowicie, ale wynikowy rozmiar pliku będzie, mniej niż niesamowity.

JPEG jest tradycyjnie używany do zapisywania zdjęć. Część danych obrazu jest wyrzucana w celu stworzenia drastycznie mniejszego rozmiaru pliku, ale ponieważ zdjęcia zawierają szeroką gamę kolorów i naturalnych odmian, utrata jakości jest zwykle niezauważalna dla ludzkiego oka.

Później przejdziemy do bardziej szczegółowego omówienia kompresji, ale na razie, jeśli pamiętasz tylko dwie rzeczy, pamiętaj: JPEG dla zdjęć i PNG dla tekstu/grafiki.

Wymiary obrazu

Czy kiedykolwiek załadowałeś stronę internetową i zauważyłeś, że mały obrazek (może to być na przykład zdjęcie głowy) pobiera się f-o-r-e-v-e-r? Tak wolno, że możesz zobaczyć każdą linię? Myślisz sobie, jak taki mały obrazek może pobierać się tak długo?

A kiedy dzieje się to z dużym obrazem nagłówka, jest jeszcze gorzej, ponieważ może przeciągnąć cały ładunek strony.

Powodem tego jest fakt, że bloger nie zmienił prawidłowo rozmiaru i nie zoptymalizował swojego zdjęcia, a w przypadku naszego przykładu headshot, mógł przesłać JPEG o pełnej rozdzielczości bezpośrednio ze swojej lustrzanki.

A to przecież ogromny plik!

Widzisz, przeglądarka internetowa (zazwyczaj) skaluje obraz z jego oryginalnych wymiarów, aby ładnie pasował do miejsca na stronie internetowej. To, co wydaje się być małym obrazem na ekranie, może być w rzeczywistości ogromnym 10-megapikselowym zdjęciem, skalowanym w czasie rzeczywistym przez przeglądarkę.

Teraz niektóre platformy do publikowania stron internetowych automatycznie tworzą wiele wariantów obrazu w pełnej rozdzielczości w różnych rozmiarach, ale jeśli nie, powinieneś zmienić rozmiar swoich obrazów wcześniej w edytorze obrazu, takim jak Photoshop, Lightroom, Pixlr - lub nawet MS Paint. To może oznaczać różnicę między plikiem 50K i 5MB jeden.

WordPress, na przykład, automatycznie utworzy trzy (lub więcej, w zależności od motywu) kopie przesłanego obrazu - wszystkie o różnych wymiarach - które można wykorzystać w postach na blogu, zamiast zawsze używać pełnowymiarowego obrazu.

Jeśli masz zwyczaj przesyłania ogromnych obrazów zdjęć stockowych i chcesz zaoszczędzić miejsce na swoim koncie hostingowym, wtyczka WordPress Imsanity ma twoje plecy.

Zmienia rozmiar i zastępuje oryginalny obraz do czegoś bardziej zarządzanego, więc nawet jeśli wstawisz pełnowymiarowy obraz do swojego postu, nie będzie to takie złe.

Po aktywacji, Imsanity może również przeszukać twoje istniejące obrazy i odpowiednio zmienić rozmiar.

Obsługa zdjęć

To, w jaki sposób serwujesz obrazy odwiedzającym, nie jest ściśle związane z ich optymalizacją per se, ale może mieć ogromny wpływ na czas ładowania strony.

Większość blogerów serwuje swoje obrazy prosto z konta hostingowego i to jest zazwyczaj w porządku, ale jeśli naprawdę chcesz wycisnąć każdy bit wydajności ze swojej strony, to hosting obrazów na Content Delivery Network (CDN) może zrobić wielką różnicę.

CDN składa się ze strategicznie rozmieszczonych serwerów internetowych zlokalizowanych w centrach danych na całym świecie. Serwery te przechowują zduplikowane kopie twoich obrazów i kiedy przeglądarka odwiedzającego zażąda obrazu z twojej strony, CDN automatycznie kieruje przeglądarkę do serwera, który jest geograficznie najbliżej.

Oznacza to, że odwiedzający z Europy, na przykład, otrzymają obrazy serwowane z lokalnego europejskiego serwera, a nie ze Stanów Zjednoczonych lub innego miejsca. Ponieważ czas odpowiedzi i opóźnienia sieciowe są zmniejszone, obrazy pobierają się znacznie szybciej, skracając czas ładowania strony.

Blogging Wizard używa Sucuri (zawiera Firewall dla bezpieczeństwa, jak również CDN), ale istnieją inni dostawcy jakości, jak Amazon's Cloudfront lub KeyCDN. Nawet popularny CloudFlare, który nie jest ściśle CDN, oferuje CDN za darmo i jest łatwy do skonfigurowania w większości pakietów hostingu współdzielonego.

Kompresja obrazu

Jeśli chodzi o optymalizację obrazów, nic nie zmniejsza rozmiaru pliku bardziej niż zaawansowana stratna kompresja obrazu.

Większość narzędzi do edycji obrazów, takich jak Visme czy Photoshop, zapisuje pliki przy użyciu stratnej kompresji JPEG, ponieważ zapewnia ona najlepsze zmniejszenie rozmiaru pliku. Tak więc, podczas gdy jakość obrazu jest nieznacznie zmniejszona, użycie stratnej kompresji obrazu zmniejsza ogromne obrazy do rozmiarów przyjaznych dla stron internetowych.

Jestem pewien, że wielu, którzy używają Photoshopa, może zobaczyć jego Zapisz dla sieci Nawet narzędzia do edycji zdjęć online, takie jak PicMonkey czy Visme, również optymalizują obrazy.

Ale czy wiesz, że istnieją narzędzia, które mogą wziąć "zoptymalizowany" obraz z Photoshopa lub innych narzędzi do edycji, chrupać i kompresować go o kolejne 40% (lub więcej), i nadal że wydaje się niemal identyczny dla ludzkiego oka?

Oto kilka darmowych i płatnych narzędzi, które pomogą Ci schrupać Twoje zdjęcia do stanu przyjaznego dla sieci.

Narzędzia biurkowe

ImageAlpha / ImageOptim

Dla użytkowników komputerów Mac, ImageOptim jest darmowym narzędziem desktopowym, którego używam codziennie do optymalizacji obrazów PNG - głównie zrzutów ekranu - przed ich przesłaniem. Narzędzia te są łatwe w użyciu, wystarczy przeciągnąć i upuścić pliki, ale musisz zrobić jeden obraz na raz.

Pro tip : Dla osób obeznanych z techniką jest ImageOptim-CLI, w którym można zoptymalizować cały folder obrazów jednocześnie.

ImageAlpha jest kompresorem stratnym PNG i potrafi zdziałać cuda w kwestii zmniejszania plików PNG, natomiast ImageOptim wykonuje zaawansowaną kompresję bezstratną (z opcją stratną) - a także usuwa zbędne metadane z plików PNG, JPEG i GIF.

Dla moich obrazów PNG, najpierw przepuszczam je przez ImageAlpha:

Tutaj zmniejszył mój obraz zrzutu ekranu z 103K do 28K.

Następnie przepuściłem je przez ImageOptim i zaoszczędziłem dodatkowe 10%.

JPEGmini

W przypadku moich plików JPEG optymalizuję je za pomocą desktopowej aplikacji JPEGmini, dostępnej zarówno dla Maca, jak i Windowsa.

Wersja Lite pozwala na optymalizację do 20 zdjęć dziennie za darmo, a usunięcie limitu kosztuje 19,99$.

Pro tip : Zaawansowani użytkownicy chcący zintegrować JPEGmini z Photoshopem lub Lightroomem za pomocą wtyczki mogą kupić wersję Pro za 99,99 USD.

Narzędzia online / w chmurze / SaaS

TinyPNG

Jeśli szukasz wysokiej jakości narzędzia do kompresji obrazu online, TinyPNG (optymalizuje pliki JPEG zbyt pomimo nazwy) jest aplikacją internetową, która pozwala na przeciągnięcie do 20 5MB lub mniejszych obrazów do przeglądarki, i mieć je zoptymalizowane wszystkie na raz.

Mają również API dewelopera i udostępniają wtyczkę WordPress, która może automatycznie zoptymalizować twoje obrazy po przesłaniu.

TinyPNG daje 500 darmowych optymalizacji obrazu na miesiąc, a po tym opłaty od $0.002-0.009 za obraz, w zależności od objętości.

Teraz 500 obrazów na miesiąc może brzmieć jak dużo, ale jeśli wziąć pod uwagę fakt, że WordPress często tworzy trzy do pięciu odmian każdego obrazu w różnych rozmiarach, 500 obrazów nie wydaje się jak że wielu Na szczęście koszt jednego zdjęcia jest przyjazny dla budżetu.

EWWW Image Optimizer

Jeśli nie jesteś gotowy na wydanie pieniędzy i nie chcesz się męczyć z ręczną optymalizacją obrazów, darmowa wtyczka EWW Image Optimizer dla WordPressa może automatycznie zoptymalizować przesłane obrazy.

Możesz zdecydować się na subskrypcję premium, która wykonuje kompresję stratną, ale darmowa wersja wykonuje tylko kompresję bezstratną, więc oszczędności nie są tak znaczące. Pozwoli Ci to zaoszczędzić czas i jest lepsze niż nic, chociaż.

Uwaga: Aby uzyskać pełny zestaw, sprawdź nasz post na temat narzędzi do kompresji obrazu.

Zakończenie

Z niektórymi osobami przewidującymi, że średni rozmiar strony internetowej zbliży się do 3MB do 2017 roku, teraz jest czas, aby rozpocząć optymalizację swoich obrazów.

Pamiętaj, że nie wszyscy odwiedzający będą mieli szybkie łącza, a rozdęcie strony i wolne czasy ładowania mogą potencjalnie wpłynąć na Twój ranking w Google. Aby pomóc Ci zmniejszyć obciążenie, że tak powiem, wyrób sobie nawyk optymalizacji swoich obrazów już dziś.

Zwróć uwagę na swoje wymiary obrazu i zmień rozmiar wszelkich zbyt dużych zdjęć stockowych lub obrazów z aparatu cyfrowego w dół do odpowiedniego rozmiaru.

Następnie skorzystaj z nowoczesnej kompresji obrazu za pomocą aplikacji desktopowych, takich jak JPEGmini, lub narzędzi w chmurze, takich jak TinyPNG lub Kraken - integrując je z WordPressem za pomocą wtyczki, jeśli to możliwe.

Wreszcie, jeśli Twoja platforma wydawnicza automatycznie tworzy zmienione warianty oryginalnego obrazu, wybierz jeden z nich do swojego wpisu na blogu, zamiast oryginalnego, pełnowymiarowego.

Related Reading: 7 Ways To Reduce The Size Of PDF Files.