Подготовка изображений для мобильных устройств

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

Цветовое пространство в изображениях

Графические дизайнеры полагаются на два основных цветовых пространства. Цветовое пространство - это метод, с помощью которого основные цвета объединяются в сложные цветовые радуги.

Используйте режим RGB при подготовке изображений для мобильных устройств. Дисплеи на компьютерных мониторах и смартфонах используют комбинацию красных, синих и зеленых пикселей. Этот RGB изображение оптимизировано для точного воспроизведения заданных цветов на экране.

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

CMYK изображения по этой причине.

Разрешение изображения

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

Большинство программ, включая Adobe Creative Cloud приложения, поддерживают инструмент «Экспорт в Интернет», который показывает изображение в различных комбинациях разрешения и сжатия. Выберите изображение наилучшего качества с наименьшим общим размером.

Размер изображения в пикселях

Размер каждого изображения должен соответствовать его прямому назначению. Вот несколько примеров размеров изображений для популярных веб-приложений:

• Баннеры в Интернете часто имеют размер 468 на 60 пикселей.
• Обложка Facebook должна иметь размер 851 на 315 пикселей.
• Фотографии профиля Twitter должны быть размером 400 на 400 пикселей.
• Изображения для общих ссылок должны быть 1200 на 630 пикселей.

Когда вы работаете с фотографиями для определенных целей, проверьте место, где эта фотография будет отображаться (например, в социальных сетях). сайт или блог), чтобы проверить оптимальные размеры изображения, а затем размер, чтобы избежать растяжения или обрезки изображение.

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

О векторных изображениях

Векторные изображения - изображения, которые вычисляются и рисуются устройством - обычно более эффективны и качественнее, чем растровые изображения (изображения, нарисованные по одному пикселю за раз), потому что их можно увеличивать и уменьшать, не влияя на изображение качественный. Для простых логотипов, штриховых рисунков и графиков идеальна векторная версия. Для фотографий не используются векторные форматы.