Чем отличаются форматы изображений и зачем они нужны

PSD

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

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

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

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

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

Недостатки

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

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

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

Преимущества и недостатки общих типов файлов

Преимущества формата JPEG

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

Недостатки формата JPEG

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

Недостатки формата TIFF

Некоторые программы, в том числе большинство браузеров, не могут отображать изображения в формате TIFF.

Изображение в формате TIFF может быть очень большим (в несколько раз больше изображения в формате JPEG). Поэтому изображение в формате TIFF занимают гораздо больше места на жестком диске, чем изображение в формате JPEG.

Только очень маленькие изображения в формате TIFF пригодны для отправки по электронной почте.

Другие стандарты

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

Для обычных фотографий

Фоторазмер	Линейный, мм	В пикселях (для 300 dpi)	Соотношение сторон	ISO стандарт	Размер ISO, мм
30×60	306×611	3602×7215	1:2	~А2	420×594
30×45	306×458	3602×5938	2:3	~А3	297×420
30×40	306×421	3602×4972	3:4	~А3	297×420
20×30	204×306	2409×3602	2:3	~А4	210×297
15×21	153×211	1807×2492	3:4	~А5	148×210
10×15	103×153	1217×1807	2:3	~А6	105×148

Выбор принтера для печати фотографийСоветы, рекомендации и подборка популярных моделей.

Для широкоформатной печати

Формат, см	В пикселях	Соотношение сторон
100×300	10 000×30 000	1:3
100×150	10 000×15 000	2:3
100×100	10 000×10 000	1:1
90×120	9000×12 000	3:4
60×180	6000×18 000	1:3
60×90	6000×9000	2:3
50×75	5000×7500	2:3
40×60	4000×6000	2:3

Как заполнять SEO-атрибуты изображений

Поисковые системы воспринимают картинку как тег img с атрибутом src, содержащим само изображение, и атрибутом alt, в котором заключено описание картинки. Еще у изображения может быть прописан title с дополнительным описанием.

Не стоит использовать тег figure для картинок, поскольку figure сигнализирует поисковику, что нужно воспринимать этот объект в отрыве от контента страницы.

Атрибут alt

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

Как заполнять alt для картинки?

Каким должен быть alt изображения:

1. Описывающим содержание картинки.
2. Связанным с текстом вокруг.
3. Уникальным для каждой картинки на странице.
4. Сформулированным максимально простым русским языком, чтобы Google интерпретировал его однозначно. Проверить, понял ли Google надпись в alt, можно в инструменте.
5. Не слишком длинным, Google анализирует только примерно первые 100 символов.
6. Без переспама ключевыми словами.
7. Без повторов основного ключа в каждом alt всех картинок.
8. Не дублирующим заголовок страницы или название статьи.

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

Неудачные варианты:

Нет текста в alt — img src=»sobaka.jpg»-

Переспам — img src=»sobaka.jpg» alt=»собака щенок собачка маленькая собачка ретривер лабрадор волкодав сеттер пойнтер корм для собак дешевый корм для собак еда для собак»

Удачный вариант:

Описание картинки, из которого понятно, что на ней происходит — img src=»sobaka.jpg» alt=»собака породы лабрадор приносит палку хозяину»

Вариант заполнения alt

Что делать для мультиязычных сайтов, советует Джон Мюллер:

Атрибут title

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

Заполненный title

Название файла

В Справке Google написано, что название файла тоже важно, поэтому нужно переименовывать файлы перед загрузкой. Название может выполнять ту же функцию, что и заголовки с подписями, так что вариант sobaka.jpg лучше IMG00023.JPG, поскольку передает содержание картинки

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

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

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

Оптимизация изображений в слайдере

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

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

Изменить формат сразу у нескольких фото программой Easy Image Modifier

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

Будьте осторожны! Программ подобных много, в том числе бесплатных. Но не попадитесь ненароком на такое «счастье», как Movavi.

Якобы бесплатная версия, на самом деле, не бесплатная, а временная пробная версия дорогой программы. Но об этом Вы узнаете только после установки! Потратите время, чтобы выяснить, что после обработки 100 фото надо будет платить деньги. Кроме того, во время самой установки навязчиво предлагается поставить все что только бывает в природе от яндекса, зарегистрироваться, непонятно с какой целью, а при попытке закрыть программу — навязывает покупку полной версии. Программа очень навязчивая, из серии «удалил-перекрестился».

Сам пользуюсь программой Easy Image Modifier. Скачать ее можно на сайте www.inspire-soft.net Здесь все честно. Никаких подвохов в виде временных или количественных ограничений. Ставь и пользуйся. Программа может как изменить формат фотографии на jpg, так и на другой формат, менять их размер, вносить изменения в название, изменять дату, наносить водяной знак и еще кое какие мелочи.

Пользуйтесь умными решениями!

Традиционные форматы

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

JPG

Является наиболее часто используемым форматом изображений в интернете. JPG назван в честь Joint Photographic Experts Group. Организации, которая разработала данную технологию. Вот почему JPG еще называют JPEG.

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

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

GIF

GIF (graphics interchange format) использует алгоритм сжатия LZW, который не ухудшает качество изображения. В формате GIF отсутствует поддержка цветов (которая есть в JPG и PNG). Тем не менее, формат популярностью благодаря возможности визуализировать анимацию путем объединения нескольких изображений в один файл. Изображения, хранящиеся в файле GIF, могут последовательно отображаться для создания короткого эффекта, похожего на фильм. GIF-файлы могут быть сконфигурированы для отображения последовательности изображений заданное количество раз.

PNG

Формат PNG был первоначально задуман как преемник GIF. Он был разработан специально для представления изображений в интернете. По популярности, PNG занимает второе место после JPG.

При этом PNG позволяет сжимать данные без потери качества. Формат также поддерживает прозрачность и непрозрачность. PNG обычно используется для несложной графики и иллюстраций.

Сравнение поддержки прозрачности JPG (слева) и PNG (справа).

JPEG

JPEG — английская аббревиатура, означающая «Joint Photography Experts Group». Данный формат появился на свет в 1990 году.

Преимущество файлов JPEG в том, что это дает высокое качество изображений и большое количество цветов (до 16 миллионов).

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

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

Программы для работы с jpg

Рассмотрим ряд бесплатных программ для работы с jpg форматом. Список лучших утилит:

1. FastPictureViewer. Программа поможет Вам просматривать большие размеры файлов jpg и не только. Её можно использовать как бесплатно, так и платно. Лицензия этой программы сейчас стоит 3080 рублей. Она работает на компьютере.
2. PhotoScape. Эта программа – графический редактор. С помощью неё можно легко открыть jpg файлы их посмотреть и впоследствии редактировать.
3. Paint.net. Всем известная программа, которая умеет создавать и редактировать изображения разных форматов. На ней подробно останавливаться не будем, поскольку о ней знают все пользователи компьютеров.
4. Photo Editor. Эта небольшая графическая программа для просмотра, редактирования, jpg и других форматов. Она работает по бесплатной лицензии и у неё английский интерфейс, но зато она простая в использовании.

Существует множество других программ, при необходимости Вы сможете найти их в Интернете.

Чем открыть jpg, программы

Итак, мы разобрались с тем, что такое jpg формат, узнали о его преимуществах и недостатках, рассмотрели программы, которые открывают такие форматы. Теперь, рассмотрим вопрос, чем открыть jpg.

Как правило, jpg это обычная картинка, которая открывается простым инструментом от Windows или с помощью программ. Разберём оба варианта.

Например, Вы нашли в Яндексе картинку по нужным параметрам и скачали ее на компьютер в формате jpg (Скрин 1).

Чтобы её открыть, кликните по ней правой кнопкой мыши и выберите из меню мыши кнопку «Просмотр» (Скрин 2).

Тогда Ваш jpg формат откроется в специальном средстве для просмотра изображений (Скрин 3).

Возьмём для практического примера, одну из программ, которая была в списке выше. Она называется «FastPictureViewer». Скачиваете её бесплатную версию в Интернете на компьютер и устанавливаете программу.

Далее, запускаете на компьютере эту программу двойным щелчком компьютерной мыши. После чего она откроется (Скрин 4).

Её использование довольно простое. В самом низу утилиты нажмите кнопку «Меню» и кликните один раз на кнопку «Открыть изображение», чтобы выбрать картинку jpg с компьютера (Скрин 5).

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

Как видите, она открыла файл jpg без проблем, который можно посмотреть.

Есть ещё программы, которые так же открывают jpg файлы:

1. Фотошоп.
2. Pixlr.
3. Бесплатные аналоги Фотошоп.
4. Программы Windows. Например, Paint и другие.

Думаю, этих программ Вам хватит, чтобы успешно открывать jpg формат.

Программы для работы с jpg файлами

Например, Вам нужно сжать jpg файл, или его восстановить если он раньше был повреждён. С этими проблемами отлично справляются специальные программы:

1. Unjpeg 1.5. Условно-бесплатная программа. Она может восстанавливать различные изображения в формате jpg после их сжатия. Также имеет интерфейс для работы с этим форматом.
2. Advanced JPEG Compressor 5. Бесплатная программа и в тоже время очень эффективная утилита, которая оптимизирует картинки в форматах jpg и их редактирует.
3. JPEG Wizard 2.4. Это специальная мастер-программа JPG. У неё есть расширенные инструменты для сжатия изображений и много других возможностей, которые позволяют работать с jpg файлами.

Здесь, были выбраны самые лучшие программы для работы jpg. В Интернете есть ещё больше таких утилит.

Как преобразовать jpg в другие форматы

Во время работы с jpg-картинками, возникает необходимость преобразовывать их в другие форматы. В этом Вам смогут помочь специальные сервисы. Чтобы их использовать, зайдите в любой браузер на компьютере и введите в его поиске – «преобразовать jpg», после чего нажмите «Найти».

В результатах поиска Вам будут доступны сервисы-конвертеры. Выбираете например, первый конвертер изображений jpg и заходите на сайт – «convert-my-image.com/ImageConverter_Ru». Далее, нажимаете на нём кнопку «Выбрать файл» и добавляете в сервис картинку формата jpg.

Затем, выбираем другой формат в которой мы хотим конвертировать это изображение. Например, в Gif. И нажимаете кнопку «Конвертировать», чтобы файл jpg преобразовался и загрузился на компьютер в другом формате.

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

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

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

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

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

GIF

GIF (Graphics Interchange Format, формат обмена графическими данными) — формат графических файлов, широко применяемый при создании сайтов. GIF использует 8-битовый цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения.

Особенности

• Количество цветов в изображении может быть от 2 до 256, но это могут быть любые цвета из 24-битной палитры.
• Файл в формате GIF может содержать прозрачные участки. Если используется отличный от белого цвета фон, он будет проглядывать сквозь «дыры» в изображении.
• Формат поддерживает покадровую смену изображений, что делает его популярным для создания баннеров и простой анимации.
• Использует свободный от потерь метод сжатия.

Область применения

Текст, логотипы, иллюстрации с чёткими краями, анимированные рисунки, изображения с прозрачными участками, баннеры.

Пиксель

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

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

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

PNG

Разработанный в 90-х в качестве улучшенной версии формата GIF, PNG-файлы идеальны для использования в интернете. Преимущество PNG в том, что они сжимаются без потерь, сохраняя все цифровые детали. Но в отличии от других форматов это качество не подразумевает большой размер файла, который не совсем удобен, когда вы хотите быстро загрузить изображение в интернете. Другим преимуществом файлов PNG является то, что они допускают частичную (эффект отбрасывания теней) или полную прозрачность, что идеально подходит для наложения и логотипов.

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

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

Недостатки

Качество будет не достаточным для печати в любом размере

BMP

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

BMP является третьим по популярности форматом графики.

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

Сжатие файла изображения

Есть два типа сжатие файла изображения алгоритмы: без потерь и с потерями.

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

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

Средствами самой Windows

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

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

Правда, при этом размер файла (файлов) сохранится тот же самый, что был до смены формата.

Смена формата в проводнике Windows

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

Показать расширения имен файлов

Теперь, как и при обычном переименовывании, кликаем правой кнопкой мыши по нужному файлу, в открывшемся списке действий нажимаем «Переименовать». В нашем примере, вместо PNG  набираем JPG и жмем Enter. Система дуракоустойчивости предупреждает о необратимости действия, думаем еще раз на всякий случай, и нажимаем Enter повторно.

Измененный формат фото

Все, формат фото изменен. Но! Размер файла при этом не изменился.

Групповая смена формата файлов с помощью командной строки

Зайдите в командную строку. Сделать это можно нажатием сочетания клавиш Windows+R на клавиатуре, после чего во всплывающем окне  ввести cmd и нажать ОК.

Вход в командную строку

В Windows 10 нажмите на «Поиск» в панели управления, также введите cmd и кликните по появившейся в списке строке «Командная строка».

Windows10 Вход в командную строку

В результате откроется такое окно с черным фоном.

Командная строка Windows

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

Путь к папке с файлами

Вставляем в строку путь к папке, в которой расположены файлы, сразу после команды cd, выглядит это так: cd C:\Users\Альберт\Downloads\100D5000, (у Вас путь будет свой, поэтому я зачеркнул мой, чтобы случайно не скопировали).

Командная строка путь к папке

Жмём Enter. Этим действием мы переходим в командной строке в нужную нам папку.

Затем используем специальную команду, которая изменит расширения у файлов, скопируйте ее прямо отсюда: rename *.PNG *.JPG и снова нажимаем Enter.

Команда смены формата файлов

Заглядываем в нашу папку, и видим, что все файлы поменяли тип расширения, или как мы чаще говорим, формат. У всех стал JPG.

Результат группового изменения формата файлов с PNG на JPG

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

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

Изменить формат фото в paint

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

• Открываете файл в редакторе paint
• Сохраняете его через «Сохранить как» в нужном формате.

Как изменить формат фото в редакторе paint

Теперь посмотрим,

GIF: Структура

Блок описания логического экрана

порта просмотраНебольшой дисклеймер. Несмотря на то, что на интуитивном уровне сама гифка (арргх… ладно, «джифка») — это картинка, которая показывается на экране, мы будем придерживаться терминологии, указанной в спецификации: «логический экран» — это размер всей GIF’ки целиком, а «изображение» — это слой/кадр.18

Изображение

шикарная статья с картинкамиКстати, раз уж пошла речь, Вы же уже догадались, каким образом на одном логическом экране GIF можно отобразить более 256 цветов?

Комментарий

Фух! Кажется, по структуре всё. Честно сказать, я сам ожидал, что она будет проще. Если вдруг возникли какие-то недопонимания, из-за стиля изложения или перевода терминов, можно ознакомиться с официальной спецификацией GIF89a. Также очень советую программку GIF opener, ей сто лет в обед, но лучше для низкоуровневого редактирования gif я пока ничего не видел.

Сжатие файла изображения

Есть два типа сжатие файла изображения алгоритмы: без потерь и с потерями.

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

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

Формат TIFF

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

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

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

Немного теории

Пиксель

Это минимально возможный неделимый визуальный объект, он бывает круглой либо прямоугольной формы. У такой цветной «точки» всегда есть какой-то определенный цвет. Из множества пикселей, выстроенных в высоту и ширину, состоят растровые изображения на фотоснимках, мониторах и других мультимедийных устройствах. Обозначается словом «пиксели», сокращениями «пкс» или px.

Растровое изображение

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

Размеры

Их принято измерять в линейной системе либо в пикселях.

Линейный: ширина и длина

Эти размеры измеряются в миллиметрах (мм), реже — в сантиметрах (см). Два главных показателя — ширина и длина. Еще иногда длину называют высотой. При написании размерности в виде «297×420» первая цифра — это ширина, вторая — длина.

В пикселях

Все то же самое, что и для линейных размеров, но в качестве точки отсчета используются уже не миллиметры, а пиксели. Соответственно, цифры, обозначающие размерность, будут совсем другими. Например, размерность 297×420 мм при переводе в пиксели составит уже 3614×5410.

DPI

Этот параметр применяют для обозначения четкости уровня распечатки картинок или документов на МФУ и других печатных устройствах. Чем он выше — тем лучше будет картинка по четкости.

Насколько важно соотношение сторон и стандартные размеры

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

Связь с матрицами фотоаппаратов

Самые распространенные фотоформаты по соотношению своих сторон часто бывают идентичны параметрам матриц у цифровых фотоаппаратов. Так соотношение 1:1,33 соответствует стандарту ¾, а 1:1,5 — 2/3. Бумажные форматы, принятые в большинстве стран мира, имеют размерность, соответствующую пропорции 1:1,4142 и потому не идентичны фотоформатам.

Новые форматы

Вот несколько кандидатов, которыми можно заменять существующие форматы.

WebP

WebP был разработан Google как альтернатива JPG. Файл в этом формате может быть на 80 % меньше, чем JPEG.

Opera и Google Chrome в настоящее время уже поддерживают его. Firefox объявил о планах по реализации поддержки этого графического формата.

Google и Facebook в настоящее время экспериментируют с этим графическим форматом. WebP уже используют около 95 % изображений на главной странице eBay. YouTube применяет формат для отображения больших миниатюр.

Для CMS существуют расширения, которые помогут добавить поддержку WebP на сайт. Например, Optimus и Cache Enabler для WordPress. Это не нарушит отображение сайта в браузерах, которые не поддерживают WebP, если предоставить резервные варианты в формате PNG или JPG.

Эти данные по поддержке браузерами взяты с Caniuse.

Десктопные

Chrome	Opera	Firefox	IE	Edge	Safari
32	19	65	Нет	18	Нет

Мобильные / Планшеты

iOS Safari	Opera Mobile	Opera Mini	Android	Android Chrome	Android Firefox
Нет	11.1	Все	4.2-4.3	73	Нет

HEIF

High efficiency image files имеет расширение HEIC (.heic). Ранее корпорация Apple объявила о том, что ее линейка продуктов будет поддерживать формат HEIF по умолчанию.

Помимо файлов меньшего размера HEIF обеспечивает большую гибкость, чем другие форматы. Он поддерживает неподвижные изображения и последовательности картинок. Следовательно, в одном файле можно хранить серийные снимки, кадры из видео и другие коллекции изображений. HEIF также поддерживает прозрачность, 3D и 4K.

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

На момент написания этой статьи формат HEIF не поддерживался браузерами.

Настольные

Chrome	Opera	Firefox	IE	Edge	Safari
Нет	Нет	Нет	Нет	Нет	Нет

Mobile / Tablet

iOS Safari	Opera Mobile	Opera Mini	Android	Android Chrome	Android Firefox
Нет	Нет	Нет	Нет	Нет	Нет

FLIF

Free Lossless Image Format (или FLIF) использует алгоритм, который на 14-74 % эффективнее по сравнению с устаревшими форматами. Поэтому FLIF отлично подходит для любого типа изображений или анимации. Файлы, сохраненные в этом формате, в среднем на 43% меньше, чем в PNG.

При тестировании FLIF часто оказывался наиболее эффективным форматом.

FLIF использует один из алгоритмов на основе арифметического кодирования. Он также поддерживает прогрессивное чередование. Поэтому изображения отображаются целиком, как только они начинают загружаться.

Современные браузеры не поддерживают FLIF. Но веб-разработчики могут получить доступ к исходному коду FLIF и использовать решение полифилла.

Как узнать размер изображения, размещенного на любом сайте?

Чтобы узнать размер фотографии, размещенной на сайте, воспользуйтесь следующей инструкцией:

1. Если вы используете браузер Mozilla Firefox — кликните правой кнопкой мыши по картинке, затем выберите в контекстном меню пункт «Информация об изображении». Это действие выведет информационное окно, в котором будет показан оригинальный размер изображения и его измененный вариант, который используется на сайте.
2. Если вы используете браузер Google Chrome — щелкните правой кнопкой мыши по изображению, после чего выберите в контекстном меню пункт «Просмотр кода элемента». В появившемся после этого окне будет виден размер картинки (с правой стороны в цветной рамке). Либо навести мышкой на выделение в правом окне, тогда над выделенной картинкой появится размер картинки.
3. В современных версиях браузера Opera узнать размер изображения с помощью встроенных инструментов не получится. Но выход есть! Установите дополнение «Classic Images», с помощью которого можно узнавать тип, размер, разрешение и адрес картинки. Алгоритм действий такой же, как и в браузере Firefox — клик правой кнопкой мыши, затем пункт «Просмотр свойств изображения».

WMF

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

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

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

Итоги

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

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

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

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