Каталог статей

Главная » Статьи » Вебмастерам

Картинки для сайта без Photoshop

Ранее мы уже давали список рекомендаций для картинок и видео, размещаемых на сайте, вот в этой статье. Если кратко, то картинки должны быть:

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

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

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

Шаг 1. Подбираем картинку

Проще всего открыть поисковик и взять с просторов интернета чуть ли не первое попавшееся изображение типового жилого комплекса:

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

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

Поэтому берем фотоаппарат и идем фотографировать. Получаем более реалистичное фото:

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

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

Картинка с фотостока

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

Пара слов о том, нужно ли заказывать картинки для сайта у профессиональных фотографов. Если пишете информационную статью или описываете какую-то акцию или составляете анонс мероприятия – нет смысла тратить время и деньги, достаточно картинок из сети или фотографий с обычного фотоаппарата.

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

Профессиональное фото товара

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

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

Итак, фотографию мы выбрали (сходили и сняли на обычный фотоаппарат) и загрузили на компьютер, получился вот такой оригинал – http://1ps.ru/files/blog/2016/images-prepare/IMG_20160919_174243.jpg

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

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

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

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

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

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

Открываем онлайн-редактор, жмем кнопку «Редактировать фото». Загружаем наше изображение.

Фоторедактор онлайн

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

Изменение размера картинки

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

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

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

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

Перетаскиваем мышкой края рамки, выделяя нужную нам часть картинки. Жмем «Готово».

Обрезаем фотографию

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

Изменение качества картинки

Перетаскиваем бегунки «Яркость» и «Контраст» и смотрим как меняется наша картинка (она будет слева):

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

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

Изменение температуры картинки

Передвигая бегунок, можно сделать фотографию более «теплой», солнечной:

Делаем картинку теплее

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

Эффекты для изображения

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

Эффект Мадрид

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

Сохранение картинки

Откроется окно «Параметры сохранения». Здесь отметим качество 75% – картинка сохранится с оптимальным для веба соотношением вес/качество.

Настройка качества картинки

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

Адрес картинки

Проверяем теперь параметры фотографии:

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

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

Сервис Tinypng

Панда сжимает нашу картинку еще на 29%. Скачиваем результат по ссылке «download»:

Сжатие картинки

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

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

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

Посмотрим на размеры картинки-превью:

Параметры превью картинки

Теперь вес картинки приемлемый. Можем выкладывать ее на страницу.

Шаг 3. Размещаем картинку на странице

Сделаем на примере WordPress (в других админках процесс в целом аналогичен).

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

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

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

Добавление картинки в Wordpress

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

Альт для картинки

Далее жмем «Вставить в запись» (именно для превью). Картинка вставилась в текст:

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

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

Ссылка на оригинал изображения

И сохраняем страницу.

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

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

Картинка в модальном окне

Вот собственно и всё, мы оптимизировали размер картинки и добавили ее на страницу, не забыв про alt и превью.



Источник: http://1ps.ru/blog/texts/2016/gotovim-kartinki-dlya-sajta/
Категория: Вебмастерам | Добавил: affiliatedima (10.11.2016) | Автор: Дарья Севостьянова W
Просмотров: 39 | Теги: создание сайтов | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Ваш Баннер Здесь!

Здесь Вы можете разместить баннер 125x125 для рекламы своих сайтов,товаров,услуг. Размещение на 30 дней 30 рублей.

БЕСПЛАТНО

СКАЧАТЬ БЕСПЛАТНО!

Комплект реселлера “Советы по email-маркетингу для создания эффективных рассылок”!

Ваш Баннер здесь!

Здесь Вы можете разместить баннер 125x125 для рекламы своих сайтов,товаров,услуг. Размещение на 30 дней 30 рублей.

Информеры сайта

Анализ веб сайта

Рекомендую
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Форма входа
Поиск
Наш опрос
Оцените мой сайт
Всего ответов: 517
Категории раздела
Интересно почитать [54]
Интересные и познавательные статьи на разные темы.
Интернет и заработок в сети [16]
Все самое интересное в интернете и способы заработка в сети.
Вебмастерам [2]
Веб-мастер (англ. webmaster) — человек, профессионально или в качестве хобби занимающийся разработкой веб-сайтов в Интернете или корпоративных приложений в интранете. Веб-мастер — это «управляющий» сайтом. В зависимости от размера коллектива разработчиков он может объединять в себе обязанности дизайнера, автора, программиста, системного администратора, модератора, ответственного за содержимое, сотрудника технической поддержки и другие. Этот термин применим чаще всего к небольшим сайтам, так как крупные порталы имеют возможность распределить роли на нескольких специалистов (или заказать их услуги в специализированных агентурах).
Поисковая оптимизация (SEO) [5]
Поисковая оптимизация англ. search engine optimization, SEO) — комплекс мер для поднятия позиций сайта в результатах выдачи поисковых систем по определенным запросам пользователей. Обычно, чем выше позиция сайта в результатах поиска, тем больше заинтересованных посетителей переходит на него с поисковых систем. При анализе эффективности поисковой оптимизации оценивается стоимость целевого посетителя с учетом времени вывода сайта на указанные позиции и Конверсия сайта, на который привлекаются целевые посетители.
Бизнес в интернете [36]
Заработок в Интернете, Пособие для начинающих в Интернет-бизнесе, Статьи и книги по бизнесу в Интернете, Полезные сервисы,
Предпринимательство и бизнес. [18]
Предпринимательство, бизнес — самостоятельная, осуществляемая на свой риск деятельность, направленная на систематическое получение прибыли от пользования имуществом и/или нематериальными активами, продажи товаров…
Маркетинг [21]
Важные статьи о маркетинге. Ты должен это знать!
Цифровые книги [3]
Цифровые книги - это книги в виде компьютерных файлов. Вы можете читать их как на обычном компьютере или ноутбуке, так и на разнообразных мобильных устройствах (телефонах, коммуникаторах, смартфонах, специальных устройствах)
Работа с программами [5]
Видео-уроки и видео-курсы по работе с популярными программами