Форматы изображений: какой из них выбрать?

PSD

Этот тип файла Adobe Photoshop использует по умолчанию для сохранения данных. Большим преимуществом файлов PSD есть то, что они позволяют проводить манипуляции на определенных отдельных слоях, а не на самом изображении

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

Но помните, что как только слои PSD-файла будут объединены (этот процесс по сути сливает все слои), то это нельзя будет отменить, так что убедитесь, что сохранили ваш файл как PSD перед тем, как объединить слои.

Преимущества

• Возможность широкого управления в изображении на отдельных слоях
• Когда изображение будет готово, его можно пересохранить в любом другом формате

Недостатки

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

Есть ряд наиболее используемых и распространенных типов файлов. Профессиональные фотографы обычно снимают в сыром формате (даже если конечный файл нужен в JPEG), конвертируют в DNG, затем редактируют фото в таких программах, как Photoshop или Lightroom

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

Как узнать размер картинки и зачем это нужно?

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

Слишком большие картинки будут мешать быстрой загрузке сайта, и тем самым повышать процент отказов, ухудшая рейтинг сайта в поисковой выдаче

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

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

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

JPEG или JPG?

Ранние версии Windows (в частности, с файловыми системами MS-DOS 8.3 и FAT-16) имели максимальное ограничение в 3 буквы, когда дело доходило до длины расширений файлов. JPEG пришлось сократить до JPG, чтобы не превышать такое ограничение. На компьютерах Mac и Linux такого лимита никогда не было, поэтому пользователи продолжали сохранять изображения в формате JPEG.

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

Так мы получили два расширения файлов для одного и того же формата: JPEG и JPG. А при выборе варианта для сохранения изображения между ними нет никакой разницы.

WMF

WMF – формат файлов векторной графики, где изображение формируется посредством различных геометрических форм и фигур. Здесь мы уходим от растра, от изображения, формируемого многочисленными точками. Вместо этого – сочетание геометрических фигур и форм, описываемых математическими формулами.

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

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

DNG (Digital Negative)

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

Итак, DNG. Этот формат файла, созданный Adobe, является попыткой создать стандартный формат файлов для всех производителей и камер. Он предложен в качестве главного формата сырых файлов или как альтернативу родному формату производителя. Одной из проблем хранения файлов в их оригинальном формате является то, что в ближайшие годы вы возможно не будете иметь к ним доступа, так как они специфичны для определенной камеры и производителя. Но использование Adobe DNG Convertor означает, что вы можете сохранять ваши файлы в формате DNG для максимальной безопасности. Это на самом деле добавляет еще один шаг в процессе постобработки, на что потребуется дополнительное время. Однако, если вы используете такую программу, как Lightroom, то она поможет конвертировать большие партии файлов так, что вам не придется делать это вручную.

Преимущества

• Возможность использования таких редакторов, как Lightroom и Photoshop
• Вероятно, более безопасный вариант в долгосрочной перспективе, чтобы защититься от невозможности открыть или иметь доступ к файлам

Недостатки

Необходимо дополнительное время для конвертации исходных файлов камеры в DNG (если в вашей камере нет возможности создавать файлы сразу в этом формате)

Форматы графических файлов

Что касается графических форматов файлов, то у них свои особенности. Если у файлов текстового формата есть более-менее прямая зависимость его размера от количества набранных символов (слов, таблиц, вставленных изображений), то у файлов графических форматов совсем иные составляющие.

Файл одного и того же изображения одного и того же формата, может отличаться по размерам в 10, 100, 1 000, 1 000 000 раз.

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

Есть специальные форматы графических файлов, которые позволяют делать очень эффектные и красивые изображения. Примерами могут послужить обои моего рабочего стола (ну мне нравятся), скриншот которого, я привел в статье «Что такое «по умолчанию»» или те поясняющие рисунки, которые я делаю для этих статей в специальном графическом редакторе.

Художник, конечно, из меня не важный, но «нарисовать» понятную картинку к тексту я могу.

Есть форматы, которые позволяют делать из рисунков анимацию, ну типа мультфильма.

Про все, конечно рассказать кратко невозможно, поэтому мультфильмы мы рассматривать не будем, а остановимся на более земном — на картинках.

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

Для наглядного примера я возьму два формата графических файла .bmp и .jpeg.

Почему именно эти?

Просто с форматом .bmp работает огромное количество программ, а формат .jpeg является наиболее популярным.

Какой формат изображения лучше?

Формат JPEG

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

Формат JPEG для цифровых камер

Небольшой размер файла JPEG идет в ущерб качеству изображения. Степень сжатия можно устанавливать в настройках графических программ — ниже качество меньше файл изображения и наоборот чем выше качество тем большим размером получается файл.

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

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

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

Формат TIFF

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

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

Формат GIF

Данный формат разработала компания CompuServe в 1987 году для первых 8-битных видеокарт компьютера и предназначался для передачи по dial up (модемному) соединению. В свое время он был самым распространенным форматом в интернете. GIF использует компрессию без потерь LZW, и очень хорошо сжимает изображения, в которых много однородных заливок (баннеры, таблицы, логотипы, схемы).

Глубиной цвета данный формат нас не радует, всего 8 бит (256 цветов максимум) и использовать его для хранения фотографий не рекомендуется (фото имеют 24 битную глубину цвета).

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

Формат PNG

Был создан сравнительно недавно для замены устаревшего GIF (браузеры показывают оба формата), и в некоторой степени более сложного TIFF формата. PNG является растровым форматом с использованием сжатия без потерь, не поддерживает анимацию и может иметь 48 битную глубину цвета.

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

Типов файлов в зависимости от цели использования:

	Фотографические изображения	Графика, логотипы
Свойства	Фотографии 24-битный цвет и 8-бит ч/б	Графика с множеством сплошных цветов, с небольшим количеством цветов (до 256 цветов), с текстом или линиями
Лучшее качество	TIFF или PNG (со сжатием без потерь)	PNG или TIFF (со сжатием без потерь)
Наименьший размер файла	JPEG с высоким коэффициентом качества	TIFF или GIF или PNG (графика / логотипы без градиентов)
Cовместимость (PC, Mac, Unix)	TIFF или JPEG	TIFF или GIF
Худший выбор	GIF 256 цветов (очень ограничен цвет, и размер файла больше чем 24 -разрядного JPEG)	Сжатие JPEG добавляет артефакты, смазывается текст и края линий

SVG

SVG (Scalable Vector Graphics, масштабируемая векторная графика) — это векторный формат, в отличие от предыдущих растровых форматов. Растровое изображение состоит из набора разноцветных пикселей, которые для человеческого глаза сливаются в единую картинку. Векторное же строится из набора объектов, вроде линий, кривых, прямоугольников, окружностей и др. При увеличении масштаба векторное изображение увеличивается пропорционально, сохраняя своё высокое качество.

Особенности

• Надписи остаются обычным текстом, их можно выделять, копировать, они читаются поисковыми системами при обходе сайта.
• Рисунки можно масштабировать произвольно, сохраняя при этом высокое качество.
• Формат не поддерживается браузером Internet Explorer до версии 9.0.

Масштабируемые изображения, рисунки, логотипы, иллюстрации, графики и диаграммы.

Графические форматы

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

• JPG (JPEG) (Joint Photographic Experts Group) – этот формат является, наверное, самым популярным. Небольшие потери в качестве и обычно небольшой «вес» изображения. Размер изображения может достигать до 65535×65535 пикселей, а это уже ого-го. Идеально подходит для повседневных целей (рисунки, фотографии). Но так как всё таки есть потери в качестве, то лучше не использовать этот формат там где нужна абсолютная точность (например медицина). Но для обычных фоток — в самый раз. 
• GIF (GraphicsInterchangeFormat) – Этот формат тоже является довольно популярным и в отличие от JPEG сохраняет изображение без потерь, но есть одно существенное НО. Формат не поддерживает более 256 цветов, поэтому для фотографий он не актуален вовсе, зато формат GIF поддерживает анимацию. Когда мы будем рассматривать анимацию, то будем пользоваться именно этим форматом.
• PNG (portablenetworkgraphics) – PNG был создан как замена GIF. Он также сжимает без потерь, зато PNG поддерживает полутоновое (16 бит), цветное индексированное (24 бита) и полноцветное изображения (48 бит). Также, в отличие от GIF, он поддерживает альфа-канал (полупрозрачность), а GIF нет. Единственное преимущество GIF перед PNG – это поддержка анимации. Зато благодаря полупрозрачности можно облегчить свою работу. Ну об этом мы с вами тоже будем разговаривать позже.
• PSD (Photoshop Document) – формат был создан специально для программы Adobe Photoshop. Является скорее промежуточным файлом, нежели конечным (хотя не всегда). Его основные преимущества в том, что этот формат сохраняет все слои, прозрачность и сжимает без потерь. 
• TIFF (TaggedImageFileFormat) – формат растровых изображений, поддерживающий большую глубину цвета. В этом формате хорошо сохранять сканированные изображения и изображения для полиграфии. Поддерживает сжатие без потерь, из-за чего очень много «весит».
• BMP (BitmapPicture) – Формат растровых изображений от компании Microsoft. Формат популярен для ОС windows, так как с ним работают обычно все графические программы (растровые). Формат BMP работает с изображениями 1, 2, 4, 8, 16, 24, 32, 48, 64 бита. Хотя этими цифрами можете не заморачиваться. Пользоваться данным форматом мы всё равно не будем. Это так, для общего развития.

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

Ну а на этом я наше теоретическое занятие заканчиваю. Не забывайте подписываться на мой блог в ВК. Увидимся с вами в следующих уроках. Пока-пока!

Популярные форматы фото при печати

Также рассмотрим популярные форматы фотографий, которые наиболее часто встречаются в жизни каждого:

• Обычные семейные альбомы и фоторамки производят формата А6, для него подойдут изображения с размерами 100 на 150 или 90 на 130 мм;
• А7 со сторонами 70 на 100 мм и А8 – 50 на 70 могут подойти для небольших фоторамок;
• Также выпускают большие фотоальбомы А4, что соответствует величине листа бумаги для принтера, поэтому может пригодиться для различных целей, здесь подойдет отношение сторон 210 на 300;
• А5, соответствующий размеру простой тетради, также используется часто, для него подойдут величины сторон 150 на 200;
• Также нередко встречается А3, что соответствует двум листам А4, может пригодиться как в профессиональной сфере, так и для семейной фотографии, чтобы повесить на стену, его стороны – 300 на 400 мм.

Формат JPEG.

Самый распространенный формат изображений  – JPEG ( Joint Photografic Experts Group — группа экспертов в области фотографии, разработавшая этот алгоритм кодирования). Он позволяет получать изображения хорошего качества при небольшом размере файла.

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

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

Изображение в формате JPEG нежелательно повторно редактировать и сохранять, так как каждое пересохранение – это новое сжатие изображения с соответствующими потерями. Если вам нужно продолжать работу над изображением, сохраняйте его в формате TIFF или PSD. Эти форматы используют алгоритмы сжатия данных без потерь, поэтому ухудшения качества при многократном пересохранении не происходит

Форматы записи изображения

Как Вы уже поняли из названия статьи, речь сегодня пойдет о трех, самых распространенных форматов в фотосъемке. Это JPEG, TIFF и RAW.

Начнем пожалуй с JPEG.

Формат JPEG (аббревиатура, в расшифровке звучащая так- «Joint Photographic Expert Group») – это формат оптимизированный для передачи изображений по каналам различным каналам (будь то дискета, диск, флеш или локальная сеть). В связи с этим, основная задача формата- сжимать информацию кадра. Ну а происходит это сжатие за счет качества снимка ( в основном ухудшается цветовая палитра, а яркость и контрастность остаются почти неизменными). Таким образом JPEG- это не графический формат, а алгоритм сжатия графических данных за счет палитры цветов.

Если Вы все же решили снимать в формате JPEG, то в первую очередь Вам нужно определиться со степенью сжатия снимка. Если Вам важна цветопередача, а занимаемый объем памяти снимком, не имеет значения, то лучше установить минимальное сжатие, ну а если поджимает место на карте, а снимок очень нужен, придется смериться с максимальным уровнем сжатия снимка, ну а если, Вы просто экономите место на карте, но качество нужно хорошее, можно настроить на средний уровень сжатия снимка. Как правило эти настройки можно изменить, покопавшись в меню фотокамеры.

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

Продолжим с TIFF форматом.

Формат TIFF (аббревиатура, в расшифровке звучащая так- «Tagged linage File Format») в компьютерной графике имеет широкий спектр использования. Он позволяет, без потери данных о яркости и цвете, хранить изображения с глубиной резкости до 48 бит. В его основе лежит обратимый алгоритм сжатия без потерь качества снимка.

Но как же без недостатков. В связи с тем, что TIFF несет в себе множество данных о снимке, то уровень сжатия снимка особо не велик.

На 90 %, алгоритм у JPEG’а и TIFF’а один (то есть этапы: «интерполяцию цвета», «повышение резкости» и «цветокоррекция»), отличающийся лишь последним этапом, этапом сжатия снимка. Таким образом, при минимальной степени сжатия, снимок в форматах TIFF и JPEG будут мало различимы (даже для взгляда эксперта).

Ну и наконец-то формат RAW.

Формат RAW (его так же, с перевода на Русский называют «сырой») является родным для цифровых фотоаппаратов. Этот формат представляет собой массив данных, попавших на матрицу фотоаппарата при съемке (оцифрованные данные, полученные с матрицы, c минимальной их обработкой). Параметрами данного массива являются: размер (в px (пикселях)) и глубина оцифровки (или уровень тона; измеряется в битах), которые определяют в свою очередь, информационную емкость фотоснимка. Глубина оцифровки зависти от параметров АЦП фотоаппарата (аналого- цифрового преобразователя), а глубина оцифровки, напрямую зависит от интенсивности света. При изменении экспозиции на 1-ну ступень, вдвое меняет уровень тона каждого пикселя.

16-ти битное кодирование снимков, обеспечивает полноценный охват снимка.

По объему занимаемой памяти, RAW имеет промежуточную между JPEG (он имеет меньший вес) и TIFF форматом (который занимает многим больше места). Данную позицию RAW занимает, благодаря тому, что он кодирует не цветной, а черно-белый вариант фотоснимка.

И на последок.

Все современные цифровые фотоаппараты, позволяют снимать в формате RAW + JPEG. В этом случае, нажав на кнопку спуска, Мы получаем два кадра, в формате RAW и JPEG.Это позволяет нам с легкостью корректировать снимок, сделанный в формате RAW (резкости и контраста снимка, цветовую модель и насыщенность цветов, баланса белого цвета и многое другое), смотрев на то, как это должно выглядеть (подглядывая в JPEG снимок).

Формат TIFF

TIFF (Tagged Image File Format)  также является распространенным форматом изображений. Он использует алгоритмы сжатия без потерь, а также может сохранять данные и без сжатия. Файлы формата TIFF по объему значительно больше, чем файлы JPEG. Так как сжатие происходит без потерь либо не происходит вовсе, данный формат обеспечивает более высокое качество изображения и часто применяется для качественной подготовки изображений к печати, особенно большим форматом.

Достоинства формата: высокое качество изображения, использование сжатия данных без потерь

Недостатки формата: очень большой объем файлов, в 8-10 раз больше, чем изображений в формате JPEG. Если используется глубина цвета 16 бит, объем файла увеличивается еще вдвое.

Следует ли волноваться о потере качества изображения

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

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

Обычно уменьшение качества увидеть трудно, но если изображение несколько раз редактировалось и сохранялось со средним уровнем уплотнения, то, возможно, вы заметите уменьшение четкости и цветопередачи.

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

LZW в GIF

А чей это флаг? Ничей. Просто три горизонтальные полосы. Но если удобнее, можно считать это флагом Суверенной Цветовой Модели RGB.

00 R (индекс палитры 0)
01 G (индекс палитры 1)
10 B (индекс палитры 2)
11 (индекс палитры 3)

На самом деле, конечно, LZW понятия не имеет о конкретном цвете, и кодирует только его номер в палитре. Но дальше будет столько цифр в листинге, что мы рискуем в них запутаться, поэтому отмечу их как «R», «G» и «B».

000 R (индекс палитры 0)
001 G (индекс палитры 1)
010 B (индекс палитры 2)
011 (индекс палитры 3)
100 <CC>
101 <EoI>

100 <CC>   |

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

000 R      |

110 RR     | RR = 110
111 RRR    | RRR = 111

1000 RRRR   | RRRR = 1000

1001 RRRRR  | RRRRR = 1001
1010 RRRRRR | RRRRRR = 1010

0000 R      | RRRRRRR = 1011

0001 G      | RG = 1100
1101 GG     | GG = 1101
1110 GGG    | GGG = 1110
1111 GGGG   | GGGG = 1111

10000 GGGGG  | GGGGG = 10000
10001 GGGGGG | GGGGGG = 10001
00001 G      | GGGGGGG = 10010
00010 B      | GB = 10011
10100 BB     | BB = 10100
10101 BBB    | BBB = 10101
10110 BBBB   | BBBB = 10110
10111 BBBBB  | BBBBB = 10111
11000 BBBBBB | BBBBBB = 11000
00010 B      | BBBBBBB = 11001

00101 <EoI>  |

10) (000) (100)       = 0x84
(1000) (111) (1       = 0x8F
...

Сброс словаря

100 <CC>   |
000 R      |
110 RR     | RR = 110
111 RRR    | RRR = 111
1000 RRRR   | RRRR = 1000
1001 RRRRR  | RRRRR = 1001
1010 RRRRRR | RRRRRR = 1010
0000 R      | RRRRRRR = 1011

0100 <CC>   | (сброс словаря)
001 G      |
110 GG     | GG = 110
111 GGG    | GGG = 111
1000 GGGG   | GGGG = 1000
1001 GGGGG  | GGGGG = 1001
1010 GGGGGG | GGGGGG = 1010
0001 G      | GGGGGGG = 1011

0100 <CC>   | (сброс словаря)
010 B      |
110 BB     | BB = 110
111 BBB    | BBB = 111
1000 BBBB   | BBBB = 1000
1001 BBBBB  | BBBBB = 1001
1010 BBBBBB | BBBBBB = 1010
0010 B      | BBBBBBB = 1011
0101 <EoI>  |

Вес

Чем легче картинка, тем быстрее она загружается. Вес зависит от трех параметров:

1. Размер изображения в пикселях (фотография размером 3000х2000 пикселей тяжелее, чем фото 300х200 пикселей).

2. Содержания самой картинки — чем больше на фото мелких деталей и цветов, тем больше она весит.

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

Какие изображения для сайтов использую сегодня

Все изображения для сайтов, подразделяются:

• растровые (пример — JPG, JPEG, GIF, PNG),
• векторные (пример — SVG).

Растровые изображения состоят из пикселей, в которых хранится цвет и значение прозрачности. Такими форматами представлены изображения в статьях, кнопками, иконками и элементами дизайна. Эти изображения популярны среди разработчиков и владельцев сайтов. Основной минус растровых изображений – они плохо масштабируются.

То есть при увеличении размера картинки, идёт потеря качества.

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

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

Обработка фотографии

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

Открываем снимок. Если вы снимали в RAW– проявите его в JPEG. Баланс белого можно легко установить по белому фону или белкам глаз. После – открываем фото в фотошопе.

Изначально я решил кадрировать изображения, то есть – «обрезать» все лишнее. В данном примере я готовил фотографию для аккредитации, и организаторы заявили требование – формат 3 x 4

Ок, принимаю во внимание и выбираю инструмент Рамка (клавиша C). В настройках инструмента я выставил пункт Пропорции как Произвольно, а соотношение поставил 3 см

на 4 см.. После чего я обрезал нужную часть фотографии согласно требованиям.

В этом примере фото изготавливалось без жестких требований, но при создании снимка на паспорт или визу без линеек вам не обойтись. Вызвать их можно сочетанием клавиш Ctrl + R. От них, при помощи вышки «выдвигаем» направляющие линии

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

Обработка фотографии на документы в Photoshop

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

Если вам нужна была электронная фотография – то она практически готова. Достаточно сохранить в формате .jpeg с нужной степенью сжатия (согласно требованиям сервиса). Для этого вызываем диалоговое окно «Сохранить для Web…» путем нажатия комбинации клавиш Alt + Shift + Ctrl + S и выставляем нужные параметры (размеры и качество).

Фото на документы

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

• Для российского или заграничного паспорта соотношение сторон фотографии должно быть 35 на 45 мм;
• Фото на пенсионное и водительское удостоверения, медицинскую книжку, студенческий билет, разрешение на работу и т. п. имеет размеры 30 на 40 мм.;
• Параметры снимка для личного дела составляют 40 на 60 мм.

Как изменить формат фотографии на jpg или другой? Метод 1. Использование программного обеспечения для редактирования изображений

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

В Windows — это «Paint«, а в Mac — «Preview«:
Обратите внимание, что JPG и JPEG — это разные названия одного и того же расширения файла;
Также для открытия файла изображения можно использовать программы сторонних разработчиков. Если вы не уверены, попробуйте дважды кликнуть по изображению, чтобы оно открылось программой, заданной по умолчанию для этого типа файлов:

Перед тем, как изменить формат изображения на jpg, выберите пункт «Файл» в главном меню. На экране должно появиться выпадающее меню параметров для изображения:

• Сохраните или экспортируйте файл изображения. Изменение формата будет происходить одновременно с сохранением новой версии файла. Это полезно: исходный файл остается без изменений, и если что-то пойдет не так, вы всегда сможете к нему вернуться. На Mac нужно выбрать пункт «Сохранить как» или «Экспорт», чтобы продолжить процесс:
• В некоторых версиях программного обеспечения вам, потребуется сначала «Дублировать» файл (то есть сделать его копию), а затем «Сохранить». Таким образом файл сохранится в новом формате:

• Измените имя и расширение файла. В появившемся окне вы сможете изменить имя, а также расширение (формат) файла. В выпадающем меню «Формат» или «Сохранить как» должно быть около 12 вариантов, в том числе и «.jpeg«:
• Перед тем, как изменить формат изображения на png, поменяйте имя файла или место его размещения, если это необходимо. Например, можно разместить его на рабочем столе для быстрого доступа;
• Если расширение, которое вам нужно, отсутствует в выпадающем меню, попробуйте другое программное обеспечение для редактирования изображений (например, Photoshop):

• Сохраните файл. После того, как вы зададите нужное имя, расширение и местоположение файла, нажмите кнопку «Сохранить». Таким образом вы сконвертируете файл в новый формат, сохранив оригинал:
• Такое программное обеспечение, как Preview могут пакетно обрабатывать преобразование файлов. Для этого выделите файлы, которые необходимо преобразовать, и кликните по ним правой кнопкой мыши, чтобы увидеть доступные опции.

Итоги

Какой какой формат изображения лучше и как выбрать тип файла в зависимости от области использования:

• Лучшая компрессия — с потерями для маленьких файлов — JPEG, или без потерь для наилучшего качества изображений — TIFF и PNG
• Полноцветный RGB для фотографий — TIFF, PNG, JPEG
• Прозрачность или анимация для использования в графике — GIF и PNG
• Документы, штриховые рисунки, многостраничные текстовые, факс, и т.д. — TIFF
• Полиграфия где используется цветовая модель CMYK — TIFF

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

Так как Вы заинтересовались форматом изображений и их отличиями, могу предположить, что одна из Ваших сфер деятельности связана с сайтами или лендингами. Рекомендую Вашему вниманию бесплатную книгу «Анатомия продающих лендингов». Очень полезная книга из которой Вы узнаете:

• 4 элемента первого экрана продающего лендинга
• 3 простые и работающие формулы продающего заголовка
• анатомия конверсионной страницы

Скачивайте книгу «Анатомия продающих лендингов» и применяйте на практике полученные знания.

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

Жду Ваших комментариев. Подписывайтесь на обновления блога. Дмитрий Леонов | leonov-do.ru

Итоги

Размер картинок важно узнавать для внутренней оптимизации сайта. Уменьшение размера используемых картинок позволит увеличить скорость загрузки сайта, что положительно скажется на SEO

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

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

Пожалуйста, опубликуйте ваши комментарии по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, дизлайки, подписки, отклики, лайки!