Jak zoptymalizować obrazy, aby poprawić szybkość strony i SEO witryny?

Jednym z częstych błędów, które zauważyłem podczas przeglądania aktualnych i aktualnie opracowywanych stron internetowych pod kątem strategii SaaS SEO, jest to, że obrazy są słabo zoptymalizowane pod kątem ogólnego stanu i szybkości witryny. Wszyscy słyszeliśmy cytat „Obraz jest wart tysiąca słów”. Choć to banał, to prawda i być może warta jeszcze więcej.

Obrazy przyciągają naszą uwagę i pomagają nam odnieść się do tego, co widzimy. Tworzą historię i mają tendencję do robienia o wiele trwalszego wrażenia niż tylko duży tekst. Wiele osób lubi pobierać obrazy stockowe z serwisów fotograficznych wolnych od praw autorskich, takich jak Unsplash.

Google nadaje priorytet szybkim stronom. Ignorując niezbędne kroki w celu optymalizacji obrazu, przygotowujesz się do trudnej bitwy. Liczba obrazów dodanych do strony bezpośrednio wpływa na szybkość ładowania. Im więcej obrazów ma strona, tym wolniejsze będzie ładowanie. W tym przewodniku odwiedzimy 5 kroków, które przechodzę podczas optymalizacji obrazów pod kątem szybkości strony i wyszukiwarek.

Przycinanie i zmiana rozmiaru obrazu

Domyślnie pobrane zdjęcie jest bardzo duże i wysokiej jakości. Decyzja o tym, jak duży lub w jakiej rozdzielczości powinien być ten obraz, zależy od największego rozmiaru obrazu, który będzie oglądany. Ludzie myślą, że mają najwyższej jakości wizerunek, aby zaimponować swoim klientom, a nawet sobie, ale nie zdają sobie sprawy z tego bardzo negatywnego wpływu. Decydując o tym, jaki rozmiar powinien mieć obraz, zastanów się, w jakim największym rozmiarze obraz będzie oglądany.

Nie musisz mieć wymiarów obrazu 6000 x 6000 pikseli, jeśli będzie on używany tylko do małego zdjęcia profilowego lub zdjęcia w głowę, które będzie widoczne w rozdzielczości 300 x 300 pikseli. Z mojego doświadczenia wynika, że ​​największym obrazem na stronie będzie obraz bohatera na górze. Bezpiecznym rozmiarem, który można utrzymać przy zachowaniu jakości, byłoby ustawienie standardowego rozmiaru HD o rozdzielczości 1920 x 1080 pikseli.

Porady i wskazówki: Jeśli obraz banera dla bloga lub strony internetowej ma nieco niższą jakość, niż byś chciał, rozważ zastosowanie przezroczystej nakładki. Dzięki temu będzie wyglądał, jakby był częścią projektu, a każdy tekst będzie łatwiejszy do odczytania.

Poniżej używam Figmy do zmiany rozmiaru i przycinania obrazu. Proces jest bardzo łatwy, ponieważ wszystko, co musisz zrobić, to przeciągnąć i upuścić, a następnie zmienić obraz według własnych upodobań. Oto dwie kontrolki, których potrzebujesz, aby poprawnie edytować obraz za pomocą Figma w systemie Windows.

• Shift + Drag — skaluje cały obraz w górę lub w dół, zachowując ten sam współczynnik.
• Ctrl + Drag — zmieni tylko wysokość lub długość bez rozciągania obrazu.

Eksportowanie jako różne typy plików

Ważne jest, aby zastanowić się, jakiego formatu pliku chcesz użyć. Wiele formatów może służyć różnym celom. Każdy ma swój własny zestaw zalet i wad w zależności od poglądu użytkownika. Oto tylko kilka z najczęstszych, które zwykle widzę:

• PNG — dobre w przypadku projektów graficznych lub obrazów, w których potrzebne są drobne szczegóły. Jest to kosztem większego rozmiaru pliku.
• JPEG — do fotografowania ludzi i miejsc w prawdziwym życiu. Można go znacznie bardziej skompresować, ale stracić nieco więcej informacji, ponieważ nie potrzebujesz w nich tak wielu szczegółów.
• SVG — doskonały do ​​ikon i logo, ponieważ można je skalować w górę i w dół bez utraty jakości. Może to działać tylko na utworzonych plikach graficznych.
• WEBP — nowsza wersja obrazów, która może zastąpić PNG i JPEG. WEBP ma podobną jakość obrazu do obu, a jednocześnie jest w stanie zaoszczędzić 25%-40% miejsca. Jedynym minusem jest to, że obecnie przeglądarka Safari firmy Apple nie obsługuje tego, więc do załadowania potrzebne są zapasowe pliki JPEG lub PNG.
• GIF — są to klipy wideo lub animacje, które mają tendencję do odtwarzania w pętli. Są dobre do uchwycenia sceny lub pokazania, jak może działać interfejs produktu. W tym artykule znajdziesz kilka dobrych przykładów ich wykorzystania. Ponieważ są to animowane sekwencje obrazów, zwykle będą miały większy rozmiar pliku w porównaniu z pojedynczym obrazem.

Lubię używać JPEG, kiedy tylko mogę, ponieważ wymaga najmniej danych, ale tutaj używam PNG, aby zapewnić nieco większą przejrzystość zrzutów ekranu. Podobnie jak w przypadku WEBP, mogą istnieć jeszcze nowsze formaty, więc najlepszą praktyką jest ciągłe badanie, w jaki sposób Google wyświetla i ocenia każdy z dostępnych, aby znaleźć najszybszą i najlepszą odpowiedź dla Twojej strony internetowej. Oto link do bardziej szczegółowego przewodnika po najpopularniejszych typach obrazów.

Użyj kompresora obrazu

Następnym krokiem będzie próba uzyskania jak najmniejszego pliku poprzez skompresowanie i zmniejszenie rozmiaru pliku. Przechodząc do kompresora obrazu i przetwarzając obraz, czasami możemy uzyskać nawet 90% mniejszy rozmiar pliku. Naprawdę przydatnym narzędziem, którego lubię używać, jest Compressor. Korzystając z tego narzędzia, możesz skompresować do 50 obrazów dziennie w bezpłatnym abonamencie.

Tutaj biorę wyeksportowany obraz i przeciągam go bezpośrednio do sekcji upuszczania obrazu. Po kilku sekundach nowy obraz jest gotowy do pobrania i ma mniej niż jedną dziesiątą oryginalnego rozmiaru. Możesz także zaimportować wiele obrazów i pobrać je wszystkie jednocześnie, jak pokazano z opcją na dole.

„Leniwy” kontra „Chętny” wczytuje Twoje obrazy

Teraz, gdy masz już swój obraz w odpowiednim formacie i skompresowany do odpowiedniego rozmiaru, możesz pomyśleć, że wszystko jest w porządku, ale wciąż musisz upewnić się, że zrobisz kilka innych rzeczy. W wielu szablonach i witrynach prędkość ładowania obrazów jest ustawiona domyślnie przez przeglądarkę, co może powodować jednoczesne wczytywanie wszystkich obrazów na stronie. Rozwiązaniem tego problemu jest leniwe ładowanie obrazu.

Ładowanie „leniwe” odracza wczytywanie elementu do momentu, gdy będzie on widoczny na stronie. Jeśli masz więcej niż kilka obrazów, może to poprawić wydajność witryny. Przeciwieństwem tego jest ładowanie „chętne”, które od razu ładuje element. Zwykle jest to zgodne z domyślnym ustawieniem sieciowym, ponieważ nie ma ustawionych preferencji, dla którego obraz powinien zostać załadowany jako pierwszy lub ostatni.

Oto przykład w edytorze blogów HubSpot. Po przejściu do opcji zaawansowanej dla wstawionego obrazu widzimy, że możemy ustawić jego ustawienie ładowania. Wybierz „Leniwy” i naciśnij Zastosuj. Obraz pojawia się teraz, gdy użytkownik przewinie się do niego znacznie bliżej i skróci te cenne czasy ładowania.

Pamiętaj, aby dodać tekst alternatywny

Ostatnią rzeczą do odwiedzenia jest umieszczenie tekstu alternatywnego w obrazach. Może to nie wpłynąć na szybkość ładowania strony, ale zawsze należy je rozważyć i dodać. Gdy zostawisz tę sekcję pustą, tracisz wiele możliwości zwiększenia rankingu SERP.

Ważną rzeczą, na którą należy zwrócić uwagę, jest to, że tekst alternatywny wyjaśnia „dlaczego” obraz w odniesieniu do treści. Jest indeksowany przez google i czytany na głos dla osób niedowidzących. Jeśli wstawiasz do obrazu tylko jedno słowo kluczowe, które nie wyjaśnia, co się dzieje, może to nie być najlepsze podejście.

Tutaj dodałem tekst alternatywny do obrazka. Opieram to na frazie SEO site speed health. Zamiast umieszczać tylko słowo kluczowe, wyjaśnij również, jak lub jaka jest akcja na obrazie. Postanowiłem rozwinąć, używając frazy „Sprawdzanie stanu szybkości strony SEO za pomocą wykresów”.

Jest to o wiele więcej informacji na temat tego, czym obraz może być indeksowany przez Google i zapewnia większą dostępność dla osób niedowidzących.

Przyjrzyjmy się krokom tworzenia/optymalizacji obrazów:

1. Przeciągnij obraz do edytora obrazów, takiego jak Figma, aby przyciąć i zmienić rozmiar.
2. Wyeksportuj go jako odpowiedni typ obrazu (PNG, JPEG, SVG, WEBP itp.)
3. Zabierz go do witryny kompresora obrazów, takiej jak Compressor lub Image Resizer Online
4. Wstaw skompresowany obraz do treści jako leniwe ładowanie.
5. Dodaj tekst alternatywny opisujący obrazy na Twojej stronie.
6. Masz teraz idealny obraz dla swojej witryny!
7. Zajrzyj do Google Search Console, aby sprawdzić wzrost wydajności.

Postępuj zgodnie z tymi krokami, a będziesz na dobrej drodze do utrzymania i optymalizacji obrazów pod kątem SEO i przyspieszenia szybkości strony, tworząc fantastyczne wrażenia użytkownika!