Optymalizacja zdjęć na stronie internetowej pod SEO

Data: 8 lutego, 2022

Optymalizacja zdjęć na stronie internetowej pod SEO

Wysokiej jakości, ciekawe grafiki są niezwykle istotnym elementem każdej strony internetowej. To właśnie dzięki nim jesteśmy w stanie przykuć uwagę osób odwiedzających naszą witrynę i skłonić ich, aby zapoznali się z resztą zamieszczonych na niej materiałów.  Niemniej jednak to właśnie obrazy są częstym winowajcą zbyt powolnego ładowania się strony. Optymalizacja strony pod kątem grafiki jest więc bardzo ważna, aby odbiorcy Twoich treści mogli cieszyć się szybkim i bezproblemowym przeglądaniem Twojej witryny. 

Jak przyśpieszyć stronę internetową?

Z pewnością spotkałeś się z sytuacją, w której strona internetowa, na którą chciałeś wejść, ładowała się zbyt długo. Takie zdarzenia zwykle budzą frustrację i zniechęcają odwiedzających do dalszego scrollowania strony. Bardzo dynamiczny rozwój technologii sprawia, że przyzwyczailiśmy się do tego, aby wszystko działało jak najszybciej i jak najsprawniej. Chcesz przyśpieszyć swoją stronę, skupiając uwagę odbiorców na Twoich treściach? 

 

Prawdopodobnie odpowiedziałeś twierdząco na poprzednie pytanie. Z tego względu, koniecznie powinieneś zapoznać się z naszym artykułem. Jeżeli posiadasz stronę internetową swojej firmy, zadbaj o to, aby jej funkcjonowanie było jak najlepsze. Za zbyt wolne ładowanie w znacznej większości przypadków odpowiadają niezoptymalizowane zdjęcia oraz pliki. Jeżeli nie chcesz odstraszyć swoich potencjalnych klientów, koniecznie zapoznaj się z naszymi sposobami na udoskonalenie Twojej strony internetowej.

pagespeed-strony-internetowej

Co za dużo, to niezdrowo. Zmniejsz grafiki!

Pierwszą rzeczą, jaką powinieneś wykonać, jeżeli chcesz zwiększyć funkcjonalność swojej strony, jest zmniejszenie wymiarów obrazu. Nie każda sytuacja wymaga użycia grafiki o dużych wymiarach. Dzięki dostosowaniu jej rozmiaru do realnych potrzeb, zmniejszysz wagę zdjęcia, a co za tym idzie, w mniejszym stopniu obciążysz swoją stronę internetową. 

 

Jeżeli prowadzisz sklep internetowy, oczywiste staje się, że na Twojej stronie będzie znajdowało się wiele zdjęć produktów. W tym przypadku w szczególności musisz zadbać o to, aby obrazy znajdujące się w sekcjach były dostosowane do tego, jaką funkcję mają pełnić. Dla przykładu, zamieszczając zdjęcia, które mają służyć jako miniatury produktów, warto wstawić w rozmiarze 200×300 px – znacząco przyspieszy to twoją stronę.

Chcesz zoptymalizować obraz? Zmień format pliku!

Kolejnym, niezwykle popularnym sposobem na usprawnienie strony internetowej jest zoptymalizowanie obrazów za pomocą zmiany formatu pliku. Najczęściej spotykanymi zapisami obrazów są: JPEG, PNG, SVG, oraz GIF. Główna różnica pomiędzy tymi formatami polega na sposobie ich wykorzystania. Każdy z nich posiada szereg cech, które wpływają na to, do czego mogą być zastosowane. Niektóre z nich nie mogą być wykorzystywane w pewnych sytuacjach, inne wręcz przeciwnie. Do czego więc się ich używa?

 

Format JPEG jest zwykle stosowany przy wielobarwnych obrazach, takich jak, np. fotografie. Jego największym minusem jest to, że uniemożliwia zastosowanie przezroczystości. Aby stworzyć transparentne tło, wybierz format PNG, który pomimo ograniczonej palety kolorystycznej daje taką możliwość. Format SVG odpowiada grafice wektorowej, która charakteryzuje się wysokim stopniem ostrości, nawet przy wielokrotnym powiększeniu obrazu. GIF, tak jak PNG, również dysponuje ograniczoną liczbą kolorów, co pozwala na maksymalne skompresowanie pliku. Z tego względu format GIF jest wykorzystywany do animacji.

Zadbaj o jak najmniejszy rozmiar plików

Do wymienionych w poprzednim akapicie przykładów możemy dołączyć format WebP. Mimo, że jest powszechnie używany i został opracowany ponad 10 lat temu, jego nazwa może brzmieć obco w szczególności, jeżeli nie czujesz się specjalistą w dziedzinie grafiki. Format WebP jest udoskonaloną kombinacją swoich poprzedników. Dlaczego udoskonaloną? Porównując zdjęcia w formacie PNG i WebP o takich samych wymiarach szybko zauważysz, że fotografia w formacie WebP ma niemal dziesięciokrotnie mniejszy rozmiar niż jej przeciwnik.  

 

Dlaczego warto kompresować obrazy? Korzystając ze słabego łącza, osoba odwiedzająca Twoją stronę, może nie zobaczyć zbyt dużych grafik znajdujących się na niej. Duży rozmiar obrazów wpłynie również na czas ładowania strony. Wykorzystując strony takie jak Compressor.io lub TinyPNG w łatwy sposób dostosujesz obrazy na Twojej stronie do realnych potrzeb. Skompresowane zdjęcia wciąż będą wyraźne oraz będą doskonale się prezentować. Nie spowolnią Twojej witryny, co jest niezwykle silnym argumentem przemawiającym za kompresowaniem obrazów.

Wybieraj proste grafiki i usuwaj metadane

Jeśli nie chcesz, aby grafiki umieszczane na Twojej stronie były dla niej zbyt dużym obciążeniem, zwracaj uwagę na to, czy stopień ich skomplikowania jest dostosowany do Twoich potrzeb. Nie w każdej sytuacji będziesz potrzebować bardzo szczegółowych obrazów. Wybieranie ich prostszych odpowiedników zmniejszy obciążenie strony. 

 

Usuwanie metadanych również w nieznacznym stopniu zmniejszy rozmiar Twoich obrazów. Prawdopodobnie nie będą to duże wartości, jednak usuwanie tego elementu niesie za sobą dodatkowe korzyści związane z bezpieczeństwem. Metadane zdjęcia zawierają informacje o tym, gdzie i kiedy została wykonana fotografia oraz jakie urządzenie zostało do tego celu użyte. Wydawać by się mogło, że takie informacje nie są istotne, jednak warto je ukryć. 

Nie zapominaj o smartfonach!

Nie ulega wątpliwości, że większość osób przegląda treści w Internecie na swoich smartfonach. Nie ma nic gorszego niż korzystanie ze strony, która nie została przystosowana do korzystania z niej w wersji mobilnej. Potencjalny klient wchodzący na Twoją stronę internetową, widząc, że posiadasz jedynie jej desktopową wersję, ucieknie z niej, zanim zdążysz policzyć do pięciu. Rozwiązaniem tej kwestii jest responsywna strona. 

 

Jako że ponad połowa, bo aż 60% ruchu w Internecie odbywa na urządzeniach mobilnych, musisz koniecznie o takową zadbać! Niezależnie od tego, czy osoby odwiedzające Twoją stronę włączą ją na telefonie, czy laptopie, zawsze będzie się ona wyświetlała w prawidłowy sposób. Dzięki responsywności  możliwe jest dopasowanie rozmiaru grafiki do rodzaju urządzenia, na którym jest wyświetlana. 

 

Jak już wspomnieliśmy we wcześniejszej części artykułu, rozmiary grafik mogą wpływać na szybkość ładowania się strony. Tworzenie jej responsywnej wersji umożliwia wyświetlanie mniejszej ilości obrazów na smartfonach, co usprawni jej ładowanie. Okrojenie wersji strony internetowej na telefony nie tylko sprawi, że będzie się ona szybciej wyświetlać, ale również będzie miała przyjemniejszy interfejs. 

Lazy loading, czyli leniwe ładowanie strony

Jest to kolejny sposób na zoptymalizowanie ładowania Twojej strony internetowej w przypadku urządzeń mobilnych. Lazy loading polega na tym, że w danym momencie możliwe jest zobaczenie tylko najważniejszych elementów zasobów znajdujących się na Twojej stronie. Po zastosowaniu tej techniki, użytkownik będzie widział kolejne zdjęcia po przejściu do niższych sekcji strony. 

 

Lazy loading znajduje zastosowanie przy infinite scroll, czyli tak zwanym nieskończonym przewijaniu. Opiera się ono na postępującym wyświetlaniu treści na stronie wraz z przewijaniem jej w dół. W tym przypadku często rezygnuje się z tworzenia zakładek lub ogranicza się je do minimum. To rozwiązanie przyspieszy ładowanie Twojej strony, a co za tym idzie, sprawi, że korzystanie z niej stanie się przyjemniejsze. 

Jak zoptymalizować grafikę – XnConvert

Pierwszym krokiem, jaki musisz wykonać, jest wyeksportowanie grafiki do formatu JPEG. Do tego celu użyj dowolnego edytora zdjęć.

Jakie parametry powinna mieć Twoja grafika umieszczona na stronie internetowej, aby jej nie spowalniać?

 

  • maksymalne wymiary na hero: 2500 pikseli (dłuższy bok),
  • maksymalne wymiary do sekcji: 1500 pikseli (dłuższy bok),
  • optymalny rozmiar: 180 kb.

 

Pobierz darmowe narzędzie, jakim jest XnConvert. Dzięki niemu zoptymalizujesz rozmiar swojej grafiki. Jak dostosować grafikę do strony internetowej, wykorzystując ten program?

  • Uruchom XnConvert,
  • Otwórz zakładkę “Wejście”, a następnie przeciągnij interesującą Cię grafikę lub użyj przycisku “Dodaj pliki” (zdjęcia możesz dodawać masowo),
  • Przejdź do zakładki “Akcje” i kliknij “Dodaj akcję”, wybierz “Obraz” i “Zmień rozmiar”,
  • W sekcji “Tryb” z menu rozwijanego wybierz opcję “Dłuższy bok”, a następnie wpisz interesujący Cię rozmiar (np. 1500 pikseli),
  • W zakładce “Wyjście” ustal folder, do którego chcesz przenieść przekonwertowane grafiki,
  • W zakładce “Wyjście” możesz również wybrać format, do którego chcesz wyeksportować zdjęcie (np. JPEG). W sekcji “Format” kliknij ”Ustawienia” i ustal jakość zdjęcia (rekomendowana 50),
  • Wybierz przycisk “Konwertuj” – Twoje zmniejszone zdjęcia znajdą się w wybranym przez Ciebie wcześniej folderze. 

 

Źródła:

https://www.xnview.com/en/xnconvert/