Wybierz właściwy
plik obrazu.
Prywatny odczyt w przeglądarce służący przeglądowi podstawowych metadanych obrazu oraz pytań dotyczących dostawy. Nie wykonuje przesyłania, przechowywania, optymalizacji ani inspekcji pliku poza metadanymi i lokalnymi wymiarami.
UŻYJ TEGO DO: Użyj do przygotowania dyskusji o umiejscowieniu obrazu, kandydatach responsywnych, dostępnym tekście alternatywnym i kompromisach przy dostawie.
Sprawdź punkt wyjścia.
Wybierz lokalny obraz, aby zobaczyć podstawowe metadane zgłaszane przez przeglądarkę i wymiary. SIU nie przesyła, nie wysyła, nie przechowuje, nie optymalizuje ani nie zapisuje wybranego pliku.
WYBIERZ LOKALNY OBRAZ — Nie wybrano obrazu. Nic nie zostało przesłane ani zapisane.
Nic stąd nie wychodzi.
Wybrany obraz pokaże swoją nazwę, zgłaszany przez przeglądarkę typ MIME, rozmiar w bajtach, czas ostatniej modyfikacji oraz lokalnie odczytywalne wymiary.
Podgląd nie jest generowany. Wybierz obraz tylko wtedy, gdy lokalne metadane są przydatne do przeglądu.
Wykonaj następny znany krok.
- Wybierz jeden lokalny obraz. Przeglądarka odczyta jego nazwę, typ MIME, rozmiar w bajtach, znacznik czasu ostatniej modyfikacji oraz — tam gdzie możliwe do odczytania — wymiary pikselowe wyłącznie w pamięci.
- Odnieś wymiary do zamierzonej szerokości renderowanej i gęstości urządzenia; następnie zdecyduj, czy strona potrzebuje wielu kandydatów obrazów lub edycji kompozycji (art direction).
- Przejrzyj kontekst markup: sensowny tekst alternatywny, zadeklarowane wymiary tam gdzie to właściwe, selekcja źródeł responsywnych oraz priorytet ładowania to odrębne decyzje.
- Przechowuj oryginalny zasób zgodnie z przyjętym przez zespół procesem zarządzania zasobami i licencjami. Ta strona nie tworzy pochodnych plików.
Sprawdź wyrenderowaną stronę na docelowych punktach przerwania przy użyciu zatwierdzonej przez zespół przeglądarki i narzędzi wydajności.
Potwierdź tekst alternatywny obrazu i rzeczywisty markup responsywny podczas przeglądu kodu.
Zmierz dostawę w środowisku rzeczywistym zanim stwierdzisz poprawę.
Notatki źródłowe, a nie zapożyczona pewność.
Podstawa planowania: web.dev responsive-image guidance i dokumentacja MDN File API
- web.dev — Responsive images ↗web.dev wyjaśnia, że rozmiar bajtów obrazu może być istotny i opisuje kandydatów responsywnych, srcset, sizes oraz picture w odpowiednich przypadkach użycia.
- MDN — Using files from web applications ↗MDN dokumentuje obiekty File wybrane przez użytkownika oraz lokalnie dostępne metadane: name, type i size.
Autorstwo: Szkic redakcyjny SIU Enablement; operacyjne wskazówki ograniczone do źródeł. Przejrzane przez: Właściciele projektowania, dostępności, wydajności i praw weryfikują obrazy w ich kontekście dostawy. Ponowna weryfikacja: Weryfikuj ponownie przy zmianie umiejscowienia, reguł responsywnych, źródła zasobu lub dostawcy dostawy.