Aby Twoja strona była szybka i zoptymalizowana pod kątem wyszukiwarek, ważne jest prawidłowe ustawienie obrazów. Jednym z kluczowych aspektów jest optymalizacja obrazów za pomocą atrybutu srcset. Srcset to atrybut HTML, który pozwala wybierać obrazy do wyświetlenia w zależności od rozmiaru ekranu użytkownika. Dzięki temu możesz zwiększyć efektywność ładowania strony i poprawić jej szybkość.
Co to jest srcset i jak to działa?
Atrybut srcset pozwala programistom internetowym wskazać przeglądarkom kilka wariantów obrazów do wyboru. Przeglądarka określa rozmiar ekranu i wybiera optymalny obraz do wyświetlenia. To pozwala oszczędzać transfer danych i przyspieszać ładowanie strony.
Na przykład, tak wygląda użycie atrybutu srcset:
<img src="small.jpg"
srcset="medium.jpg 1000w, large.jpg 2000w"
alt="Opis obrazu">
W tym przykładzie przeglądarka użyje small.jpg jako głównego obrazu, jeśli rozmiar ekranu nie jest określony. Ale jeśli rozmiar ekranu przekracza 1000 pikseli szerokości, to wyświetli medium.jpg, a jeśli więcej niż 2000 pikseli - large.jpg.
Jak prawidłowo używać srcset?
-
Twórz zoptymalizowane obrazy: Zanim dodasz atrybut srcset, upewnij się, że Twoje obrazy są zoptymalizowane pod kątem szybkości ładowania. Używaj formatów, które wspierają kompresję bez utraty jakości, takich jak WebP.
-
Wybieraj rozmiary obrazów: Twórz kilka wersji jednego obrazu o różnych rozdzielczościach. To pozwoli przeglądarce wybrać optymalny obraz dla danego rozmiaru ekranu.
-
Dodaj atrybut srcset do tagu obrazu: Wstaw atrybut srcset i wskaż ścieżki do różnych wersji obrazów wraz z ich szerokością. To pomoże przeglądarce prawidłowo dobrać obraz do wyświetlenia.
-
Nie zapominaj o atrybucie sizes: Dodanie atrybutu
sizespozwoli Ci wskazać przeglądarkom, jakie rozmiary obrazów używać przy różnych rozdzielczościach.
Ogólnie rzecz biorąc, użycie srcset jest ważnym krokiem w poprawie wydajności Twojej strony internetowej. Prawidłowo skonfigurowany srcset pomoże zapewnić optymalne ładowanie obrazów i poprawi doświadczenia użytkowników.