Отправьте подходящий
вариант изображения.
Приватный, исключительно в браузере инструмент для просмотра базовых метаданных изображения вместе с вопросами доставки. Он не загружает, не сохраняет, не оптимизирует и не анализирует файл кроме метаданных и локальных размеров.
ИСПОЛЬЗУЙТЕ ДЛЯ: Используйте для подготовки обсуждения размещения изображения, кандидатов для адаптивной загрузки, доступного альтернативного текста и компромиссов при доставке.
Просмотрите отправную точку.
Выберите локальное изображение, чтобы увидеть базовые метаданные и размеры, сообщаемые браузером. SIU не загружает, не отправляет, не сохраняет, не оптимизирует и не хранит выбранный файл.
ВЫБРАТЬ ЛОКАЛЬНОЕ ИЗОБРАЖЕНИЕ — Изображение не выбрано. Ничего не было загружено или сохранено.
Ничего не покидает эту вкладку.
Выбранное изображение покажет своё имя, MIME-тип, сообщаемый браузером, размер в байтах, время последнего изменения и локально декодируемые размеры.
Превью не создаётся. Выберите изображение только если локальные метаданные полезны для вашей проверки.
Выполните следующий известный шаг.
- Выберите одно локальное изображение. Браузер считывает его имя, MIME-тип, размер в байтах, отметку «последнее изменение» и — если возможно декодировать — пиксельные размеры только в памяти.
- Соотнесите размеры с предполагаемой шириной рендеринга и плотностью устройства; затем решите, нужны ли на странице несколько кандидатов изображения или art direction.
- Просмотрите контекст разметки: информативный альтернативный текст, объявленные размеры там, где это уместно, выбор источников для адаптивности и приоритет загрузки — отдельные решения.
- Сохраните оригинальный исходный файл в соответствии с установленным в команде процессом управления ассетами и лицензирования. Эта страница не создаёт производных файлов.
Проверьте отрисовку страницы на целевых точках перелома с помощью утверждённого в команде браузера и инструментов производительности.
Подтвердите альтернативный текст изображения и фактическую адаптивную разметку в код-ревью.
Измерьте доставку в реальной среде перед тем, как утверждать улучшение.
Заметки об источнике, а не заимствованная уверенность.
Основа планирования: руководство web.dev по адаптивным изображениям и документация MDN по File API
- web.dev — Responsive images ↗web.dev объясняет, что объём байтов изображения может быть существенным, и описывает кандидатов для адаптивных изображений, srcset, sizes и picture для подходящих сценариев использования.
- MDN — Using files from web applications ↗MDN документирует объекты File, выбранные пользователем, и локально доступные метаданные: имя, тип и размер.
Авторство: Редакционный черновик SIU Enablement; оперативное руководство, ограниченное источниками. Проверил(а): Владельцы дизайна, доступности, производительности и прав проверяют изображения в их контексте доставки. Перепроверить: Перепроверяйте при изменении размещения, правил адаптивности, источника ассета или провайдера доставки.