Коды третьего урока

Размеры изображениям

width и height

важно

Инструкция

(скрыть)

Физические размеры изображениям необходимы для того, чтобы браузер не тратил лишнее время на вычисления. А также для того, чтобы браузер забронировал нужное место для изображения.

Размер изображениям задается лишь для объектов типа Image (а не background image). Также размер проставится всем изображениям в каталоге и многих других стандартных блоках.

Скопируй код и вставь его в блок T123 в самом низу страницы.
Замени внутри alt на нужный, если это нужно или удали эту строчку.

<!-- Сделала Fedyaeva http://front-test.tilda.ws/links ♥ -->
<style>
    img{aspect-ratio: auto 16 / 9;} .t-img, .t-tildalаbеl__img, .t776__img, .tn-atom__img {height: auto;}
</style>
<script>
function addImageAttribute() {
    let images = document.querySelectorAll('.tn-atom__img, .t-img, .t776__img, .t-tildalаbеl__img');
    
    for (let [index, image] of images.entries()) {
        let width = image.naturalWidth;let height = image.naturalHeight;image.setAttribute('width', width);image.setAttribute('height', height);
        
        // Удалить строчку, если сайт целиком сделан на зеро блоках         
        image.setAttribute('alt', 'Описание изображений');
    }
}

window.addEventListener("load", (evt) => {addImageAttribute();setTimeout(()=> {addImageAttribute();}, 500);});
</script>

Простая вставка в блок HTML

одно изображение + x2/x3

Инструкция

(скрыть)

Этот код используем, если не хочется заморачиваться и стоит цель — просто загрузить 2x и 3x изображения для какого-то блока. Уточню, что в ненешних реалиях 3x загружать не обязательно. Ибо лишь малый процент пользователь пользуется такими устройствами.

Чтобы тильда не сжала наши большие изображения — по возможности загружаем их на свой хостинг.

Скопируй код и вставь его внутрь HTML-блока в Zero Block
Замени ссылки, а также проставь реальные размеры загружаемой картинки внутрь width и height (не 2x и 3x, а обычной).
При подключении 2x и 3x изображений не стирай "2x" после ссылки, иначе браузер не поймет, что мы от него хотим.
Проверь загрузку картинки через вкладку сеть.
Если хочется написать свои стили изображению. К примеру, задать 100% высоту — сотри строчку style="" внутри тега <img> и напиши класс элементу {подробнее было в презентации}

Стили, если указан класс:

.класс_картинки {
    width: 100%;
    height: auto;
    object-fit: cover;
}


<img src="сслыка на основное изображение" 
       srcset="ссылка на изображение с двойной плотностью пикселей 2x, 
               ссылка на изображение с тройной плотностью пикселей 3x"
       style="width: 100%; height: auto; object-fit: cover;"
       alt="Краткое текстовое описание" 
       width="1680" height="1059" loading="lazy">

Разные форматы

webp и avif

Инструкция

(скрыть)

Этот код подключает на страницу изображения в разных форматах: avif и webp. Внутри в атрибуте srcset можно поставить запятую и вывести 2x версию уже для современных форматов по примеру:

srcset="https://dl.dropboxusercontent.com/s/bmkxhehm6gwxvo2/banner.avif?dl=0, https://dl.dropboxusercontent.com/s/dos05ldw3jv2z8w/banner2x.avif?dl=0 2x"

Скопируй код и вставь его внутрь HTML-блока в Zero Block
Замени ссылки, а также проставь реальные размеры загружаемой картинки
Проверь загрузку ресурса во вкладке сеть


<picture>
    <source srcset="ссыла на изображение avif" type="image/avif">
    <source srcset="ссыла на изображение webp" type="image/webp">
    
	<img 
	    src="ссылка на основное изображение"
        style="width: 100%; height: auto; object-fit: cover;"
        alt="Краткое текстовое описание" 
        width="1680" height="1059" loading="lazy">
</picture>

Диапазон ширин

Инструкция

(скрыть)

С помощью этого кода выводим изображения для разного диапазона ширин. Ширина изображения должна соответствовать диапазону, который мы пишем после ссылки. Т.е. для диапазона 375w — картинка должна быть 375px или чуть более. Не нужно бояться, что при этом ретина экраны получат картинку 375px, ведь браузер устройства выберет больший размер картинки, если он есть.

Скопируй код и вставь его внутрь HTML-блока в Zero Block
Замени ссылки, а также проставь реальные размеры загружаемой картинки
Проверь загрузку ресурса во вкладке сеть


<img 
	src="ссылка на основное изображение" 
    srcset="ссылка на изображение шириной-375 375w, 
            ссылка на изображение шириной-640  640w,
            ссылка на изображение шириной-920 920w,
            ссылка на изображение шириной-1200 1200w"
    style="width: 100%; height: auto; object-fit: cover;"
    alt="Краткое текстовое описание" 
    width="1680" height="1059" loading="lazy">

Ширины + форматы

wh + avif + webp

Инструкция

(скрыть)

Использовать ширины можно и для других форматов изображений, сделав подключение одновременно и современных форматов, и изображений для разных экранов. Этим способом в повседневной разработке я пользуюсь редко.

Скопируй код и вставь его внутрь HTML-блока в Zero Block
Замени ссылки, а также проставь реальные размеры загружаемой картинки
При необходимости удали ненужные ширины или напиши свои
Не забывай, что размер картинки должен соответствовать указанному диапазону
Проверь загрузку ресурса во вкладке сеть


<picture>
    <source srcset="ссылка 375w, ссылка 640w, ссылка 920w, ссылка 1200w" type="image/avif">
    <source srcset="ссылка 375w, ссылка 640w, ссылка 920w, ссылка 1200w" type="image/webp">
    
	<img 
	    src="ссылка на основное изображение"
	    srcset="ссылка 375w, ссылка 640w, ссылка 920w, ссылка 1200w"
        style="width: 100%; height: auto; object-fit: cover;"
        alt="Краткое текстовое описание" 
        width="1680" height="1059" lazyload="lazy">
</picture>

Медиазапросы

(max-width: 480px)

Инструкция

(скрыть)

Если хочется вывести отдельное изображение для мобильной версии (правильно обрезанное и дополнительно сжатое), то используй этот код. Принцип работы медиазапросов есть на странице первого урока, но приведу пример:

media="(max-width: 480px)" Это изображение будет показано до 480px
media="(min-width: 480px) and (max-width: 640px)" Это изображение будет показано после 480px и до 640px
media="(min-width: 640px)" Это изображение будет показано после 640px

Указать строчек <source> с медиазапросом внутри можно столько, сколько нужно. Написать медизапрос можно и для других форматов.

Скопируй код и вставь его внутрь HTML-блока в Zero Block
Замени ссылки, а также проставь реальные размеры загружаемой картинки
Замени значение в медиазпросе при необходимости
Проверь загрузку ресурса во вкладке сеть


<picture>
    <source media="(max-width: 480px)" srcset="ссылка на изображение для телефона">
    
	<img 
	    src="ссылка на основное изображение"
        style="width: 100%; height: auto; object-fit: cover;"
        alt="Краткое текстовое описание" 
        width="1680" height="1059" lazyload="lazy">
</picture>

Ориентация

landscape & portrait

Инструкция

(скрыть)

Этот код подойдет в случае, когда при повороте экрана нужно загрузить другую версию изображения.

Скопируй код и вставь его внутрь HTML-блока в Zero Block
Замени ссылки, а также проставь реальные размеры загружаемой картинки
Проверить загрузку картинки можно на реальном устройстве или в браузере


<picture>
    <source media="(orientation: landscape)" srcset="ссылка на изображение">
    <source media="(orientation: portrait)" srcset="ссылка на изображение">
    
	<img 
	    src="ссылка на основное изображение"
        style="width: 100%; height: auto; object-fit: cover;"
        alt="Краткое текстовое описание" 
        width="1680" height="1059" lazyload="lazy">
</picture>

Фон шейпу

background

Инструкция

(скрыть)

Этот код подойдет, чтобы загрузить в шейп свое изображение в более высоком качестве, а также чтобы убрать дубликаты загружаемых изображений. Можно смело использовать только webp.

Чтобы загрузить фон шейпу:

Добавь пустой шейп на страницу, задай ему класс
Скопируй код и вставь его в блок T123
Замени название класса и ссылку на изображение
Если хочется использовать прогрессивное подключение — скопируй код 9 и так же замени в нем название класса и ссылки.

Чтобы сократить количество одинаковых фонов:

Добавь фоновое изображение в шейп или фоном в первом блоке, скопируй ссылку на изображение
Задай всем остальным шейпам или блокам одинаковый класс
Скопируй код 8 и вставь в блок T123
Замени название класса и ссылку на изображение


<style>
    .shape-bg .tn-atom {
        background-image: url('ссылка на изображение');
        background-size: cover;
        background-repeat: no-repeat;
    }
</style>


<style>
    /*Продвинутое подключение*/
    .shape-bg .tn-atom {
        background-size: cover;
        background-repeat: no-repeat;
        
         /*Будет работать везде */
        background-image: url('https://static.tildacdn.com/tild6137-3065-4838-b161-346434656331/banner.jpg'); 
        
         /*Для браузеров, которые уже знают, что это такое, но не до конца */
        background-image: -webkit-image-set(
          "https://dl.dropboxusercontent.com/s/59dy0prsma8cb0h/banner.webp?dl=0https://www.dropbox.com/s/59dy0prsma8cb0h/banner.webp?dl=0" type("image/webp"), 
          "https://static.tildacdn.com/tild6137-3065-4838-b161-346434656331/banner.jpg"
        ); 
         /*Для браузеров, которые уже знают, что это такое*/
        background-image: image-set(
          "https://dl.dropboxusercontent.com/s/59dy0prsma8cb0h/banner.webp?dl=0https://www.dropbox.com/s/59dy0prsma8cb0h/banner.webp?dl=0" type("image/webp"),
          "https://static.tildacdn.com/tild6137-3065-4838-b161-346434656331/banner.jpg" type("image/jpg") 
        );  
    }
</style>

Бесшовный фон

background

Инструкция

(скрыть)

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

Сделай из своей текстуры бесшовную размером 200-400 пикселей или скачай нужную с припиской seamless
Загрузи изображение фоном в шейп или фоном в блок
Скопируй код и вставь в блок T123. Обрати внимание, что в коде есть стили для фона в блок и для фона в шейп.
Замени название класса и напиши размер своего бесшовного фона.


<!--Бесшовный фон-->
<style>
    /*Для шейпа*/
    .seamless-bg .tn-atom {
        /*Указываем размер бесшовной картинки*/
        background-size: 156px!important; 
        background-repeat: repeat!important;
    }
    /*Для фона блоку*/
    .uc-block .t396__carrier { 
        background-size: 156px!important; 
        background-repeat: repeat!important; 
    }
</style>

Проверка webp

webp

Инструкция

(скрыть)

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

Задай класс шейпу (как это было в примере Фон шейпу)
Скопируй код и вставь в блок T123
Замени внутри кода класс после классов .webp и .nowep на свой, проставь свои ссылки на изображения


<style>
    .webp .shape-bg .tn-atom {
        background-image: url('https://dl.dropboxusercontent.com/s/59dy0prsma8cb0h/banner.webp?dl=0https://www.dropbox.com/s/59dy0prsma8cb0h/banner.webp?dl=0')!important;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .nowebp .shape-bg .tn-atom {
        background-size: cover;
        background-repeat: no-repeat;
        
        background-image: url('https://static.tildacdn.com/tild6137-3065-4838-b161-346434656331/banner.jpg');
    }
</style>
<script>
async function supportAVIF() {
    const AVIF = new Image();
    await (AVIF.onload = AVIF.onerror = function () {
        if(AVIF.height==2){
            window.detectAvif=true;
            document.body.classList.add('avif');
            return true;
        } else{
            document.body.classList.add('noavif')
            return false;
        }
    })
    await (AVIF.src = 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=');
}
supportAVIF();
async function supportWEBP() {
    const WEBP = new Image();
    await (WEBP.onload = WEBP.onerror = function () {
        if(WEBP.height==2){
            window.detectWebp=true;
            document.body.classList.add('webp')
            return true
        }else{
            document.body.classList.add('nowebp')
            return false;
        }
    })
    await (WEBP.src = 'data:image/webp;base64,UklGRi4AAABXRUJQVlA4ICIAAABQAQCdASoDAAIAAgA2JQBOgC6gAP73M8eLuxHGTv3eIAAA');
};
supportWEBP();
</script>

Связаться