Подготовка картинок для размещения на сайте. Оптимизация графики под Интернет | Сайт Романа Яковенко

Размещение картинок на сайте. Часть 1: Подготовка графики

Размещение картинок на сайте

Декабрь 14, 2016 Web-технологии

Каждая статья на сайте должна содержать картинки. Обязательно. Казалось бы ничего сложного в размещении нет. Но то как размещают фото некоторые пользователи в интернете — сильно огорчает. Как же правильно размещать картинки на сайте? Давайте разбираться. И начнем мы с подготовки графики.

Для начала картинку нужно подготовить. Используем Photoshop.

Шаг 1. Оптимизируем размер

Пример №1. Размещаем картинку для блока с конкретным размером, который не меняется. Картинка для превью статьи в блоге размером 330х330 px.

Правильно загрузить картинку на сайте

Открываете фотошоп и создаете картинку именно такого размера. Не больше и не меньше.

Пример 2. Нужно разместить картинку шириной 300 px на странице с обтеканием текстом. Картинка при нажатии не увеличивается.

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

Оптимизация фото под интернет

Распространенная ошибка, когда на сайт загружается огромная картинка на несколько мегабайт, которая в разы превышает требуемый размер. Потом через редактор указываются нужные параметры. В итоге страница грузится дольше и ресурсы сайта используются нерационально. Не делайте так. Старайтесь загрузить на сайт картинку уже с нужным размером.

Шаг 2. Улучшаем качество

Есть разные варианты улучшения качества картинок. Я использую следующий набор действий:

1. Увеличение контрастности на 7 пунктов:

Как увеличить контрастность фото

2. Увеличиваем насыщенность на 7 пунктов:

Как увеличить насыщенность фото

3. Увеличиваем резкость с помощью фильтра "Умная резкость" на 50%:

Как увеличить резкость фото

Результат:

Улучшить качество картинки

Возможно разница не столь ощутима, но она есть. И явно в лучшую сторону. Можно указывать большие показатели, но тогда картинки могут выглядеть неестественно. Особенно не рекомендуется экспериментировать с показателем насыщенности для фото с людьми.

Шаг 3. Сохраняем картинку для Интернета

После оптимизации размера и улучшения качества — необходимо сохранить картинку с помощью функции "Сохранить для Web". В последних версиях Photoshop данный пункт находится во вкладке Экспортировать:

Сохранить для веб

Далее выбираем параметры сохранения. Стандартный вариант: JPEG с качеством 80. Больше ставить нет смысла — на глаз не найти, а вот размер увеличится значительно. Если поставить меньше — качество заметно ухудшиться. Ели на картинке много текста — рекомендую сохранять в формате PNG-24, если сохранять в JPEG — будут весьма заметны артефакты вокруг текста.

Сохранить картинку под Интернет

Вот такие простые манипуляции. Используйте эти элементарные действия и картинки на вашем сайте будут качественными и оптимизированными!

Читайте также: Размещение картинок на сайте. Часть 2: Фото в тексте

Подписка на рассылку блога Роман Яковенко

Поделиться
Плюсануть
Роман Яковенко
Менеджер Интернет-проектов
Роман Яковенко