Posiadanie angażujących, wyraźnych i szybkich obrazów w witrynie WordPress to jeden z najskuteczniejszych sposobów na przyciągnięcie użytkownika/klienta. Jest powód, dla którego dealerzy samochodowi poświęcają tak dużo czasu na upewnianie się, że nowe modele są nieskazitelne i błyszczące. Wizualny wpływ produktu często może być decyzją o podjęciu lub przerwie między sukcesem a porażką. Salony online nie różnią się od siebie, a dodatkowo komplikuje się wpływ obrazu na szybkość ładowania. Jest to dobrze stosowana i znana miara, że ​​użytkownik opuści witrynę, jeśli załadowanie zajmie więcej niż 3 sekundy. Jeśli strona ładuje się dłużej niż 3 sekundy, istnieje duża szansa, że ​​obrazy, które masz na swojej stronie, są częścią tego powodu.

Więc jako właściciel witryny WordPress, co możesz zrobić, aby obrazy, które masz w swojej witrynie, były zarówno atrakcyjne dla użytkowników, jak i umożliwiały szybkie ładowanie witryny. Twój początkowy instynkt może polegać na zmniejszeniu obrazu z obrazu o rozmiarze 1800×1400 do obrazu o rozmiarze 300×200. Byłby to niewłaściwy sposób działania, ponieważ chociaż rozmiar pliku obrazu może być teraz znacznie mniejszy, w rezultacie ucierpiała jakość obrazu i wrażenia użytkownika. Jeśli masz na przykład witrynę sprzedaży salonu samochodowego, klienci będą chcieli naprawdę dobrze przyjrzeć się samochodowi i zobaczyć wszystkie funkcje i szczegóły. Dzięki temu, że obraz jest tak mniejszy, jakakolwiek szczegółowa inspekcja samochodu jest teraz niemożliwa – potencjalny klient jest sfrustrowany i szuka gdzie indziej.

Więc jakie masz opcje? Na szczęście istnieją dziesiątki różnych opcji plików graficznych, z których można wybierać, od wysokiej jakości pliku BMP o dużym rozmiarze, wypróbowanego i przetestowanego JPEG, po nowy i szeroko nieznany format WebP. Wraz z wyborem odpowiedniego formatu należy pamiętać, że niezależnie od tego, jaki format wybierzesz, możesz dodatkowo zmniejszyć rozmiar pliku obrazu, stosując proces za pośrednictwem WP-Optimize znany jako „kompresja”.

Szybkość witryny jest jednym z 10 najważniejszych czynników, które boty Google indeksujące Twoją witrynę obserwowały, gdy umieszczają ją w rankingu wyników wyszukiwania. Słaba prędkość ładowania może mieć negatywny wpływ na ranking Twojej witryny i może łatwo przenieść Twoją witrynę z pierwszej strony do niepowodzenia indeksowania przez Google. Google bardzo rygorystycznie określa ranking witryn w swoim algorytmie wyszukiwania, a jeśli stwierdzą, że witryna oferuje słabe wrażenia użytkownika z powodu wolnego czasu ładowania, mogą nawet nie mieć kłopotów z jej indeksowaniem i umożliwieniem jej odnalezienia w wyszukiwarce Google .

Jaki format obrazu wybrać?

Ponieważ wysokiej jakości obrazy są tak ważne dla każdej nowoczesnej witryny WordPress, musisz wiedzieć, jakiego formatu użyć, jak wpływają one na wydajność Twojej witryny i jak najlepiej wykorzystać wybrany plik.

Dwa najpopularniejsze formaty plików graficznych w witrynach internetowych to PNG i JPEG/JPG. Według w3techs ponad 70% wszystkich witryn korzysta z tych typów plików. Około 30% witryn korzysta z formatu SVG, a 22% z GIF.

W tym miejscu w grę wchodzą typy plików graficznych, ponieważ rodzaj pliku, którego używasz do przesyłania zdjęć, odgrywa ważną rolę. Ponieważ istnieje tak wiele różnych typów plików, poniżej omówimy najpopularniejsze z nich oraz ich zalety i wady:

Zanim przejdziemy do typu pliku, musimy wcześniej zrozumieć pewne koncepcje, na przykład, czym jest obraz rastrowy i bitmapowy? Co to jest kompresja? Jaka jest różnica między kompresją stratną a bezstratną?

Kompresja – stratna vs bezstratna

Oba typy kompresji mają na celu zmniejszenie rozmiaru pliku, ale to, co usuwają, naprawdę ma znaczenie. W kompresji stratnej; ważne dane, które są istotne dla jakości obrazu, są usuwane. W niektórych przypadkach może to znaleźć odzwierciedlenie w pikselowaniu obrazu, ponieważ komputer może mieć problemy z rekonstrukcją obrazu.

W przypadku kompresji bezstratnej nieistotne dane obecne w obrazie (takie jak metadane) są redukowane, co pomaga zmniejszyć rozmiar pliku. Ten proces nie wpływa na jakość obrazu.

Raster vs wektor

Najczęściej używane typy plików graficznych są zazwyczaj oparte na rastrze. Oznacza to, że mają one stałą wartość koloru RGB powiązaną z każdym pikselem, a wszystkie te piksele są łączone i używane do tworzenia całego obrazu.

Przykłady takich formatów plików to jpg, png i gif.

Alternatywnie, obraz wektorowy jest tworzony przy użyciu kształtów i linii, które można skalować w nieskończoność bez ich pikselowania. Wektory tworzone są za pomocą wzorów matematycznych, które pozwalają użytkownikom zmieniać wartości, nie wpływając na jakość obrazu.

Teraz, gdy omówiliśmy podstawy obrazów, możemy teraz przyjrzeć się szczegółom różnych typów plików.

JPEG:

Jest to cyfrowy format obrazu, który zawiera skompresowane dane obrazu. Przy współczynniku kompresji 10:1 używane są obrazy JPEG, ponieważ są bardzo kompaktowe. Format JPEG zawiera ważne szczegóły obrazu i jest najpopularniejszym formatem obrazu do udostępniania zdjęć i innych obrazów w Internecie. Niewielki rozmiar pliku obrazów JPEG może również pozwolić użytkownikom na przechowywanie tysięcy obrazów (na przykład w witrynie artystycznej) bez potrzeby dodatkowego miejsca do przechowywania w witrynie.

JPEG to plik z kompresją stratną, który dobrze sprawdza się w przypadku zdjęć, ale podczas pracy z grafiką zaleca się użycie innego formatu, takiego jak PNG.

Przykładowy plik obrazu JPEG. Możesz zobaczyć, że podczas przesyłania zachowano szczegóły i jakość.

PNG:

PNG to popularny format obrazów bitmapowych i jest skrótem od „Portable Graphics Format”. Ten format został stworzony jako alternatywa dla Graphics Interchange Format (GIF). PNG ma kilka świetnych funkcji, takich jak 24-bitowe palety kolorów RGB, obrazy w skali szarości i wyświetlanie przezroczystego tła. Bezstratna metoda kompresji danych jest również używana w obrazach PNG podczas pracy z obrazami lub grafiką wysokiej jakości. Obrazy PNG są również często używane w edycji obrazów, ponieważ zapewniają użytkownikowi większą kontrolę i opcje nad obrazem w porównaniu z tradycyjnym formatem JPEG.

PNG wykorzystuje również bezstratny algorytm kompresji, co oznacza, że ​​ten format może zachować więcej danych niż JPG. Korzystając z pliku obrazu PNG, użytkownicy mogą również zapisywać te obrazy z przezroczystym tłem. Korzystając z tego formatu, użytkownicy mają możliwość pracy z warstwowymi obrazami, które mogą pokazywać wyraźne tło (na przykład – tylko kwiaty na obrazku poniżej, a nie ściana tła), umożliwiając użytkownikom dodawanie obrazu do innych obrazów bez potrzeby aby go wyciąć i usunąć istniejące tło – tak jak w przypadku obrazu JPEG. Jest to jeden z głównych powodów, dla których jest preferowanym wyborem w przypadku grafiki, takiej jak diagramy i ilustracje. Wiadomo, że pliki PNG są bardziej popularne wśród użytkowników pracujących z grafiką niż przesyłanie standardowych zdjęć.

Obraz PNG zachowuje wysoką jakość, a jednocześnie pozwala na większą kontrolę nad obrazem

GIF:

Prawdopodobnie najlepiej znasz termin „GIF” z niezliczonych krótkich klipów, które wysyłasz w aplikacjach do przesyłania wiadomości. GIF oznacza „Format wymiany grafiki” i jest używany głównie do obsługi animacji bez dźwięku

W przeciwieństwie do JPEG i PNG, GIF-y są używane w bardziej niszowych przypadkach i zazwyczaj nie są używane do obrazów statycznych (chociaż jest to możliwe). Jeśli używasz GIF-a w swojej witrynie WordPress, najprawdopodobniej po to, aby pokazać odwiedzającym prostą animację lub proces. GIF-y mają ograniczony zakres kolorów i najlepiej nadają się do prostych grafik. Używają kompresji bezstratnej i wydają się być mniejsze niż pliki JPG. Ogólnie zaleca się oszczędne używanie GIF-ów w witrynie, ponieważ mogą one wydłużyć czas ładowania (biorąc pod uwagę rozmiar pliku) i są ograniczone do 256 kolorów.

Przykład obrazu GIF. Jakość oryginalnego obrazu została znacznie obniżona w celu wyprodukowania animacji.

SVG:

Skalowalna grafika wektorowa (SVG) to format plików wektorowych, który można obsługiwać w Internecie. W przeciwieństwie do plików obrazów rastrowych opartych na pikselach, takich jak JPEG, pliki wektorowe przechowują obrazy za pomocą formuł matematycznych opartych na punktach i liniach na siatce. Oznacza to, że pliki wektorowe, takie jak SVG, można znacznie zmienić bez utraty jakości, co czyni je idealnymi do tworzenia logo i złożonej grafiki online.

Wektory najlepiej nadają się tylko do prostych grafik, kształtów i ilustracji. Pliki SVG to dobry wybór dla logo, zwłaszcza jeśli chcesz, aby Twoje logo było responsywne i obsługiwane przez większość przeglądarek, w tym Chrome, Firefox, Edge i Opera.

Przykład słoneczników w formacie SVG, których użyjesz do logo.

BMP:

BITMAP jest obecnie uważany za przestarzały format obrazu. BMP ładuje obrazy w bezstratnym formacie obrazu, co może powodować ogromne rozmiary plików z powodu braku kompresji. Biorąc pod uwagę znaczenie szybkości ładowania i sposób, w jaki twórcy witryn chcą ograniczyć rozmiary obrazów do minimum (nie wspominając o popularności formatów SVG i JPEG), format ten stał się w dużej mierze nieużywany w przypadku obrazów online.

Oryginalna jakość obrazu jest zachowywana podczas przesyłania w formacie BMP, ale rozmiar pliku znacznie spowolni Twoją witrynę i nie jest zalecany.

WebP:

Ten format obrazu został stworzony przez Google w 2010 roku i zaczyna być popularny wśród osób, które przesyłają wiele obrazów do swojej witryny, ponieważ ma kilka zalet w porównaniu z JPEG i PNG, na przykład lepszą wydajność kompresji stratnej i bezstratnej.

WebP również zazwyczaj przesyła pliki w mniejszych rozmiarach niż formaty JPEG lub PNG, biorąc pod uwagę lepszą wydajność kompresji i zajmuje mniej miejsca w witrynie, co pozwala na szybsze ładowanie. Chociaż nie jest obsługiwany przez wszystkie przeglądarki, jest obsługiwany przez wszystkie najpopularniejsze przeglądarki – w tym Chrome, Firefox, Edge i Opera.

Chociaż nie jest tak dobrze znany jak JPEG i PNG, WebP może okazać się w przyszłości preferowanym formatem obrazu.

Wniosek:

Istnieje wiele rodzajów formatów obrazów, których można używać w witrynie WordPress, ale ważne jest, aby ocenić przeznaczenie obrazu. Jeśli Twoja witryna jest przeznaczona na przykład dla fotografa ślubnego, chcesz zachować wysokiej jakości obrazy, które nadal szybko się ładują i są przyjazne dla użytkownika ( JPEG ). Jeśli jednak sprzedajesz obrazy w internetowym sklepie z plakatami, będziesz chciał zachować jak najwięcej szczegółów i informacji o obrazach ( PNG ).

Ogólna zasada: jeśli przesyłasz tylko standardowe obrazy do swojego sklepu internetowego, bloga, portfolio, mediów społecznościowych lub witryny mediów społecznościowych – zaleca się przesłanie obrazów w standardowym formacie JPEG, a następnie użycie WP-Optimize jeszcze bardziej skompresować swoje obrazy

Jeśli jednak chcesz zabezpieczyć swoje obrazy w przyszłości i poprawić szybkość ładowania tak bardzo, jak to możliwe, WebP może zaoferować doskonałą kompresję stratną i bezstratną, zachowując jednocześnie wysoki poziom szczegółowości. Cokolwiek zdecydujesz, pamiętaj, aby zawsze kompresować obrazy za pomocą WP-Optimize, aby uzyskać najlepszą na rynku kompresję.