Современные браузеры хотят AVIF, старые — WebP, и на всё остальное тоже что-то нужно. Перетащите изображение и забирайте весь набор вместе с разметкой, которая отдаёт каждому посетителю подходящий файл.
Каждое даёт полный набор, а не один файл.
AVIF, WebP и JPEG на 1280 и 360 пикселей, плюс элемент picture на каждое изображение с источниками в правильном порядке.
Укажите папку, где будут лежать изображения, и альтернативный текст, скопируйте разметку и забирайте архив — HTML лежит в нём же текстовым файлом.
Потому что браузер берёт первый источник, который умеет прочитать: AVIF должен идти раньше WebP, а простой img — последним. При неверном порядке каждый посетитель получит самый большой файл из предложенных. Это как раз та часть, которую утомительно писать вручную и легко незаметно испортить.
1280 закрывает ноутбуки и почти все планшеты; 360 закрывает телефоны, где экономия действительно важна. srcset оставляет выбор браузеру, поэтому телефон на медленном соединении никогда не скачает файл для настольного экрана.
Нет. Это обычные файлы: положите их рядом со своим HTML, и разметка заработает. Если позже вы поставите перед сайтом настоящий CDN для изображений, ничего из этого не понадобится, но для горстки изображений на странице, написанной вручную, это и есть вся работа.
То, что показывает изображение, рассказанное человеку, который его не видит. У каждого изображения в пакете своё поле, потому что одно общее описание на десять фотографий не помогает никому. Оставляйте его пустым только если изображение чисто декоративное.
Бесплатный онлайн-оптимизатор изображений