Готовим картинки для сайта без Photoshop

! Без рубрики

Изображения должны быть:

  • Они должны быть оригинальные (чтобы не «утомляли» людей одними и теми же картинками с места на место);
  • Высокое качество (без размытия и шума);
  • при соответствующем соотношении — размер / вес / качество (чтобы страница загружалась за 2-4 секунды, а не за 20-40 секунд — таких терпеливых мало).

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

Допустим, мы пишем статью о том, какие жилые комплексы строит застройщик, и хотим разбавить «сухие»; текст с картинками.

Шаг 1. Подбор фото

Легко просто погуглить и получить довольно много первых фотографий типичного жилого комплекса в Интернете, которые вы видите.

Просто откройте поисковую систему и нажмите на следующую ссылку

Типичное фото жилого комплекса

Но если вы поставите себя на место потенциальных клиентов вашей компании, вы поймете, что они хотели бы видеть фотографии реально построенных домов.

Итак, берем камеру, выходим и делаем снимок. Получаем более реалистичное фото:

Реалистичное фото здания

Если вы пишете о чем-то более абстрактном, например о пользе утренней пробежки, реальность картины не имеет значения. Например, вы можете поискать что-нибудь вдохновляющее:

Фото с fotostock

Фотография взята с сайта https://unsplash.com/ это коллекция бесплатных фотографий хорошего качества. Еще один похожий сайт http://isorepublic.com/

Несколько слов о том, стоит ли заказывать фотографии для своего сайта у профессиональных фотографов. Если вы пишете информативную статью или описываете рекламную акцию или анонс мероприятия, нет смысла тратить время и деньги, просто несколько фотографий из Интернета или фотографий, сделанных на камеру.

Если вы делаете страницу продукта, настоятельно рекомендую заказывать фотографии высокого качества. Это влияет на коэффициент конверсии. Взгляните на профессиональную картинку настольной игры:

ЧИТАТЬ ЕЩЁ:  Веб-разработчик – кто это и чем занимается

Профессиональное изображение продукта

Согласитесь, это уже вызывает желание его купить. У него правильный свет, фон, цвета, яркость и многое другое. Товар выглядит реально и качественно.

Шаг 2. Оптимизируйте размер, вес и яркость изображения

Итак, мы выбрали фотографию (мы вышли на улицу и сфотографировали ее на нашу обычную камеру) и отправили ее на наш компьютер, так что мы получили этот оригинал

Готовим картинки для сайта без Photoshop

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

Настройки изображения

Элемент «Размеры» показывает ширину и высоту фото 1944 г. на 2592 пикселя. Линия ниже «Размер» вес фотографии 2,32 мегабайта.

Это большой размер. Такое фото в первую очередь займет всю ширину страницы (и даже больше). Во-вторых, загрузка страницы займет 20-40 секунд. В результате его придется сократить.

Изображениями можно манипулировать с помощью специальных программ, таких как Photoshop. Но они не так просты в использовании.

Итак, мы собираемся использовать один из онлайн-фоторедакторов. Я выбрал https://fotostars.me/. Вы можете найти еще один, но основные шаги во всех них одинаковы.

Мы откроем онлайн-редактор фотографий.

Откройте онлайн-редактор фотографий и нажмите кнопку "Редактировать фото". Загрузите наширисунок.

Онлайн-редактор фотографий

Сначала уменьшите размер фотографии (ширину и высоту). Выберите правильный «Изменить размер»:

Изменить размер изображения

Установите нужный размер. Например, установим ширину 900 пикселей. Этого достаточно, чтобы убедиться, что вы видите детали на фото. Затем нажмите «Готово»:

Ширина и высота фото

Теперь мы можем кадрировать фотографию, если нам кажется, что на ней есть что-то ненужное. по краю. Выберите «Обрезать»:

Обрезать картинку

Перетащите края рамки с помощью мыши, чтобы выбрать нужную часть изображения. Нажмите кнопку «Готово».

Обрезать изображение

Вы также можете изменить яркость и контрастность фотографии. Например, если фото было сделано в пасмурный день. Выберите «Цвета»:

ЧИТАТЬ ЕЩЁ:  20 вариантов интересного контента для социальных сетей

Изменить качество изображения

Перетащите ползунки «Яркость». и «Контрастность» и наблюдайте за изменением нашего изображения (оно будет слева):

Яркость и контрастность

Еще один интересный инструмент «Температура»:

Изменить температуру изображения

Перемещение ползунка, чтобы изображение было более «теплым», солнечным:

Изображение потеплеет

Для любителей «поиграть со шрифтами» подготовлен набор готовых фильтров пункт «Эффекты»:

Фотоэффекты

Например, мы можем выбрать эффект «Мадрид»:

Madrid Effect

Мы изменили размер и яркость изображения, теперь нам нужно его сохранить, нажимаем на значок «Скачать»; в правом верхнем углу:

Сохранение изображения

Откроется окно «Сохранить настройки». Вот проверим качество 75% фотография будет сохранена с оптимальным соотношением веса и качества для Интернета.

Настройка качества изображения

Нажмите "Сохранить". Теперь нам нужно назвать изображение. Введите имя латиницей, без пробелов, пробелы можно заменить дефисом (-) или подчеркиванием (_). Хотя большинство браузеров принимают кириллические символы и пробелы, всегда есть небольшая вероятность, что кто-то из ваших клиентов не примет изображение из-за кириллического символа в имени. Поэтому лучше перестраховаться.

Адрес изображения

Теперь проверьте параметры фото:

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

Вес изображения уменьшился в 7 раз. Это лучше, но на https://tinypng.com/ вы все равно можете сжать еще немного «уменьшить» изображение. Откройте страницу и перетащите нашу фотографию в зеленую рамку справа от счастливой панды:

Служба Tinypng

Panda сжимает наше изображение еще на 29%. Получите результат через «скачать»:

Изображение для сжатия

В целом 235 килобайт что он довольно «тяжелый»;тоже. Картинки весом до 50-60 Кб можно размещать на сайте. Но чтобы сделать «легче» мы не можем сделать эту картину, иначе она станет некачественной.

Но мы можем сделать «предварительный просмотр». уменьшенная копия изображения. Если пользователя заинтересовало изображение, мы позволим ему щелкнуть по нему, чтобы просмотреть его в большем размере.

Возвращает в редактор фотографий (использованный выше), изменяет размер фотографии до 300 * 375 пикселей и сохраняет ее, но с другим именем, то есть добавляет _view например.

ЧИТАТЬ ЕЩЁ:  Как научиться подбирать теги и хештеги для видео на YouTube

Посмотрите на размер изображения для предварительного просмотра:

Настройки предварительного просмотра изображения

Теперь вес изображения приемлемый. Можем выложить на сайт.

Шаг 3. Поместите изображение на страницу

Мы возьмем WordPress в качестве примера (процесс в основном такой же для других администраторов).

Создайте страницу, напишите текст. Поместите курсор в то место, где мы хотим разместить изображение, и нажмите кнопку «Добавить файл мультимедиа». (или ищите кнопку со значком «Картинка»).

Добавить медиафайл

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

Добавление изображения в WordPress

Теперь давайте настроим изображение для предварительного просмотра и заполним краткое описание изображения справа (тот атрибут alt, который просят заполнить все оптимизаторы, включая нас).

alt для изображения

Затем нажмите "Вставить в запись". (особенно для превью). Изображение было вставлено в текст:

Ссылка с картинки

Теперь выделите фотографию и щелкните значок, чтобы добавить ссылку. В появившемся окне введите адрес большого изображения, которое мы скопировали выше. Также отметьте «Открыть в новой вкладке»:

Ссылка на исходное изображение

Сохраните страницу.

Таким образом, мы заставили пользователя увидеть миниатюру фотографии (превью) на самой странице, но при нажатии на нее в новой вкладке открывается большая фотография.

Если на вашем веб-сайте установлен плагин для браузера, который поддерживает отображение изображений в модальном окне (лайтбоксе), большое изображение откроется не в новой вкладке, а во всплывающем окне:

Изображение в модальном окне

Вот и все, мы оптимизировали размер изображения и добавили его на страницу, не забывая альт и превью.

Оцените статью