Подборка материалов о том, что делать с картинками на сайте: как оптимизировать иллюстрации, чтобы поисковики любили сайт, как правильно сжимать картинки, чтобы повысить скорость загрузки, и нужно ли внедрять WebP. А еще руководство от юриста по защите авторских прав на изображения и подборка инструментов для работы с графикой.
Как сжать фотографии, иллюстрации и другую графику
Разбираемся, как ускорить сайт: как использовать сжатие gzip и brotli, минифицировать CSS, HTML, JS, кэшировать страницы в браузере пользователя, как оптимизировать изображения и другую графику.
На сайтах часто используют много больших графических элементов в хорошем качестве — фотографии в высоком разрешении, баннеры, иллюстрации. Если они много весят, то тормозят загрузку страницы, поэтому их нужно сжать. Даже если для просмотра принципиально важно хорошее качество и большой размер фотографий, есть способы сжимать изображения без визуальных потерь.
В статье:
— Зачем уменьшать размер HTML-страницы
— Как уменьшить размер HTML:
— Использовать сжатие gzip или brotli
— Использовать минификацию HTML, CSS и JS
— Использовать кэш браузера для ускорения
— Сжать фотографии, иллюстрации и другую графику
Подробнее в материале
Как и зачем оптимизировать изображения на сайте?
Улучшаем конверсию и поведенческие факторы на сайте за 2 минуты!
Изображения на страницах — самая «тяжелая» часть страниц сайта. Оптимизация картинок позволяет значительно ускорить загрузку: сжатие уменьшает объем изображений на 70-98% без визуальной потери качества.
Можно вручную оптимизировать каждое изображение на сайте: для этого можно использовать Photoshop или другой инструмент, обычно при сохранении изображения в редакторе есть пункт «сохранить для web». Дешевле и быстрее — автоматизировать процесс и использовать сервисы. В материале рассказываем об одном таком сервисе OptiPic.
В статье:
— Как оптимизация изображений ускоряет сайт
— Что такое оптимизация изображения
— Как оптимизировать изображения
Подробнее в материале
Как использовать WebP для оптимизации картинок на сайте
Важное о перспективном формате WebP: в чем преимущества, как конвертировать изображения в WebP, как использовать этот формат на сайте для разных браузеров.
WebP — формат графических изображений. В 2010 году Google разработал его в качестве альтернативы для PNG и JPEG. Сжатие в этом формате основано на алгоритме сжатия ключевых кадров видеокодека VP8, а упаковывается в контейнер на основе RIFF.
В итоге формат сохраняет такое же качество при меньшем размере картинки: при сжатии с потерями размер будет в среднем на 30% меньше, чем в JPEG, а без потерь в среднем на 25% меньше, чем PNG.
В статье:
— Что такое WebP: достоинства и недостатки
— WebP vs JPEG: данные исследования
— Какие браузеры поддерживают WebP
— Как конвертировать изображения в WebP
— Как использовать WebP на сайте
Подробнее в материале
Говорит юрист: защищаем авторские права на картинки и фотографии
Совместный материал с адвокатом Дарьей Третьяковой. Как использовать картинки из поисковиков и не попасть под суд, что делать, если изображения с вашего сайта украли и как закон защищает авторское право на фотографии.
Руководство магазина мебели из Перми не стало заказывать фото товаров для своего ассортимента, разработчик сайта скачал фотографии с сайта мебельного магазина в Екатеринбурге и разместил их в каталоге. Это заметили владельцы магазина, у которых украли фотографии, и подали в суд.
6 февраля 2017 года Суд по интеллектуальным правам вынес решение. За использование 82 фотографий мебели на сайте интернет-магазина суд постановил выплатить компенсацию в размере 820 000 рублей, то есть по десять тысяч рублей за фото. Компенсацию взыскали совместно и с владельца магазина, и с предпринимателя, который был администратором домена сайта ответчика и выложил эти фотографии.
Разберемся, как закон защищает авторское право на фотографии, иллюстрации и другие картинки, чтобы не попасть в похожую ситуацию.
В статье:
— 820 тысяч рублей компенсации за 82 фотографии
— Какие законы защищают авторское право на картинки
— Как заключать договор с художником или фотографом
— Что делать, если кто-то взял картинки с вашего сайта
— Как использовать чужие изображения законно
— Какие законы читать об авторском праве
Подробнее в материале
64 бесплатных инструмента для графического оформления сайта
Подборка сервисов для создания визуального образа сайта от логотипа до иконок.
Одним из важных моментов в создании имиджа своего бизнеса является правильное графическое оформление сайта. Итак, подборка необходимых бесплатных или условно бесплатных сервисов для работы с графикой и дизайном.
В статье:
— Логотипы
— Графические редакторы
— Оптимизаторы изображений
— Дизайн
— Фотостоки
— Иконки
— Подбор цвета
— Подбор шрифтов
Подробнее в материале
Несколько актуальных новостей об изображениях:
Google о лучшей видимости картинок в SERP
Поисковик продолжает уделять внимание поиску по изображениям.
Как оптимизировать изображения для многоязычных сайтов
Повышенное внимание необходимо уделить атрибуту Alt.
Нужна уникальная фотография человека? Пожалуйста!
Нужна уникальная фотография человека? Теперь это не проблема, с помощью нейросети, генерируйте столько уникальных портретов людей - сколько необходимо! Все портреты получаются настолько реалистичные, что их не отличить от настоящих.
Google: не стоит экспериментировать с URL изображений
Это может негативно сказаться на позициях сайта в результатах поиска.