Качество

Растр и вектор 400% zoom

Цена загрузки изображения

Можно сделать вывод, что стоит загружать изображение наиболее подходящее по размеру и не загружать другие изображения.

Расчет цены взят по этой ссылке как 200Мб/7грн

Искусcтво обрезки деревьев фотографий

Что обрезать - горизонталь или вертикаль?

Art direction problem!

Форматы изображений

4 причины использовать Responsive Images

1. Необходимость изменения размеров size изображения
2. Оптимизировать выбор загрузки изображения в зависимомсти от dpi экрана устройства
3. Обрезание части изображения (art direction problem) art в зависимости от ширины экрана
4. Выбор и загрузка разных форматов mime файлов для разных браузеров в зависимости от поддержки браузера

Синтаксис

img src & srcset

Изображения с фиксированной шириной для экранов с различным dpi

Принцип расчета размеров изображения:
ширина * K dpi, длина * K dpi

Пример: 
            K dpi = 1   // 800x600.jpg,
            K dpi = 1.5 // 1200x900.jpg,
            K dpi = 2   // 1600x1200.jpg,
                 

Синтаксис для тега img:

• src для изображения по умолчанию
• srcset задание правил отбора на основе (K dpi) // через запятую

<img src="sea_800x600.jpg"
     srcset="sea_1200x900.jpg 1.5x, 
             sea_1600x1200.jpg 2x"
     width="800" 
     alt="sea"
>
            

Изображения с переменной шириной экранов

// медиаусловия атрибута sizes

Синтаксис для тега img:

• src для изображения по умолчанию
• sizes задание правил отбора на основе ширины экрана
• srcset список изображений с шириной, которая должна попасть под правило отбора (w - ширина экрана) // через запятую

<img sizes="(max-width: 480px) 100vw,
	    (max-width: 800px) 50vw,
	     calc(33vw - 100px)"
     srcset="sea-200.jpg 200w,
	     sea-400.jpg 400w,
	     sea-800.jpg 800w,
	     sea-1600.jpg 1600w"
     src="sea-400.jpg" alt="sea"
>

Браузер может выбирать любой ресурс, который его алгоритмы считают нужным. Можно предпалагать, что браузер будет выбирать таким образом:

    для экрана в 320px подходит правило (max-width: 480px)
    и изображение должно поместиться в 100vw (в 320px)
    из имеющихся файлов подходящит sea-400.jpg под 400w
    и этот файл будет сжат браузером до 320px


    для экрана в 640px подходит правило (max-width: 800px)
    и изображение должно поместиться в 50vw (в 320px)
    итого подходит тот же файл sea-400.jpg под 400w
    и этот файл будет сжат браузером до 320px

Тег picture

Тег picture это контейнер для одного или более элементов <source> и одного элемента <img>

Главное отличие от img - наличие хорошо описанных в спецификации правил отбора изображений

Принцип работы - если условия отбора совпали, то подгружается первый подходящий файл.

Если условия отбора не подошли, то загружается изображение из обязательного тега <img>

Атрибуты тега source:

• srcset ссылка на файл изображения
• media задание правила отбора (ширина, dpi)
• type задание правила отбора по типу данных

<picture>
    <source media="(min-width: 720px)"
            srcset="large.jpg">
    <source media="(min-width: 512px)"
            srcset="middle.jpg">
    <img    src="small.jpg"
            alt="sea">
</picture>
            

<picture>
    <source type="image/webp"
            srcset="sea.webp">
    <source type="image/vnd.ms-photo"
            srcset="sea.jpxr">
    <img src="sea.jpg"
        alt="sea">
</picture>

<picture>
    <source
        media="(min-width: 1024px)"
        srcset="fullImage.jpg">
    <img
        src="cutImage.jpg"
        alt="sea">
</picture> 

Вместо выводов

Для этого сайта были использованы идеи с сайта, который рекомендуется прочитать для закрепления материала