Современные веб-браузеры и системы управления контентом оптимизируют изображения для отображения в любых условиях. Однако лучше всего подготовить изображения, оптимизированные для каждого возможного форм-фактора и места, где может появиться изображение. Сосредоточьтесь на трех вещах: разрешении изображения, размере и цветовом пространстве.
Цветовое пространство в изображениях
Графические дизайнеры полагаются на два основных цветовых пространства. Цветовое пространство - это метод, с помощью которого основные цвета объединяются в сложные цветовые радуги.
Используйте режим RGB при подготовке изображений для мобильных устройств. Отображение на компьютерных мониторах и смартфонах основано на сочетании красных, синих и зеленых пикселей. Это изображение RGB оптимизировано для точного воспроизведения нужных цветов на экране.
Для печати дизайнеры используют четырехцветный процесс, при котором каждый цвет превращается в комбинацию голубого, пурпурного, желтого и черного. По этой причине иногда четырехцветные изображения называют изображениями CMYK.
Разрешение изображения
Изображения, особенно на мобильных платформах, должны иметь как можно меньший размер, чтобы сбалансировать качество со скоростью загрузки в мобильных сетях и размер файла с ограничением мобильного трафика.
Большинство программ, включая приложения Adobe Creative Cloud, поддерживают инструмент «Экспорт для Интернета», который показывает изображение в различных комбинациях разрешения и сжатия. Выберите изображение наилучшего качества с наименьшим общим размером.
Размер изображения в пикселях
Каждое изображение должно соответствовать своему назначению. Вот несколько примеров размеров изображений для популярного использования в Интернете:
- Интернет-баннеры часто имеют размер 468 на 60 пикселей.
- Обложка Facebook должна иметь размер 851 x 315 пикселей.
- Фото профиля в Твиттере должны иметь размер 400 на 400 пикселей.
- Изображения для общих ссылок должны быть размером 1200 x 630 пикселей.
Когда вы работаете с фотографиями для определенных целей, проверьте место, где эта фотография появится (например, на сайте социальной сети или в блоге), чтобы проверить оптимальные размеры изображения, а затем выберите соответствующий размер, чтобы избежать растяжения или обрезки изображения..
Чтобы избежать пикселизации, стремитесь к реальному размеру экрана. Даже если изображение имеет правильный размер, если оно имеет неправильный размер, полученный продукт может выглядеть пиксельным, если изображение необходимо увеличить, чтобы оно соответствовало доступному пространству.
О векторных изображениях
Векторные изображения - изображения, которые вычисляются и рисуются устройством - обычно более эффективны и качественнее, чем растровые изображения (изображения, рисуемые по одному пикселю за раз), поскольку их можно увеличивать и уменьшать без ущерба для качества изображения.. Для простых логотипов, штриховых рисунков и графиков идеальна векторная версия. Векторные форматы не используются для фотографий.
