01

Где брать картинки для сайта?

Есть три пути: найти бесплатно, купить или сделать.
Нельзя просто так взять нужную картинку в Google (или любом другом поисковике) и использовать ее, указав источник. Это нарушение авторского права, которое может стать основанием для судебного иска. Все картинки кому-то принадлежат.

Можно бесплатно использовать изображения по лицензиям Creative Commons. Они делятся на две крупные категории: разрешенные или запрещенные к коммерческому использованию. (Если ваша страница подразумевает извлечение прибыли даже косвенными путями, то это соответствует категории коммерческого использования.)

Где взять бесплатные картинки?

1 Google Images
Во вкладке «Права на использование» можно выбрать лицензию, разрешающую бесплатное использование изображения.

2 Бесплатные фотобанки
Лицензия CC0 (Creative Commons Zero) приравнивается к общественному достоянию. Автор полностью отказывается от своих прав на изображение.
2.1 Изображения и видео
https://ru.freepik.com/
https://unsplash.com
https://freestocks.org/
https://www.everypixel.com/free
https://www.lifeofpix.com/
https://www.pexels.com/ (нужен впн)
https://pixabay.com/ru/ (нужен впн)
2.2 Векторные картинки
https://www.pngegg.com/ru
https://freevector.com/
https://www.vectorstock.com/
2.3 GIF-анимации
https://giphy.com/
https://usagif.com/

02

Какие еще есть варианты?

1 Найти иллюстратора исполнителя работы проще всего это сделать в социальных сетях и базах фрилансеров

2 использовать готовые мокапы — это шаблоны полиграфического качества, на которые можно нанести вашу фирменную символику или добавить недостающие элементы.

Несколько сайтов, где можно их найти:

https://psdmockup.ru/
https://morepsd.ru/
https://mockupdownload.ru/

03

Как искать фото на стоках?

1 По ключевым словам

Какую бы платформу вы не выбрали, поиск изображения всегда начинается с подбора ключевых слов, которые бы описывали идею вашего фото или вектора. Самая распространенная ошибка поиска картинки для сайта: использовать ключевые слова статьи или проекта, вместо того чтобы продумать отдельное описание для изображения.
Нужно сконцентрироваться на ассоциациях к основной мысли или объекту проекта. Например, если вы ищете заглавную иллюстрацию для лонгрида о том, как правильно перевозить домашних животных, скорее всего вы будете использовать ключевые слова «собака, машина, дорога»

2 Поиск по картинке или серии

Находите где угодно изображение, которое вам нравится, и добавляете в поиск по картинке url или файлом. Поисковый алгоритм найдет почти идентичные и просто похожие изображения, готовые к использованию.
Или если вам понравилась фотография на стоке, но хочется изображения с другим ракурсом, или другим объектом, но в таком же стиле — посмотрите на варианты в разделе «Из той же серии».

04

Каким должно быть изображение ?

Размер фото
Что касается размеров, то на мой взгляд оптимальными размерами являются:
Ширина 1600 px; Высота 1067 px;
Но скачанные картинки с разных фотобанков почти всегда требуют редактирования. Их размер может достигать в несколько мегабайт.

В каком формате лучше сохранять изображения для сайта?
JPEG является приоритетным, так как картинки такого формата легче сжимаются без потери качества, к тому же и вес их небольшой.
PNG формат используется для создания картинок с прозрачным фоном, маленьких изображений или изображений с небольшим количеством цветов.

Оптимизируйте изображения в графических редакторах или в специальных сервисах. Суть оптимизации фотографий в том, чтобы уменьшить «вес», не жертвуя при этом качеством для увеличения быстроты загрузки.

Оптимальные параметры изображения для веба:

• Размер: в среднем 300 кБ.
• Разрешение: до 1000 пикселей по каждой стороне.
• Формат: JPEG — для любых изображений, PNG — если нужен прозрачный фон, GIF — для анимации или небольших знаков, WEBP — если браузеры ваших клиентов его поддерживают.

В своей работе я использую TinyPNG – способен обрабатывать большинство типов изображений в реальном времени и с хорошей скоростью.

Как проверить нужна ли вообще какая-то оптимизация сайту?

Сервисов по оказанию таких услуг довольно много, но лично мне нравится pagespeed insights от гугла, поскольку не только делает анализ, но и дает рекомендации.

Доп материалы для ознакомления

Домашнее задание