Форматы изображений для интернета и печати
Быстро и простыми словами разбираемся во всем многообразии форматов изображений и где какой из них применяется. Какие форматы подходят для печати, а какие используется на сайтах.
несмотря на то, что обычно я делаю уклон в тему дизайна, сегодня поговорим о теме, которая будет полезна почти каждому. Многие из нас ведут соц. сети, блоги, влоги, каналы, продают товары через интернет, печатают фотографии, баннеры, постоянно взаимодействуя с изображениями. Сейчас мы поговорим о том какие бывают изображения, чем они отличаются и какой формат таких изображений нужен конкретно вам.
Детальные характеристики изображений я подробно описывал в этой статье (пиксели, вес, вектор, растр и т.д.), а сейчас постараюсь коротко и простыми словами рассказать о форматах (расширениях). Начнем с того, что разделим все изображения на несколько категорий.
Форматы изображений со сжатием и без сжатия
Каждое изображение имеет свой вес — занимает определенное количество места в памяти устройства, вес (килобайты — кБ, мегабайты — МБ) изображения напрямую зависит от качества изображения (детализации), от количества информации, которую в себе хранит изображение (сейчас речь о цветных точках из которых состоят изображения — пикселях). Чем точнее и подробнее мы будем описывать наше изображения, тем больше потребуется места в памяти устройства, тем больше будет весить файл изображения. Если же мы опустим некоторые детали и опишем содержимое изображения общими чертами, тогда нам понадобится значительно меньше места. В зависимости от ситуации, нам иногда нужны изображения, которые максимально детализированы, а иногда те, которые занимают мало места в памяти (мало весят). Сжатие, конечно, не всегда означает потерю качества изображения, но в повседневных задачах сжатие=потеря качества.
Самые популярные форматы файлов без сжатия: .PNG, .TIFF, .RAW, .BMP
Самые популярные форматы файлов со сжатием (малым весом): .jpeg, .heic, .webp.
Отдельного внимания заслуживают векторные форматы файлов, которые могут хранить и растровые изображения: .PDF, .AI, .EPS. Фактически они не сжимают изображения с потерей качества, но эти форматы, скорее, переходные и сами по себе не используются для отображения изображей, а только для их передачи и последующей конвертации в .jpeg, ,png и т.д..
Форматы изображений с фоном и без фона (с альфа-каналом)
Для хранения и передачи логотипов, иконок, стикеров и прочих изображений не квадратной формы — используют форматы изображений с альфа-каналом (прозрачным фоном /без фона). Самый популярный .PNG. Также без фона могут быть изображения .GIF, .WEBP, .HEIC. Однако для работы используется почти всегда только .png (для печати и сайтов) и .webp (для сайтов). .HEIC — исключительно тема Apple и до сих пор используется с осторожностью из-за плохой поддержки формата разными инструментами.
Все эти форматы позволяют быстро передавать элементы без фона и фонового цвета. Если сохранить изображения без фона в неподходящем формате (.jpeg например), то у него автоматически появится белый фон. Также белый фон появляется у изображений если их загружать в популярные сервисы и соц. сети. После загрузки изображений на такие сайты, они оптимизируют их и формат меняется на тот, который не поддерживает прозрачный фон. Это ведет к тому, что мне, как дизайнеру, часто присылают логотипы вида «logo.png», но с белым фоном, часто еще и в плохом качестве из-за чего отделить логотип от фона — невозможно.
Для визуализации отсутствующего фона используют серую шахматную сетку. Но иногда эта сетка является частью изображения как и в примере про logo.png с фоном.
Ниже на примере иконки сайта показал как это выглядит, если один и тот же файл сохранить в неподходящие форматы.
интернет-магазины (озон, вайлдберис)
Какие изображения нужны для интернет-магазинов? Здесь все очень просто.
Самое важное — пропорции. Вайлдберис использует вертикальные изображения с соотношением сторон 3х4 (он же 3:4, 3 на 4), а озон квадратные с соотношением сторон 1х1 для всех товаров и 3х4 для товаров категории одежда.
Можно использовать почти любой формат файлов (.png, .jpeg и т.д.) т.к. площадки сами переводят изображения в нужный формат после добавления их на сайт, а неподходящие — не позволит загрузить.
Размер изображения не важен, но главное чтобы был больше 900px по меньшей стороне для Вайлдберис и больше 1200px для OZON. Самые популярные и минимальные размеры: 900х1200 и 1200х1200 соответственно. Но без проблем можно загружать и 1254х1254, а после загрузки озон сам пережмет изображение в размер 1200х1200.
Вес изображения (размер /объем) — любой, если не указано ограничение при добавлении изображения на площадку.
В итоге имеет, что требования к картинкам не очень строгие, можно загружать любое изображение нормального качества, а некоторые площадки еще позволяют обрезать изображения до нужных пропорций.
соцсети (вк, telegram, whatsapp, instagram)
Здесь все еще проще чем для интернет магазинов. Все что вы можете увидеть у себя в галереи телефона — подходит. Здесь самое главное требование — это размер изображения больше 1280px. Именно до такого размера почти все площадки уменьшают размер (и качество) фотографий/картинок. Загрузите фото размером 4000×4000, а отправится изображение размером 1280×1280.
Все площадки для обычных фото ставят ограничение по размеру БОЛЬШЕЙ стороны в диапазоне от 1000px до 1440px. Поэтому стоит оправлять фотографии «файлами», если нужно сохранить их качество. Для изображений прикрепленных как «документ», файл — сжатие не работает и изображение отправляет в полном исходном размере и формате.
печать и полиграфия (макеты для типографий)
Сразу можно отметить, что подготовка файлов для печати — задача дизайнера. Есть стандартный набор требований к файлам, которые нужно соблюсти, чтобы файл подошел для типографий и любой дизайнер должен знать эти требования. Но бывают и особые требования, которые нужно передать дизайнеру. В любом случае, если заранее известны требования к печати — стоит их сразу передать дизайнеру.
Обычно исходные файлы макета для печатных изделий имеет расширение вида: .psd, .ai, .cdr, .eps. Это файлы проектов , которые содержат внутри себя все элементы разбитые на отдельные слои (отдельно картинки, тексты, заливки, градиенты и т.п.), эти слои и формируют нужную композицию — макет.
Из-за большого разнообразия версий программ, разных устройств и прочих нюансов, макет (исходник) может отображаться на разных устройствах по-разному, но еще сильнее отличаться после того как его напечатают. Для избежания такой ситуации и нужна предпечатная подготовка и определенные форматы файлов.
Макет подготавливается к печати и сохраняется в формате, который точно откроется на любом устройстве правильно.
Обычно это форматы: .pdf, .tiff, .eps. Этих форматов достаточно для передачи макетов в печать. PDF — самый универсальный формат, который не только подходит в печать, но и поддерживается всеми устройствами вплоть до утюга. .TIFF — отличный формат для растровых изображений, которые нужно напечатать, но имеет большой вес, иногда достигает 1ГБ, что очень не удобно. Такой файл не удобно хранить, неудобно загружать, передавать и с ним тяжело работать на слабых компьютерах. .ЕPS — это универсальный формат для векторных изображений и макетов, который корректно открывается в самым популярных векторных редакторах.
Формат .psd, который хранит макеты из фотошопа, но он далек от идеала, не каждая типография хочет с ним работать и лучше перевести его в .pdf или .tiff, точно не будет хуже. Формат .ai хранит макеты из эдоб иллюстратора и также не является универсальным, лучше его перевести в pdf или eps, что не повлияет на его функциональность.
Небольшой итог:
Сейчас в интернете основной параметр изображения — пропорции сторон. Почти все изображения приводятся к размерам в диапазоне 1000px — 1440px если это соц. сети и мессенджеры. Если речь о сайтах, то могут применяться изображения размером до 1920px — это популярная ширина компьютерного монитора. Изображения больших размеров для интернета почти не имеют смысла и нужны в основном только для последующей обработки в графических редакторах. Именно по-этому основное влияние на внешний вид фото оказывают пропорции сторон. Именно от пропорций зависит то как будет отображаться изображение в сети, а размер картинки свыше 1280 точек — почти не на что не влияет.
Добавить комментарий