Co to jest Srcset?
Srcset to atrybut obrazu HTML, który określa listę obrazów do wyboru przez przeglądarkę w zależności od rozmiaru ekranu i rozdzielczości. Koncepcja ta znana jest jako responsywne obrazy, zapewniając, że najbardziej odpowiednia wersja obrazu jest ładowana dla różnych warunków oglądania.
Oto przykład działania srcset:
<img srcset="przyklad-obrazu-480w.jpg 480w, przyklad-obrazu-800w.jpg 800w" sizes="(max-width: 600px) 480px, 800px" src="przyklad-obrazu-800w.jpg" alt="Przyklad ilustracji">.W tym przykładzie srcset nakazuje przeglądarce załadowanie obrazu o szerokości 480 pikseli, jeśli szerokość rzutni jest mniejsza niż 600 pikseli. Jeśli szerokość rzutni jest większa niż 600 pikseli, przeglądarka załaduje większy obraz o szerokości 800 pikseli.
Alternatywnie można ustawić gęstość pikseli jako warunek zamiast rozmiaru:
<img srcset="example-image-1x.jpg 1x, example-image-2x.jpg 2x" src="example-image-1x.jpg" alt="Inny przykład ilustracji">.Dlaczego Srcset jest ważny dla SEO?
Srcset ma kluczowe znaczenie dla SEO, ponieważ umożliwia przeglądarkom załadowanie najbardziej odpowiedniego rozmiaru obrazu w oparciu o charakterystykę urządzenia. Ta optymalizacja ma kilka zalet:
- Większa szybkość ładowania: Większe obrazy mają większe rozmiary plików, co może spowolnić czas ładowania strony. Ładując obrazy o odpowiednich rozmiarach dla różnych urządzeń, srcset pomaga zaoszczędzić przepustowość i skrócić czas ładowania strony.
- Lepsze doświadczenie użytkownika: Krótsze czasy ładowania stron zwiększają komfort użytkowania, prowadząc do niższych współczynników odrzuceń i większego zaangażowania.
- Korzyści SEO: Szybkość ładowania strony jest bezpośrednim czynnikiem rankingowym zarówno dla wyszukiwań mobilnych, jak i stacjonarnych. Optymalizacja obrazów za pomocą srcset może pozytywnie wpłynąć na rankingi wyszukiwarek.
Najlepsze praktyki dotyczące responsywnych obrazów
1. Sprawdź PageSpeed Insights pod kątem zaleceń
PageSpeed Insights to bezpłatne narzędzie Google, które zawiera sugestie dotyczące optymalizacji szybkości witryny. Wprowadzając adres URL strony internetowej, można otrzymać konkretne zalecenia dotyczące optymalizacji obrazu, takie jak:
- Aktualizacja formatu obrazu w celu lepszej kompresji.
- Rozważenie leniwego ładowania dla obrazów poza ekranem lub ukrytych.
- Prawidłowy rozmiar obrazów w celu poprawy czasu ładowania.
2. Użyj elementu obrazu dla kierunku artystycznego
Element <picture> umożliwia przeglądarkom wyświetlanie różnych obrazów w zależności od charakterystyki urządzenia. Jest to przydatne, gdy chcesz wyświetlać zupełnie różne obrazy, a nie tylko różne rozmiary tego samego obrazu.
Oto przykład użycia elementu <picture>:
<picture> <source media="(min-width: 600px)" srcset="example-image.jpg, example-image-2x.jpg 2x"> <img src="example-image.jpg" alt="Przykładowa ilustracja"> </picture>W tym przykładzie, example-image.jpg lub example-image-2x. jpg będą wyświetlane w przeglądarkach o szerokości 600px lub większej, w zależności od gęstości pikseli urządzenia. W przypadku szerokości ekranu mniejszej niż 600px lub jeśli element <picture> nie jest obsługiwany, zamiast niego zostanie wyrenderowany element <img>. Zawsze dołączaj element <img>, aby zapewnić kompatybilność.
3. Zapewnienie prawidłowego powrotu
Zawsze dostarczaj obraz awaryjny z atrybutem src w przypadku, gdy przeglądarka nie obsługuje srcset lub elementu <picture>. Zapewnia to, że obraz jest zawsze wyświetlany, niezależnie od możliwości przeglądarki.
4. Używaj opisowego tekstu alternatywnego
Zawsze dołączaj opisowy tekst alternatywny do swoich obrazów. Poprawia to dostępność i zapewnia kontekst dla wyszukiwarek, poprawiając SEO.
Wnioski
Korzystanie z srcset jest istotną praktyką w optymalizacji obrazów dla różnych urządzeń, zapewniając szybsze czasy ładowania i lepsze wrażenia użytkownika. Postępując zgodnie z najlepszymi praktykami, możesz poprawić wydajność swojej witryny i SEO, czyniąc ją bardziej wydajną i dostępną dla użytkowników.
