Podczas wdrażania witryny internetowej programiści zwykle wykorzystują ten sam obraz dla wszystkich rozmiarów ekranu, co nie jest dobrą praktyką, ponieważ przy zmianie rozmiaru nie można polegać na przeglądarce. W takiej sytuacji działają obrazy responsywne, które zapewniają pobranie obrazu w rozmiarze i jakości odpowiedniej dla danego urządzenia, zwiększając w ten sposób prędkość ładowania strony.
Jak zwiększyć szybkość ładowania strony za pomocą responsywnych obrazów?
Aby zwiększyć szybkość ładowania strony za pomocą responsywnych obrazów, rozważ następujące metodologie:
Przykład 1: Zwiększ prędkość ładowania strony za pomocą responsywnych obrazów przy użyciu atrybutu „srcset”.
Najwygodniejszym podejściem do stosowania responsywnych obrazów może być użycie „ zestaw źródłowy ” atrybut zgromadzony w „ ”znacznik. Atrybut ten umożliwia programiście określenie różnych rozmiarów obrazu, a przeglądarka automatycznie wybiera najbardziej odpowiedni obraz ze względu na wielkość ekranu użytkownika. Poniżej demonstracja:
DOCTYPEhtml >
< HTML >
< głowa >
< meta zestaw znaków = „utf-8” >
< meta nazwa = „widok” treść = „szerokość=szerokość-urządzenia, skala-początkowa=1” >
< tytuł > tytuł >
głowa >
< ciało >
< obraz źródło = „F:\PRACA ARTYKUŁY TECHNICZNE\imgre.png” wszystko = „Responsywny obraz”
zestaw źródłowy = 'F:\JOB ARTYKUŁY TECHNICZNE\imgre.png 400w, F:\JOB ARTYKUŁY TECHNICZNE\imgre.png 800w, F:\JOB ARTYKUŁY TECHNICZNE\imgre.png 1200w'
/>
ciało >
HTML >
W tym kodzie:
- „ zestaw źródłowy ” zawiera atrybut, który za każdym razem zawiera ścieżkę obrazu i różne szerokości.
- Chodzi o to, że obraz „ F:\PRACA ARTYKUŁY TECHNICZNE\imgre.png 400w ” reprezentuje ścieżkę obrazu o szerokości „ 400 ”piksele.
- Na podstawie tych informacji przeglądarka analizuje najodpowiedniejszy obraz do pobrania w oparciu o rozmiar ekranu użytkownika, tak aby mniejsze ekrany wyświetlały mniejsze obrazy, oszczędzając w ten sposób przepustowość.
Wyjście
Przykład 2: Zwiększ prędkość ładowania strony za pomocą responsywnych obrazów, określając różne gęstości pikseli
W tym przykładzie zostanie określona ścieżka obrazu wraz z różną gęstością pikseli dla wyświetlaczy o wysokiej rozdzielczości. Można to osiągnąć poprzez „ zestaw źródłowy ”, pokazany poniżej:
DOCTYPEhtml >< HTML >
< głowa >
< meta zestaw znaków = „utf-8” >
< meta nazwa = „widok” treść = „szerokość=szerokość-urządzenia, skala-początkowa=1” >
< tytuł > tytuł >
głowa >
< ciało >
< obraz źródło = „F:\PRACA ARTYKUŁY TECHNICZNE\imgre.png” wszystko = „Responsywny obraz” zestaw źródłowy = 'F:\PRACA ARTYKUŁY TECHNICZNE\imgre.png 1x, F:\PRACA ARTYKUŁY TECHNICZNE\imgre.png 1.5x, F:\PRACA ARTYKUŁY TECHNICZNE\imgre.png 2x'
/>
ciało >
HTML >
W tym fragmencie kodu trzykrotnie określ ścieżkę obrazu, zmieniając gęstość pikseli. Polega to na tym, że przeglądarka wybiera najbardziej odpowiedni/odpowiedni obraz, aby zapewnić najwyższą jakość na różnych ekranach.
Notatka: „ 1x ” piksel to wartość domyślna, więc użytkownik może zdecydować, czy powiązać go ze ścieżką obrazu, czy nie.
Wyjście
Przykład 3: Zwiększ prędkość ładowania strony za pomocą responsywnych obrazów, używając atrybutu „rozmiary”.
W niektórych sytuacjach może wystąpić ograniczenie polegające na tym, że rzeczywisty rozmiar obrazu na ekranie różni się od szerokości ekranu. Aby rozwiązać ten problem, „ rozmiary ” można wykorzystać do uwzględnienia rozmiaru obrazu w odniesieniu do zapytań o media lub stałego rozmiaru. Poniżej znajduje się demonstracja kodu:
DOCTYPEhtml >< HTML >
< głowa >
< meta zestaw znaków = „utf-8” >
< meta nazwa = „widok” treść = „szerokość=szerokość-urządzenia, skala-początkowa=1” >
< tytuł > tytuł >
głowa >
< ciało >
< obraz źródło = „F:\PRACA ARTYKUŁY TECHNICZNE\imgre.png” wszystko = „Responsywny obraz” zestaw źródłowy = 'F:\JOB ARTYKUŁY TECHNICZNE\imgre.png 50w, F:\JOB ARTYKUŁY TECHNICZNE\imgre.png 800w, F:\JOB ARTYKUŁY TECHNICZNE\imgre.png 1200w'
rozmiary = '(maksymalna szerokość: 800px) 100vw, 800px'
/>
ciało >
HTML >
W tym bloku kodu „ rozmiary ” atrybut integruje zapytania o media i rozmiary. Pomaga przeglądarce wybrać rozmiar obrazu w zależności od szerokości ekranu użytkownika. Dzięki temu obrazy nie przekraczają docelowej maksymalnej szerokości.
Wyjście
Ważne uwagi dotyczące korzystania z atrybutu „sizes”.
Istnieją pewne ograniczenia w używaniu opcji „ rozmiary ”, a także wymienione poniżej:
- W przypadku korzystania z wielu zapytań o media w „ rozmiary ”, upewnij się, że wybrano pierwsze prawdziwe zapytanie o media. Upewnij się także, że zapytania o media są uporządkowane od najbardziej szczegółowych do najmniej szczegółowych.
- Atrybut „rozmiary” nie obsługuje rozmiarów procentowych, ponieważ przeglądarka nie jest świadoma, jak szeroki będzie element określony w procentach, dopóki nie pozna szerokości elementu nadrzędnego.
Przykład 4: Zwiększ prędkość ładowania strony za pomocą responsywnych obrazów za pomocą elementu „
„
< HTML >
< głowa >
< meta zestaw znaków = „utf-8” >
< meta nazwa = „widok” treść = „szerokość=szerokość-urządzenia, skala-początkowa=1” >
< tytuł > tytuł >
głowa >
< ciało >
< zdjęcie >
< źródło głoska bezdźwięczna = „(maksymalna szerokość: 100 pikseli)” zestaw źródłowy = „F:\PRACA ARTYKUŁY TECHNICZNE\imgbanner.png” />
< obraz źródło = „F:\PRACA ARTYKUŁY TECHNICZNE\imgre.png” wszystko = „Responsywny obraz” />
zdjęcie >
ciało >
HTML >
Zgodnie z tymi liniami kodu:
- Określić '
” element, który gromadzi „ <źródło> ” dla różnych obrazów i pozwól przeglądarce wybrać odpowiedni w zależności od rozmiaru ekranu użytkownika. - Ponadto, jeśli żaden z „ <źródło> ” elementy są odpowiednie do rozmiaru ekranu, obraz określony w „
” służy jako rezerwowy.
- W rezultacie w nieprzewidzianym przypadku zostanie dodany alternatywny obraz, utrzymując w ten sposób zwiększoną prędkość ładowania strony.
Wyjście
Wniosek
Szybkość ładowania strony można zwiększyć za pomocą responsywnych obrazów za pomocą „ zestaw źródłowy ”, określając różne gęstości pikseli, korzystając z atrybutu „ rozmiary ” lub poprzez atrybut „