Jak przyspieszyć działanie witryny, naprawiając obrazy?

Niezoptymalizowane (lub słabo zoptymalizowane) obrazy są najczęstszą przyczyną powolnego wczytywania Twojej witryny.

Być może Twoja witryna ładuje się szybko, 39% ludzi może NADAL przestać się z nią angażować, jeśli obrazy się nie załadują lub załadowanie zajmie zbyt dużo czasu.

A zdjęcia stanowią 68% całkowitej wagi strony (a to DUŻO!).

Dlatego nie możemy ryzykować, że obrazy pozostaną niezoptymalizowane.

Dlatego postępuj zgodnie z tymi szybkimi technikami, aby zoptymalizować obrazy i zapewnić szybszą prędkość ładowania strony.

Zanim zaczniesz…

Sprawdź, czy obrazy naprawdę są odpowiedzialne za wolne ładowanie Twojej witryny, czy też jest więcej problemów.
Użyj Google PageSpeed ​​Insights, aby przeanalizować szybkość ładowania swojej witryny.

Następnie przewiń w dół do pozycji „ Diagnostyka ” i „ Możliwości ”.

Tutaj możesz szczegółowo przeanalizować KAŻDY parametr mający wpływ na szybkość ładowania i odkryć możliwości jej poprawy.

Raport porusza również kwestie wizerunkowe.

To najszybszy sposób na znalezienie i naprawienie problemów związanych z obrazami (i innych) wpływających na szybkość ładowania witryny.

ALE jest pewien haczyk — narzędzie może znaleźć takie problemy dopiero po kilku tygodniach od opublikowania strony. I nie jest mądrze czekać, ponieważ prędkość ładowania jest czynnikiem rankingowym Google, a Twoje rankingi SERP mogą spaść, jeśli Twoja strona ładuje się powoli.

Dlaczego więc nie zoptymalizować obrazów przed przesłaniem? W końcu lepiej zapobiegać niż leczyć.

Te techniki powiedzą ci DOKŁADNIE, jak to zrobić. Zaczynajmy.

1. Wybierz odpowiedni format obrazu

Właściciele witryn wolą używać tych czterech formatów obrazów:

• JPEG (lub JPG – Joint Photographic Experts Group)

Jest to skompresowany format obrazu o nieco obniżonej jakości. Pliki JPEG najlepiej nadają się do zdjęć lub obrazów z dużą ilością szczegółów i kolorów.

Skompresowany obraz = mniejszy rozmiar pliku = szybsze ładowanie

• PNG (przenośna grafika sieciowa)

Jest to nieskompresowany format obrazu o wyższej jakości, odpowiedni dla obrazów z przezroczystym tłem, takim jak logo, i mniej kolorów.

Pliki PNG są dostępne w dwóch formatach:

• PNG-8

Ma ograniczoną paletę 256 kolorów, ale zmniejszony rozmiar pliku pozwala na szybsze ładowanie.

• PNG-24

Nie ma ograniczonej palety kolorów; dlatego jest to cięższy plik, którego ładowanie trwa dłużej.

• GIF (format wymiany grafiki)

GIFy używają ograniczonej palety 256 kolorów, zapewniając bezstratną kompresję. Najlepiej nadaje się do obrazów animowanych.

Załadowanie GIF-ów zajmuje trochę czasu. Zaleca się używanie obrazów PNG-8 zamiast GIF-ów.

• SVG (skalowalna grafika wektorowa)

JPEG, PNG i GIF to grafika rastrowa (złożona z pikseli), a SVG to grafika wektorowa (złożona ze ścieżek). Tak więc pliki SVG nie potrzebują żądania HTTP, aby załadować plik obrazu.

Wśród nich, który format obrazu jest odpowiedni dla Twojej witryny?

To zależy od twojego celu.

Statystycznie PNG i JPEG to najpopularniejsze formaty używane przez strony internetowe. Są idealnym wyborem ze względu na równowagę między jakością obrazu a szybkością ładowania.

2. Zmień rozmiar obrazów przed ich przesłaniem

Jeśli prześlesz obrazy bez zmiany ich wymiarów, mogą one mieć większe rozmiary niż wymagane.

Aby obrazy zmieściły się na ekranach o różnych wymiarach, przeglądarka musi zmienić ich rozmiar, co pochłania czas i wpływa na szybkość ładowania witryny.

Zmiana rozmiaru przed przesłaniem pomaga dopasować obrazy do określonej przestrzeni na ekranie i szybciej ładować się w przeglądarkach.

Teraz optymalny rozmiar obrazów różni się w zależności od witryny. To zależy od motywu lub projektu Twojej witryny.

Korzystając z wbudowanych narzędzi inspektora, które posiada większość przeglądarek, możesz określić dokładne rozmiary obrazów używanych w Twojej witrynie.

Jeśli chcesz sprawdzić rozmiar obrazów użytych na stronie konkurencji, możesz to zrobić w ten sam sposób.

Wystarczy sprawdzić elementy strony internetowej, kliknąć obraz, a przeglądarka pokaże dokładny rozmiar obrazu.

Rozmiary obrazów mogą się różnić w zależności od celu, takiego jak baner, wyskakujące okienko, przycisk itp. Oto kilka popularnych rozmiarów obrazów (w pikselach), z których korzysta większość witryn internetowych:

Możesz zachować je jako odniesienie do zmiany rozmiaru obrazów, które przesyłasz do swojej witryny.

Szerokość i wysokość postów na blogu lub innych obrazów w treści nie powinna przekraczać odpowiednio 1500 px i 1000 px.

Istnieje kilka sposobów efektywnej zmiany rozmiaru obrazów:

• Korzystanie z Photoshopa

Photoshop to dedykowane oprogramowanie do edycji zdjęć. Zachowuje szczegóły i ostrość obrazów podczas zmiany rozmiaru.

Wybierz Obraz > Rozmiar obrazu . Pojawi się okno dialogowe. Pokaże Ci aktualny rozmiar obrazu.

Wprowadź wymagane wymiary (szerokość i wysokość), aby zobaczyć nowy rozmiar pliku obrazu. Kliknij OK i zmiana rozmiaru jest zakończona.

Możesz zapisać plik w żądanym formacie i przesłać go do swojej witryny.

• Używanie farby

Windows Paint to prostsza alternatywa dla zmiany rozmiaru obrazów przed ich przesłaniem.

Otwórz obraz, którego rozmiar chcesz zmienić w programie Paint. Wybierz zmianę rozmiaru z opcji na pasku narzędzi.

Wprowadź nowe wymiary zgodnie z wymaganiami. (Paint domyślnie zachowuje proporcje.) Kliknij OK i zmień rozmiar obrazu.

Zapisz plik w odpowiednim formacie, a następnie prześlij go na swoją stronę.

• Korzystanie z wtyczki WordPress

Jeśli korzystasz z WordPressa, możesz użyć wtyczki, takiej jak Imsanity, aby zmienić rozmiar swoich obrazów.

Wtyczka automatycznie zmieni rozmiar obrazu, który przekracza określone przez Ciebie limity rozmiaru, i zastąpi go przesłanym obrazem.

3. Kompresuj WSZYSTKIE obrazy

Kompresja minimalizuje rozmiar pliku w bajtach bez pogorszenia jakości obrazów.

Pomaga przyspieszyć transmisję obrazów i zmniejszyć ich przestrzeń dyskową na serwerach.

Upewnij się więc, że skompresujesz każdy obraz przed przesłaniem go do swojej witryny.

Istnieją dwa sposoby zmniejszenia rozmiaru pliku obrazu:

• Stratna

Kompresja stratna w dużym stopniu zmniejsza rozmiar pliku. Niektóre dane pikseli i metadane obrazu, takie jak data, rozdzielczość, wymiary, kolor, urządzenie itp., są usuwane.

Następuje pogorszenie jakości obrazu, ale ludzkie oko nie rozróżnia obrazów nieskompresowanych i skompresowanych.

• Bezstratny

Kompresja bezstratna zapewnia stosunkowo większe rozmiary plików. Nie zmienia danych pikseli, ale usuwa szczegóły z metadanych. Tak więc nie ma utraty jakości obrazu.

Możesz także wybrać poziom kompresji obrazów.

Im wyższy poziom kompresji (lub procent), tym gorsza jakość…

…i mniejszy rozmiar pliku.

Teraz musisz się zastanawiać, kiedy użyć jakiego rodzaju kompresji.

Wybierz bezstratną kompresję, gdy nie możesz iść na kompromis w kwestii jakości. Możesz wybrać odpowiedni poziom kompresji zgodnie z potrzebami. Działa najlepiej w przypadku zdjęć i obrazów na stronach internetowych.

Ale jeśli jakość ma mniejsze znaczenie, wybierz kompresję stratną. Zawsze możesz go użyć do zrzutów ekranu lub podobnych obrazów.

Oto kilka narzędzi internetowych oferujących wydajną kompresję obrazu:

• MałePNG
• Kraken.io
• JPEGmini
• Trimage

Jeśli korzystasz z WordPressa, oto kilka popularnych wtyczek do kompresji obrazu:

• Smush
• Optimole
• Optymalizator obrazu EWWW
• MałePNG
• Kraken.io

4. Użyj sieci CDN dla obrazów (i innych treści)

CDN to rozproszona geograficznie sieć serwerów, która umożliwia szybsze dostarczanie treści w sieci. Poprawia wydajność i szybkość stron internetowych, zapewniając wspaniałe wrażenia użytkownika.

Korzystanie z sieci CDN dla obrazów (i innych treści) przyspiesza działanie witryny na dwa sposoby.

Po pierwsze , obrazy są zoptymalizowane (domyślnie), aby zajmowały mniej miejsca na serwerach pamięci masowej.

Po drugie , Twoje obrazy są przechowywane na wielu serwerach znajdujących się w różnych lokalizacjach geograficznych.

Tak więc za każdym razem, gdy użytkownicy odwiedzają Twoją witrynę, nie muszą wczytywać plików graficznych z serwera pochodzenia. Zamiast tego mogą je pobrać z najbliższego serwera Twojej sieci CDN.

Korzystanie z CDN pomaga poprawić szybkość ładowania strony, ponieważ nauka nadal ogranicza szybkość przesyłania danych. Odległość między serwerem pochodzenia a lokalizacją użytkownika wpływa na szybkość transmisji danych.

Jeśli użytkownik znajduje się daleko od serwera pochodzenia, pobranie obrazów (i innych treści) zajmie mu dużo czasu. A nawet jeśli wczytanie zajmie kilka sekund więcej, użytkownicy wrócą z Twojej witryny.

Ale dzięki CDN użytkownicy będą mogli pobierać obrazy z najbliższego serwera sieciowego. Będzie szybciej, ponieważ odległość między serwerem sieciowym a lokalizacją użytkownika znacznie się zmniejszy.

Musisz więc używać CDN do obrazów.

Istnieje kilka wysokiej jakości sieci CDN dostępnych bezpłatnie w Internecie. Możesz użyć dowolnego z nich i osiągnąć szybsze ładowanie obrazu.

Oto kilka popularnych i wydajnych sieci CDN, które pomogą Ci:

• Cloudflare CDN
• Amazon CloudFront
• Google Cloud CDN
• Imperwa CDN
• CDN77.com
• Gumlet
• Szybko
• CacheFly
• Oprogramowanie do lakierowania
• Bunny.net
• 5 centów

5. Włącz buforowanie przeglądarki

Za każdym razem, gdy użytkownicy odwiedzają Twoją witrynę, muszą pobrać z serwera wszystkie zasoby witryny, takie jak obrazy, pliki HTML i CSS, pliki JavaScript, pliki multimedialne, pliki PDF itp.

Jeśli włączysz buforowanie przeglądarki, nakażesz przeglądarkom internetowym pobranie i zapisanie zasobów Twojej witryny w tymczasowej pamięci lokalnej.

Możesz również poinformować przeglądarki internetowe o:

• Zasoby, które powinny i nie powinny buforować.
• Czas, przez który powinni przechowywać określony zasób w pamięci podręcznej.

Tak więc za każdym razem, gdy użytkownicy ponownie odwiedzają Twoją witrynę, mogą pobrać zasoby z lokalnej pamięci, a nie z serwera.

W ten sposób pomoże to szybciej ładować się stronom internetowym dla powracających gości.

Spójrz na łatwo osiągalną poprawę szybkości ładowania strony

z buforowaniem przeglądarki:

Jest ponad 100 razy szybszy.

Większość narzędzi do testowania szybkości strony sugeruje „wykorzystanie pamięci podręcznej przeglądarki” z tego samego powodu.

Ponieważ ładowanie obrazów w witrynie zajmuje maksymalny czas, włączenie buforowania obrazów w znacznym stopniu przyspiesza ładowanie witryny.

Pamięć podręczną przeglądarki dla obrazów w witrynie można wykorzystać na dwa sposoby:

• Korzystanie z .htaccess

Jest to najczęściej używana metoda implementacji buforowania przeglądarki. Możesz dodać kilka wierszy kodu pamięci podręcznej przeglądarki do pliku .htaccess, aby go włączyć.

W kodzie zdefiniuj typ zasobu, który musi być buforowany i czas, przez jaki musi pozostać w pamięci lokalnej. (Zgodnie z twoimi potrzebami)

To wszystko gotowe, aby Twoje obrazy (i inne zasoby) ładowały się szybciej dla użytkowników.

• Korzystanie z wtyczek (dla witryn WordPress)

Wtyczki automatyzują proces, dodając kod pamięci podręcznej przeglądarki w pliku .htaccess. Ale możesz nie znaleźć z nimi wielu opcji personalizacji.

Oto kilka wtyczek przyspieszających działanie witryny WordPress poprzez włączenie buforowania przeglądarki:

• W3 Całkowita pamięć podręczna
• Najszybsza pamięć podręczna WP
• WP Cloudflare Super pamięć podręczna stron
• WP Super Cache
• Nadmierna pamięć podręczna
• Pamięć podręczna komety

Dzięki temu możesz znacznie skrócić czas ładowania swoich obrazów.

Bonus: Dodaj tekst alternatywny do swoich obrazów

Tekst alternatywny to krótki opis obrazu, który wyraźnie określa, co przedstawia obraz.

Jest to ważne z trzech powodów:

• Przeglądarki wyświetlają tekst alternatywny zamiast obrazów, jeśli użytkownicy korzystają z wolnego połączenia internetowego, a ładowanie obrazów zajmuje trochę czasu.
• Czytniki ekranu czytają na głos tekst alternatywny, aby użytkownicy niedowidzący zrozumieli, o co chodzi w obrazie.
• Wyszukiwarki używają tekstu alternatywnego, aby lepiej zrozumieć zawartość strony i odpowiednio ją uszeregować.

Teraz pisanie tekstu alternatywnego dla obrazów jest prawdopodobnie bardzo łatwe. Musisz pomyśleć o tym, jak opisałbyś obraz swojemu dziecku, a masz w ręku świetny opis alt.
Na przykład odpowiedni tekst alternatywny dla poniższego obrazu to: kot podskakujący w powietrzu.

Wyraźnie opisuje obraz. Użytkownicy mogą zorientować się, o co chodzi w obrazie, nawet jeśli go nie widzą.

Musisz więc dodać tekst alternatywny do wszystkich obrazów, które przesyłasz do swojej witryny.

Ale jeśli już załadowałeś obrazy, możesz łatwo znaleźć te bez tekstu alternatywnego, korzystając z bezpłatnego narzędzia do analizowania witryn.

Analizuje wszystkie obrazy w Twojej witrynie i pokazuje całkowitą liczbę obrazów z brakującym atrybutem alt.
Gdy klikniesz Zobacz więcej , pokażą się adresy URL obrazów, które musisz naprawić.

Możesz zoptymalizować tekst alternatywny tych obrazów i zwiększyć wygodę użytkowników witryny.

Zauważysz również, że Twoje obrazy osiągają lepsze wyniki w wynikach wyszukiwania grafiki Google. To dlatego, że tekst alternatywny jest jednym z najważniejszych czynników rankingowych SEO dla obrazów.

Jest to więc sytuacja korzystna dla wszystkich!

Zwiększ szybkość swojej witryny, optymalizując obrazy

Ponieważ korzystanie z internetu mobilnego będzie stale rosnąć, będziemy oczekiwać jeszcze szybszych i płynniejszych witryn.

Powiedziawszy to, pozostawienie obrazów niezoptymalizowanych jest błędem, którego nigdy nie powinieneś robić. Jeśli twoja prędkość jest niska, użyj powyższych technik, aby zoptymalizować obrazy.

Jestem przekonany, że po ponownym przetestowaniu swojej witryny za pomocą statystyk Google PageSpeed ​​zauważysz znaczną poprawę jej szybkości!

Czy zastosowałeś którąś z technik, o których wspomniałem, aby działały? Jak myślisz, który z nich jest najskuteczniejszy? Powiedz mi o czym myślisz.