Wybierz przydatne wymiary obrazu dla wyświetlaczy o dużej gęstości

Karta wyświetlana w szerokości 800 pikseli CSS może używać kandydata na obraz o szerokości 1600 pikseli jako przykładu 2x. Przeglądarka może wybrać odpowiednie źródło na podstawie układu, gęstości urządzenia i innych warunków, gdy strona internetowa zapewnia responsywne znaczniki obrazu. Plik 1600 pikseli nie oznacza, że karta powinna zajmować 1600 pikseli CSS na stronie.

Zmierz rzeczywisty układ przed eksportem. Kolumna artykułu, baner o pełnej szerokości i mała karta produktu rzadko wymagają tego samego rozmiaru źródła. Sprawdź także układ telefonu, w którym obraz może zajmować inną szerokość lub użyć innej kadrowania. Umożliwienie, aby każdy plik był dwukrotnie większy, szerokość rzutni pulpitu może zmarnować bajty. Traktuj eksport o wyższej gęstości jako kandydatów do prawdziwej responsywnej implementacji, a nie jednego przewymiarowanego pliku, który musi pobrać każde urządzenie.

Ta strona zaczyna się od WebP Fit Box o wymiarach 1600 na 1600 pikseli. Jest to ilustracja, więc zastąp ją wartościami na podstawie zmierzonego rozmiaru wyświetlacza. Dopasowanie w utrzymuje proporcje i nie powiększa mniejszego źródła. Na przykład szeroki oryginał może osiągnąć 1600 pikseli, podczas gdy portret pasuje do wysokości. Sprawdź rzeczywiste wymiary wyjściowe.

Jeśli źródło ma tylko 700 pikseli szerokości, pisanie eksportu 1600 pikseli nie tworzy szczegółów większego oryginału. Użyj lepszego źródła lub zaakceptuj mniejszego kandydata. Porównaj ostrzenie światła z wyłączonym po zmianie rozmiaru i sprawdź drobne tekstury o zamierzonym rozmiarze wyświetlacza. W przypadku przezroczystej grafiki użyj zamiast tego PNG, ponieważ obecny eksport WebP tutaj jest nieprzejrzysty. Zachowaj oryginalny projekt lub zdjęcie, aby móc później tworzyć różnych kandydatów.

Konwerter tworzy plik; Twoja witryna nadal musi ją wybrać i przedstawić poprawnie. Zapewnij odpowiednich kandydatów do źródła, dokładne wskazówki dotyczące rozmiaru i zarezerwowane wymiary obrazu w implementacji. Telefon nie powinien odbierać największego obrazu tylko dlatego, że istnieje. Sprawdź pobrany obraz w Narzędziach programisty przeglądarki podczas oceny ostatniej strony, ponieważ system zarządzania treścią może go ponownie zmienić.

Wyświetl stronę w ustawieniach ekranu zwykłego i o dużej gęstości oraz porównaj szczegóły z rozmiarem transferu. Obraz o wyższej rozdzielczości nie jest automatycznie najlepszym kompromisem dla małej dekoracyjnej karty. Podobnie, jeden nadmiernie mały obraz może wyglądać źle w dużym widoku produktu. Testuj znaczące treści, takie jak twarze i etykiety, zamiast oceniać tylko rozmyte tło. Zachowaj priorytet ładowania odpowiedniego do pozycji obrazu i zmierz prawdziwą stronę przed stwierdzeniem poprawy szybkości lub podstawowych elementów internetowych.

Załóżmy, że Twoja najszersza karta to 400 pikseli CSS, a ilustracja pozostaje czysta na tej szerokości. Kandydat 800 pikseli jest jednym z możliwych eksportów 2x, gdy źródło go obsługuje. Sprawdź kartę również w węższych układach, ponieważ obraz obejmujący cały ekran telefonu może mieć inną szerokość wyświetlania niż karta pulpitu. Eksportuj z oryginału dla każdego potrzebnego kandydata, zamiast powiększać najmniejszego. Potwierdź, który plik wybiera przeglądarka na rzeczywistej stronie. Ta ostateczna kontrola wyboru jest tym, co łączy obliczenie wymiarów lokalnych z bajtami, które odwiedzający naprawdę otrzymują dla obrazu.