как загрузить картинку через input
Как сделать так что бы выбранная картинка пользователем, загрузилась в img и реализовать это с помощью javascript. Я в этом новичок, пробовала искать в интернете но варианты не подошли. Буду благодарна за помощь.
Отслеживать
задан 21 сен 2019 в 12:04
user327919 user327919
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Если я все правильно понял, Вам нужен URL.createObjectURL :
Как загрузить изображение в html
Когда занимаешься версткой и созданием всяких хитростей с картинками (обычно с подменой при наведении или даже их анимацией), всегда вспылывает такой нюанс как заторможенная подгрузка картинки/изображения. На первый взгляд проблема не такая уж серьезная и, как только картинки загрузятся, все работает отлично, но вот этот первый hover эффект, который пытается загрузить картинку и одновременно заменить её, создает такой эффект рывка, который не редко смотрится не очень красиво и может испортить первое впечатление пользователей вашего сайта.
С анимацией дела обстоят еще хуже. Представьте, например, что вам нужно реализовать на JS (JQuery) проезжаюшую легковую машину, заменяюшуюся через 2 секунды автобусом. Изображения с машиной и автобусом разные. При этом они начнут подгружаться только в тот момент, когда браузер получит на них ссылку с возможностью подгрузки (то есть в начале анимации). На загрузку такой картинки нужно будет несколько секунд. То есть получается, что половину двухсекундной анимации это изображение только будет подгружаться — это не порядок.
Но это все можно исправить предзагрузкой (предварительной загрузкой) изображений, которая позволяет подгружать картинку в буфер сразу при загрузке основной страницы (или даже перед этим). Об этом я и хочу рассказать в данной заметке.
Предзагрузка картинок на JavaScript (JQuery)
Вариант с загрузкой на JS, как мне кажется, один из самых лучший, особенно если вы имеете дело с анимацией. Его суть в том, что вы просто посредством JavaScript создаете копию картинки и загружаете её в буфер браузера, тем самым при необходимости уже не нужно будет подгружать картинку, так как она уже будет предварительно загружена.
Сложно звучит? =) А выглядит всего лишь вот таким кодом, где нужно заменить путь к картинке на свой и все будет работать:
//создаем JQuery функцию, которая будет подгружать изображения в буфер jQuery.preloadImages = function() < for(var i = 0; i < arguments.length; i++) < jQuery("![]()
").attr("src", arguments[ i ]); > >; //указываем путь к изображению, которое нужно подгрузить $.preloadImages("/tpl/testimg.png");
Если же вам нужно подгрузить несколько изображений, то вы просто можете перечислить их через запятую, вот так:
$.preloadImages("imageone.jpg", "dirname/imageok.jpg", "/tpl/testimg.png");
Картинок может быть любое количество. Главное не забывайте про JQuery функцию, без нее предзагрузка работать не будет.
У этого способа есть и недостатки, например в том, что он зависит от того, включен ли JS в браузере пользователя. Но по личному опыту скажу, что если равняться на тех, у кого выключен JS, то в современных технологиях сайтостроения очень много не удастся реализовать. Да и таких юзеров, я думаю, не так уж много. Вообще нужно равняться на большинство, а большинство не кастомизирует браузер до такой степени.
Я лично во многих проектах предпочитаю использовать именно такой способ подгрузки ввиду того, что он удобен в реализации.
Предзагрузка изображений с помощью новых возможнестей HTML5
Этот способ появился относительно недавно ввиду того, что сама технология HTML5 была запущена не так давно. Суть его в том, что вы проставляете ссылку на картинку через тег link, а в атрибуте rel (тип подгружаемого элемента) вы прописываете, что это предзагрузка. Тем самым браузер видит этот тег и автоматически загружает в буфер картинку.
Делается это добавлением в html код вот такого тега (только ссылку на изображение меняете на свою):
Здесь в rel прописано 2 параметра: prerender — для его величества Chrome и prefetch — для остальных браузеров. Если вы хотите подгружать большее число картинок, то копируете тег и заменяете ссылку нужное количество раз:
Плюс этого способа в том, что отключение JS никак не повлияет на предзагрузку, но лично я вижу 2 явных недостатка:
1) Технология HTML5, а значит и этот способ предзагрузки, поддерживается далеко не всеми браузерами. Сейчас, правда, браузеры обновляются и большинство современных развивающихся браузеров распознают HTML5, но всеравно это еще далеко от идеала.
2) Более грамоздкий в отличае от JS реализации, ведь придется каждое изображение описывать отдельным тегом (причем с разными параметрами rel, что бы добиться чего-то близкого к кроссбраузерности).
В общем считаю, что этот способ перспективен, но ему нужно время. Сейчас в нем не хватает универсальности.
Предварительная загрузка картинок на проверенном временем HTML
Самая первая идея, которая приходит обычно в голову на чистом html — это создать div блок с параметром CSS «display:none;», в нем картинку и это должно стать предзагрузкой. На самом деле это не работает, браузер начнет загрузку в буфер только тогда, когда display станет отличное от none.
Но я придумал способ с использованием хитростей CSS. Расскажу подробнее про него.
Размещение в невидимом блоке через CSS opacity и position (позиционирование)
В CSS есть такое свойство — opacity. Его предназначение — менять прозрачность и изменить прозрачность можно вплоть до нуля. Кроме того, в CSS есть еще и свойство position, которое нужно для позиционирования элемента на странице (можно попиксельно сдвигать блок с информацией хоть куда в пределах и за пределы видимости страницы). Все это нам и пригодится:
Тем самым мы получаем невидимый блок c картинкой, который еще и фактически расположен за пределами видимой пользователю информации. Таким видом позиционирования за пределами экрана, кстати, часто пользуются, если хотят создать какой-то невидимый блок, частенько видел как вшивают ссылки на бесплатные шаблоны именно таким образом. Так что вы тебе все знаете =)
Если вы хотите сделать прелоад нескольких картинок таким способом, то достаточно их указать внутри div блока, вот так:
Виталий Жуков 
06.03.2015
Как загрузить изображение в html
Все любят картинки! Тег для вставки изображений на страницу.
Время чтения: 7 мин
Открыть/закрыть навигацию по статье
- Кратко
- Пример
- Как пишется
- Атрибуты
- src
- alt
- width и height
- srcset
- sizes
- loading
- decoding
- Алёна Батицкая советует
- В каких случаях нужно использовать атрибут srcset? Как браузер будет его обрабатывать?
- Алёна Батицкая ,
- Вадим Макеев
Контрибьюторы:
- Светлана Коробцева ,
- Никита Дубко ,
- Александр Рассудихин
Обновлено 22 февраля 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
Тег
добавляет изображение на страницу.
Растровые, векторные — любые, поддержка форматов уже зависит от браузера.
Пример
Скопировать ссылку «Пример» Скопировано
img src="logo.png" alt="Логотип: собака, бегущая за мячом, изображено схематично">Как пишется
Скопировать ссылку "Как пишется" Скопировано
Тег
одиночный, у него нет закрывающей пары, контент в него не положить.
Ссылка на картинку и другие параметры задаются с помощью атрибутов.
Атрибуты
Скопировать ссылку "Атрибуты" Скопировано
src
Скопировать ссылку "src" Скопировано
Обязательный атрибут. В качестве значения указывается адрес картинки. Абсолютная или относительная ссылка до файла в любом допустимом формате.
alt
Скопировать ссылку "alt" Скопировано
Тоже обязательный атрибут. Текст в alt называется альтернативным описанием изображения и рассказывает словами, что изображено. Это полезно, если картинка не загрузилась или пользователь не видит изображения.
Если забыть добавить атрибут, то скринридер попытается прочесть название файла: в лучшем случае это будет logo - large , но может быть и b764b84c , что не очень информативно. Если оставить значение атрибута пустым, то скринридер посчитает это изображение декоративным, а не контентным. Если вы добиваетесь именно этого — отлично, но тогда, возможно, стоит вставить его как фоновую картинку с помощью CSS.
Когда картинка по какой-то причине не загружается, браузеры отображают вместо неё альтернативный текст. Его даже можно стилизовать, если задать текстовые стили тегу
.
Подробнее о том, что записывать в alt , узнаете из «Как описывать картинки».
width и height
Скопировать ссылку "width и height" Скопировано
При помощи атрибутов width и height размеры изображения задаются прямо в HTML. Вы можете спросить: зачем так, ведь стиль нужно задавать с помощью CSS? Это нужно, чтобы избежать прыжков контента при загрузке страницы. Частая ситуация, когда картинка очень тяжёлая, а скорость интернета пользователя невысокая.
Если размеры не заданы в атрибутах, то
займёт место как строка текста. После загрузки картинка встанет на страницу, подвинув остальной контент. Пользователей обычно очень раздражают такие скачки. Они теряют место, где читали, а браузеру приходится перерисовывать страницу заново.
- width — ширина изображения в пикселях.
- height — высота изображения в пикселях.
При этом сами единицы измерения px указывать не нужно, браузер поймёт.
srcset
Скопировать ссылку "srcset" Скопировано
Самый простой способ предложить браузеру версию картинки с повышенным разрешением — указать её в атрибуте srcset :
src="logo.png" srcset="logo@2x.png 2x" alt="Логотип: собака, бегущая за мячом, изображено схематично">img src="logo.png" srcset="logo@2x.png 2x" alt="Логотип: собака, бегущая за мячом, изображено схематично">Для этого не нужен целый элемент , достаточно атрибута.
Также атрибут srcset можно использовать в сочетании с атрибутом sizes , чтобы подсказать браузеру, какие варианты картинок есть, и помочь ему выбрать подходящие ситуации.
sizes
Скопировать ссылку "sizes" Скопировано
HTML даёт возможность загружать разные изображения в зависимости от разных условий. Частая ситуация: разные картинки под разные ширины экранов.
- srcset — атрибут, принимающий несколько строк, разделённых запятой. Каждая строка должна содержать ссылку на картинку и указание фактической ширины картинки, значения разделяются пробелом. При этом после ширины ставится единица измерения w, а не px.
- sizes — атрибут, в котором указывается одно или несколько условий через запятую. Каждая строка состоит из медиавыражения и ширины блока для картинки, разделённых пробелом. Ширину блока для картинки можно указывать в любых единицах измерения, кроме процентов.
src="logo-large.png" srcset block-code__original-line"> logo-small.png 320w, logo-medium.png 480w, logo-large.png 800w" sizes block-code__original-line"> (max-width: 320px) 280px, (max-width: 480px) 440px, 800px" alt="Логотип: собака, бегущая за мячом, изображено схематично">img src="logo-large.png" srcset=" logo-small.png 320w, logo-medium.png 480w, logo-large.png 800w" sizes=" (max-width: 320px) 280px, (max-width: 480px) 440px, 800px" alt="Логотип: собака, бегущая за мячом, изображено схематично">Как браузер читает эти атрибуты:
- Смотрит на ширину экрана устройства.
- Пытается определить подходящее условие из списка в атрибуте sizes .
- Смотрит на размер блока для изображения к этому медиавыражению.
- Загружает то изображение из списка в srcset , которое имеет тот же размер, что и выбранный слот. Если такого нет, то загрузится первое изображение, которое больше размера выбранного слота.
При чтении кода из примера выше:
- На экранах от 0 до 320 пикселей загрузится logo-small.png.
- На экранах от 321 до 480 пикселей загрузится logo-medium.png.
- На всех прочих ширинах (или если браузер не поддерживает эти атрибуты) загрузится logo-large.png.
Браузер остановит проверку и чтение атрибутов, как только найдёт совпадение с условием. Поэтому располагайте условия от меньших к большим.
loading
Скопировать ссылку "loading" Скопировано
По умолчанию браузеры читают HTML-код страницы и ставят в загрузку все картинки, которые найдут в тегах
. Это хорошо для пользователя, ведь это контент страницы, и его не нужно будет ждать.
Но бывает, что картинок на странице много, и нам нужно как-то подсказать браузеру: вот эти пока не загружай, дождись, пока пользователь до них прокрутит — и можно начать загрузку. В общем, сам разберись. Удобно, правда?
Для этого можно указать поведение картинки в атрибуте loading :
- eager , то есть немедленно (по умолчанию, как если вообще не указывать атрибут);
- lazy , то есть лениво.
Атрибут сравнительно свежий, и стоит свериться с таблицей поддержки, но это не так важно: атрибут loading работает как улучшение, и если браузер его не поддерживает, то ничего не сломается.
decoding
Скопировать ссылку "decoding" Скопировано
Перед тем, как показать загруженную картинку, браузер декодирует её — превращает набор байтов в набор пикселей по подходящим алгоритмам. Для больших изображений декодирование может занимать сотни миллисекунд, во время которых страница блокируется.
Если изображения не настолько важны, как текст вокруг них, можно попросить браузер декодировать картинки асинхронно. Тогда браузер приступит к их декодированию попозже, когда самое важное уже будет нарисовано. Или наоборот, можно попросить браузер: «Вот эта картинка очень важная, её нужно декодировать прямо сейчас».
Подсказки задаются в атрибуте decoding :
- async — декодировать асинхронно (можно попозже, когда получится);
- sync — синхронно (нужно прямо сейчас);
- auto — автоматически (браузер, решай сам).
Как и атрибут loading , атрибут decoding можно добавлять как прогрессивное улучшение, потому что в старых браузерах ничего не сломается, а в понимающих этот атрибут — станет лучше.
Подсказки
Скопировать ссылку "Подсказки" Скопировано
�� Картинка может быть ссылкой: для этого оберните
в .
�� Всегда прописывайте alt для изображения, которое является частью контента и важно для понимания содержимого страницы. Если пользователь открывает страницу в скринридере, или он отключил изображения, или использует озвучивание текста с экрана, то альтернативный текст подскажет, что изображено на картинке. Для декоративных изображений лучше оставить атрибут alt пустым.
�� Прописывайте ширину width и высоту height изображения, чтобы страница загружалась быстрее. Задавая значения этим атрибутам, не пишите px, только числа.
�� Используйте атрибуты sizes и srcset , чтобы ваша картинка адаптировалась к разным устройствам. Получается красиво, а страница загружается быстрее.
Ещё примеры
Скопировать ссылку "Ещё примеры" Скопировано
Мы указали картинке её реальные размеры в атрибутах width и height , а потом задали ей резиновую ширину 50%, и чтобы высота была корректной, добавили height : auto — браузер сам подберёт подходящую высоту, он уже загрузил картинку и всё знает.
src="https://doka.guide/html/img/dogs.png" width="1504" height="541" alt="Три собаки: одна смотрит влево, вторая закрыла глаза и спит, третья смотрит вправо">img src="dogs.png" width="1504" height="541" alt="Три собаки: одна смотрит влево, вторая закрыла глаза и спит, третья смотрит вправо">img width: 50%; height: auto;>img width: 50%; height: auto; >На практике
Скопировать ссылку "На практике" Скопировано
Алёна Батицкая советует
Скопировать ссылку "Алёна Батицкая советует" Скопировано
�� Поскольку картинка — строчный элемент, после неё есть небольшой отступ, похожий на пробел между словами. Иногда этот отступ сильно мешает. Но не все начинающие разработчики понимают, как от него избавиться.
Всё просто! Измени поведение картинки со строчного на блочное ( block ) или строчно-блочное ( inline - block ).
�� Частый дизайнерский приём — наложение поверх картинки цветного оверлея. И если для фоновой картинки это можно сделать при помощи псевдоэлемента, то с тегом
этот приём не сработает. Для этого элемента невозможно задать псевдоэлемент, так уж устроены замещаемые элементы, вроде , ,
и других.
Чтобы реализовать оверлей, нужно будет завернуть картинку в дополнительный блок-обёртку и уже ей задать псевдоэлемент.
div class="parent"> img class="child" src="some-image.jpg" alt="Три собаки, все закрыли глаза и спят"> div>.parent position: relative; width: 50%;> .parent::after content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(255 134 48 / 20%);> .child display: block; width: 100%;>.parent position: relative; width: 50%; > .parent::after content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(255 134 48 / 20%); > .child display: block; width: 100%; >Открыть демо в новой вкладке + Развернуть
На собеседовании
Скопировать ссылку "На собеседовании" Скопировано
В каких случаях нужно использовать атрибут srcset ? Как браузер будет его обрабатывать?
Скопировать ссылку "В каких случаях нужно использовать атрибут srcset? Как браузер будет его обрабатывать?" Скопировано
Скопировать ссылку "Матвей Романов отвечает" Скопировано
Атрибут srcset используется в HTML для указания различных вариантов изображений, которые могут быть использованы в зависимости от размера экрана и разрешения устройства. Это помогает оптимизировать загрузку изображений и улучшить производительность. Его рекомендуется использовать в следующих случаях:
- Адаптивная вёрстка. Если вы хотите предоставить разные версии изображений для различных размеров экрана или разрешений устройств. Например, вы можете предоставить более крупное изображение для устройств с высоким разрешением и меньшее изображение для устройств с низким разрешением.
- Экраны с разной плотностью пикселей. Если вы хотите предоставить изображения с повышенным разрешением для экранов с высокой плотностью пикселей, таких как Retina-экраны Apple. В этом случае вы можете указать изображения с двойным разрешением для таких устройств.
При обработке атрибута srcset браузер выбирает наиболее подходящее изображение на основе доступной ширины и плотности пикселей (DPR) устройства. Браузер проанализирует все варианты и выберет наиболее подходящий, который лучше соответствует текущему экрану. Если указаны несколько изображений с одинаковым шириной и разными DPR, браузер выберет вариант с наибольшим DPR. Если указаны несколько изображений с одинаковыми DPR и разной шириной, браузер выберет вариант с наименьшей шириной, который будет подходящим для устройства.
В этом примере указаны три варианта изображений с различными DPR. Браузер выберет наиболее подходящий вариант в соответствии с разрешением устройства пользователя и загрузит соответствующее изображение.
Всё о добавлении картинок на сайт: теория, инструменты, кейсы, законы и эксперименты
Что достаточно знать веб-мастеру, чтобы изображения на его сайте были полезны для SEO. Обновленный материал.
Поисковые боты иначе обрабатывают картинки, чем текст. Изображения с сайта могут попасть в выдачу, привести ссылки, увеличить релевантность страницы, но для этого их нужно правильно подобрать, загрузить и оформить.
В статье разберем:
- какие важные выводы сделали веб-мастера на своем опыте;
- как оптимизировать картинки: релевантность, формат, размер, сжатие, метатеги и прочее;
- как сжимать, чтобы повысить скорость загрузки;
- как использовать чужие работы без проблем с авторским правом;
- где искать бесплатные изображения со свободной лицензией.
Как учиться на чужом опыте: эксперименты и кейсы с картинками
Как картинка со скунсом повлияла на ранжирование сайта
История о том, как сеошник решил улучшить страницу о борьбе с вредителями газона — скунсами и енотами. Страница выглядела неубедительно и недостаточно информативно.
Сеошник решил разместить изображение больше и качественнее. Он думал так: на странице говорится о вредителях — скунсах и енотах, значит, картинка с вредителем будет в тему. Нашел на стоках фотографию скунса в хорошем качестве и заменил иллюстрацию.
Потом он заметил, что позиции страницы стали падать. Больше ничего не меняли, так что дело было в картинке. Скриншоты и подробности о том, как вышли из ситуации, в статье с кейсом.
Вывод из истории такой: на позиции может повлиять релевантность всех элементов страницы. Нужно сопоставлять содержание картинки и то, что она на самом деле должна иллюстрировать, а также смотреть выдачу раздела Картинки и страницы конкурентов.
Важна ли уникальность картинок для SEO
При прочих равных, для SEO все уникальное лучше, чем скопированное у кого-то. Но если заказывать картинки у дизайнера или фотографа, придется тратить деньги, предоставлять товар для фотосессий или согласовывать моделей. Скачать на стоке не в пример проще. Стоит ли затрат польза от уникальности картинок на сайте?
Это можно проверить, если выяснить, воспринимает ли поисковик картинки со стоков как дубли, и вредят ли они позициям сайта в выдаче.
Сеошники «Reboot Online» основательно подошли к эксперименту:
- придумали несуществующий термин в качестве ключевого запроса;
- создали десять сайтов с похожей структурой, чтобы ни один не выигрывал за счет более удачного распределения внутренних ссылок;
- написали для них разные тексты, но одинаковой длины и похожими вхождениями ключей вплоть до места на странице;
- зарегистрировали сайты на разных доменах, с разными IP, доменными регистраторами и даже учетки Google Консоли у них были разные;
- нигде не публиковали ссылки на сайты и следили, чтобы во время эксперимента ни на одном не было живых пользователей;
- для пяти сайтов собственноручно сделали 50 фотографий, для других пяти скачали со стоков 50 картинок.
Три месяца оптимизаторы ждали результатов, и они получились показательные — сайты с фотографиями, которых интернет раньше не видел, занимали более высокие места в выдаче.
Возможно, уникальность картинок важна не для всех тематик. К примеру, интернет-магазинам часто проще взять фотографии товаров у поставщиков, чем устраивать фотосессии для тысяч позиций, и представители поисковых систем это понимают. Оптимизаторы тестировали контентную тематику, а не e-commerce, поэтому данных нет.
Скриншоты, графики, ход эксперимента и распределение сайтов по выдаче в статье.
Как создать инфографику, которая принесет ссылки и плюсы к репутации
Получить обратные ссылки на сайт можно с помощью картинок, обычно для этого отрисовывают инфографику, наглядные схемы или графики. Если сторонние сайты их размещают, они указывают источник, отсюда и появляются обратные ссылки.
Агентство SEOgene поделилось с нами примером такой работы. Они сделали инфографику и за счет нее получили 100+ естественных ссылок с релевантных сайтов, а также на 70% увеличили целевой трафик с Pinterest.
- Понять, о чем делать инфографику: посмотреть выдачу по нужным ключам и придумать, что можно визуализировать.
- Собрать базу площадок, где есть устаревшая инфографика по теме.
- Написать актуальное наполнение, собрать ТЗ и заказать дизайн.
- Распространить инфографику на своих площадках и на сторонних тематических.
- Начать аутрич: обратиться к площадкам по собранной базе, предложить размещение другим площадкам.
- Найти тех, кто разместил картинку без ссылки, и попросить добавить.
Подробно ход действий с пояснениями компания описала в статье, там есть и примеры, и графики со статистикой.
Как оптимизировать изображения
Как учесть все требования SEO для картинок
Подбираем нужный формат под разные устройства, сжимаем, чтобы картинка быстро загружалась, и заполняем метатеги для индексирования в поисковой выдаче. Ключевые советы вкратце:
Выбор файла
Важна уникальность, но товары — исключение, их фотографии можно брать у поставщика.
Картинка попадет в сниппет мобильной выдачи, если бот сможет определить, что точно на ней изображено. Для этого товар или предмет, о котором статья, должен быть по крупно по центру картинки, без лишних деталей на фоне.
Самые важные изображения лучше помещать в верхней части страницы, принцип такой же, как у ссылок и ключей.
По совету SEO-эксперта Деми Мурыча, для выхода в топ одно изображение должно быть в оригинале, в трех вариантах для мобильных превью, в вариантах с соотношением сторон 16:9 и 4:3. Это нужно, чтобы картинка корректно отображалась на всех возможных устройствах.
Сжатие и ускорение загрузки
Лучше выбирать способы, исходя их отображения на странице. Если картинка будет маленькой без приближения, можно уменьшить размер и палитру.
- уменьшить размер;
- уменьшить палитру;
- использовать видео вместо GIF;
- удалить лишние метаданные.
Если картинка будет большой и качество очень важно, лучше не портить ее сильным сжатием, а настроить ленивую загрузку по скроллу или клику на превью.
Заполнение метатегов
Метатеги нужны, чтобы помочь ботам понять содержание картинки, но не все они обязательны к заполнению:
- Alt — нужен обязательно, это описание для поисковика. Выглядит как естественное предложение с ключевыми словами.
- Title — по желанию, это описание для пользователей, которое видно при наведении на картинку. Выглядит как один исчерпывающий запрос.
- Figure — не нужен. Он сигнализирует, что картинку нужно воспринимать отдельно от контента страницы.
Над названием файла тоже нужно поработать: dog.png лучше, чем img-229u54.png.
Остальные нюансы и подробности с объяснениями в большом руководстве по SEO для изображений.
Один из способов сжать без потери качества — использовать формат WebP
WebP — формат графических изображений. В 2010 году Google разработал его в качестве альтернативы для PNG и JPEG.
Сжатие в этом формате основано на алгоритме сжатия ключевых кадров видеокодека VP8, а упаковывается в контейнер на основе RIFF. В итоге формат сохраняет такое же качество при меньшем размере картинки. При сжатии с потерями размер будет в среднем на 30% меньше, чем в JPEG, а без потерь в среднем на 25% меньше, чем PNG.
Почти все новые версии браузеров уже поддерживают этот формат.
Но у пользователя может быть устаревшая версия. На этот случай сделайте дубли картинок в других форматах и создайте скрипт для проверки браузера на поддержку WebP. Если браузер не поддерживает WebP, то будет использован другой доступный формат.
Один из способов настроить — использовать HTML5-элемент picture и указать форматы в source внутри picture. Но есть браузеры, которые не поддерживают форматы файлов через picture, для них нужно оставить и обычный img.
Этот способ приведет к увеличению узлов в DOM-дереве на каждое изображение, а это увеличит расход памяти, не все сайты могут себе это позволить.
Другие способы настроить показ Webp в зависимости от браузера в статье.
Как ускорить загрузку картинок на сайте
Как настроить ленивую загрузку (lazy loading) изображений
Ленивой загрузкой называют способ загрузить картинки не сразу, как пользователь открыл страницу, а как только они ему понадобятся. К примеру, когда он дойдет до места, где размещена картинка.
Настройку задают через атрибут loading, способ подходит для элементов с тегом img и iframe. Варианты:
- lazy — асинхронная загрузка по мере надобности изображения.
- eager — загрузка элемента немедленно;
- auto — порядок загрузки по усмотрению браузера.
Отложенная загрузка не сработает для скрытых фреймов, которые используются, например, для аналитики. Даже если ее настроить, браузер не будет загружать скрытый фрейм асинхронно.
Проверка скорости загрузки
Проанализировать скорость можно с помощью сервиса для аудита сайта. Он покажет результаты проверки по новым требованиям от Google, оценит настройки кэша, сжатие изображений и других элементов.
Как оптимизировать CSS картинок
Если загрузка изображений запаздывает, то все, что загрузилось раньше, может сместиться вниз. Это неудобно для пользователей:
Если вы не давали согласия на использование вашего фото, то никто не имеет права его размещать. Но если исключения, когда разрешения у вас могут не спрашивать:
- фото используется в государственных или общественных интересах, к примеру, в новостях;
- фотография сделана на публичном мероприятии, при этом фотографировали не конкретно вас, а толпу;
- вам заплатили за то, что вы были моделью для фото.
Вы можете потребовать удалить фото и обратиться в суд, если ваше требование не выполняют. Компенсация морального вреда законом не фиксирована, ее определяет суд, но обычно это очень скромная сумма.
В материале с советами юриста разобрали и другие вопросы: как доказать, что вы автор изображения, как защититься от копипастеров, как составить договор с дизайнером и какие могут быть проблемы, если скачивать картинки с фотостоков.
Где легально брать фотографии, иллюстрации и фоны для сайта: подборки ресурсов
Скачать бесплатные фотографии предметов и людей без проблем с законом
Принято думать, что в России авторское право не очень развито, мало кто подает в суд за использование своих фото или иллюстраций без разрешения. Даже если таких дел действительно немного, не очень приятно будет оказаться в числе ответчиков и платить компенсацию.
Есть авторы, которые позволяют использовать свое творчество бесплатно с указанием автора или даже без него. Это должно быть написано в лицензии. Такие картинки можно найти в фотобанках.
Сложнее с фотографиями людей, которые нужны для юзерпиков на демонстрации интерфейса. Когда настоящих отзывов еще нет, некоторые веб-мастера размещают несколько фиктивных, чтобы раздел не пустовал. Скачивать чужие аватарки не вариант, но есть способ добыть фото человека, никого не обидев — использовать нейросеть. Откройте thispersondoesnotexist.com или tools.seo-zona.ru/face.
Где сделать мемы и инфографику и скачать фоны, иллюстрации и иконки
Графическое оформление сайта влияет на то, насколько удобно пользователям будет читать информацию, какое получат впечатление о сайте, какие возникнут ассоциации с компанией.
Сайту нужен логотип, оформление интерфейса, дизайн иконок и изображения для иллюстраций. Если нет бюджета на дизайнера, можно использовать готовые темы и шаблоны.
В комментариях пишите ваши отзывы о таких материалах и темы, которые вы бы хотели, чтобы мы разобрали в будущем!