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

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

Для начала картинку нужно подготовить. Используем 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: Фото в тексте