Размещение картинок на сайте. Часть 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: Фото в тексте