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

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

width и height

Инструкция

(скрыть)

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

Скопируй код и вставь его в блок T123
Замени внутри alt на нужный
Если сайт сделан целиком в Zero Block — удали строчку с alt и не забудь указать alt в свойствах изображения внутри зеро блока

<!-- Сделала Fedyaeva http://front-test.tilda.ws/links ♥ -->
<style>
    .t776__img, .t-img, .t-tildalаbеl__img, .tn-atom__img {height: auto;}
</style>
<script>
function addImageAttribute() {
    let images = document.querySelectorAll('.t776__img, .tn-atom__img, .t-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 загружать не обязательно.

Важно помнить, что при загрузке в блок изображения больше 1680 px — тильда самостоятельно уменьшает его до этого значения. А значит все изображения 2x и 3x нужно загружать на свой хостинг.

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

Стили, если указан класс:
.класс_картинки {
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">

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

web и 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 или чуть более.

Скопируй код и вставь его внутрь 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 пикселей
Загрузи изображение фоном в шейп или фоном в блок
Скопируй код и вставь в блок 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>

Связаться