Лучшие форматы изображений для веб-дизайна и разработки

3 основных формата изображений, используемых в интернете

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

1. Формат JPEG

Термин JPEG расшифровывается как Joint Photographic Experts Group. Он был придуман в далеком 1986-м году. Основные преимущества этого формата в том, что он может отображать миллионы цветов, и особенно хорошо подходит для высоких уровней сжатия.

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

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

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

2. Формат PNG

Графический формат PNG (Portable Network Graphics) также популярен на интернет-сайтах, как и JPEG. PNG-изображения, аналогично JPEG, поддерживают миллионы цветов. Хотя все же этот формат больше подходит для картинок, содержащих меньше цветовых данных. В противном случае ваше изображение будет «тяжелее» по размеру, аналогичное, сохраненное как JPEG.

Вот пример изображения в формате PNG:

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

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

Еще одним преимуществом PNG является то, что он поддерживает прозрачность. Это делает формат идеальным вариантом для логотипов и значков. Например, логотип WPShop в формате PNG с прозрачным фоном:

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

3. Формат GIF

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

JPEG и PNG обычно не поддерживают анимацию (хотя есть формат APNG (Animated Portable Network Graphics), называемый анимированной переносимой сетевой графикой. Это делает GIF-файлы очень полезными. Однако эти типы изображений по размеру значительно больше, так как содержат много кадров.

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

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

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

Формат 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 добавляет артефакты, смазывается текст и края линий

Таблица популярных форматов

Расширение	Тип файла	Программа
.jpg .png .bmp .gif .tif	Изображение	Фотографии (Windows 8/10)Средство просмотра фотографий (Windows 7)FastStone Image ViewerPaint
.doc .docx	Документ	Microsoft WordOpenOfficeLibreOffice
.xls .xlsx	Электронная таблица	Microsoft ExcelOpenOfficeLibreOffice
.pdf	PDF-документ	Acrobat ReaderFoxit Reader
.txt	Текстовый файл	БлокнотNotepad++
.zip .rar .7z .gzip	Архив	WinZipWinRAR7-Zip
.mp3 .wav .midi .aac	Аудиофайл	Windows Media PlayerMedia Player ClassicVLC Media Player
.mp4 .avi .mkv .wmv .flv .mpeg	Видеофайл	Windows Media PlayerMedia Player ClassicVLC Media Player
.html .htm .mht	Cтраница из интернета	Google ChromeЯндекс.БраузерMozilla FirefoxOpera
.ppt .pptx	Презентация	Microsoft PowerPointOpenOffice
.mdb .accdb	База данных	Microsoft Access
.iso	Образ оптического диска	UltraISOAlcohol 120%7-Zip
.cdr	Векторное изображение	CorelDRAWCDR Viewer
.torrent	Торрент-файл	uTorrentBitTorrent
.djvu	Сканированный документ(книга, журнал и пр.)	WinDjView
.fb2 .epub .mobi	Электронная книга	FBReader

GIF

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

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

• Маленький размер файлов делает их идеальными для использования в интернете
• Файлы могут содержать анимацию

Недостатки

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

SVG

SVG (Scalable Vector Graphics standard) – новый графический стандарт векторной графики. Этот стандарт принципиально отличается от своих предшественников, тем, что изображение в нем описывается текстом на декларативном языке XML.

Например, чтобы описать изображение круга с центром в координатах (100,50), красной заливкой, радиусом 40 пикселов и черной границей толщиной в 2 пиксела, нужно записать следующий код:

stroke-width=»2″ fill=»red» />

Замечание 1

Конечно, это не означает, что пользователь должен знать язык XML и описывать свои изображения, вместо того, чтобы рисовать. Пользователь может создавать изображения традиционным способом: рисуя на холсте при помощи различных инструментов. Но все его действия автоматически переводятся в код на XML и именно так сохраняются. Поскольку XML является текстовым стандартом, то изображения становятся доступны для индексации поисковыми системами. Файлы *.svg занимают мало места и быстро обрабатываются, что делает данный формат незаменимым в работе с web.

Конвертация форматов

Подведем итоги сравнения форматов изображений. Сначала небольшая таблица:

Таким образом, для маленьких картинок специального назначения можно
использовать ico, если вам нужна анимация, то ваш выбор — gif, для фотографий
хорошо использовать jpg, а для диаграмм и изображений с малым количеством цветов
— png. Формат bmp я использовать вообще не рекомендую, а tiff оставим для
профессионалов.

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

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

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

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

С развитием компьютеров и интернета появлялись новые форматы для записи изображений в файлы. Каждый формат имеет свои преимущества и недостатки.

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

Векторное представление

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

Итак, первое преимущество — это значительно меньший размер векторных изображений
по сравнению с точечными рисунками, потому что описывается не каждый отдельный
пиксел изображения, а вся фигура целиком (например, для задания окружности необходимо
передать 3-4 числа: радиус, координаты центра и, может быть, тип или толщину
линии и ее атрибуты). Математические формулы, которые описывают векторное представление,
занимают намного меньше места, чем индивидуальные пикселы и их атрибуты.

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

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

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

Для обеспечения возможности органично встраивать векторную графику в традиционный
HTML-формат без какого бы то ни было дополнительного программного обеспечения
в настоящее время на рассмотрении комитета по стандартам W3C находятся два новых
векторных стандарта: PGML (Precision Graphics Mark-up Language) и VML (Vector
Mark-up Language). PGML поддерживается фирмами Adobe Systems, IBM, Netscape
и Sun Microsystems, а VML — Microsoft, Hewlett-Packard, Autodesk, Macromedia
и Visio. Оба стандарта основаны на расширениях языка разметки XML, пропагандируемого
для применения в сети как преемника HTML и рекомендованного W3C к использованию
в будущем.

Но в настоящее время ни один из браузеров не поддерживает никаких стандартов
векторной графики, хотя дополнительные модули (Plug-ins) уже имеются. Среди
наиболее популярных способов показа статических векторных изображений на Web
сегодня можно выделить принадлежащий фирме Macromedia формат SWF (Shockwave
Flash) и недооцененный пока формат Xara Flare.

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

Расширения файлов

Расширение файла всегда указывается в его названии после точки и состоит из трех букв. Например, работая с файлом Word, мы можем увидеть расширение doc или docx. Благодаря расширению операционная система понимает, какой программой можно воздействовать на файл — открыть, редактировать и т.п. 

Примечание

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

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

BMP

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

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

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

Недостатки

Большой размер файлов потребует много места для хранения

Анимация, интерактивность и взаимодействие

Вообще говоря, и GIF-изображения можно оформить в виде специального стека в
одном файле, и полученный «фильм» (flipbook) воспроизвести можно, создав простую
растровую анимацию. И Netscape и Microsoft обеспечили поддержку «оживляемого»
GIF-формата, начиная еще с третьих версий своих браузеров, так что их присутствия
на Web теперь трудно избежать. Многочисленные GIF-аниматоры, позволяющие формировать
подобные GIF-стеки, широко распространены (причем как коммерческие, так и общедоступные).
Однако «оживление» GIF-формата может привести к неуправляемым размерам файлов,
ибо каждый «уровень» такого стека — это индивидуальное GIF-изображение, так
что типичные 15 кадров в секунду для компьютерной анимации могут «наплодить»
несчетное число килобайтов.

В комбинации с Java или JavaScript можно создавать и интерактивную анимацию,
которая будет реагировать на пользователя.

А теперь рассмотрим другие решения для Web-анимации и интерактивного взаимодействия
с пользователем, причем основную роль здесь продолжает играть фирма Macromedia,
давно вышедшая на рынок со своими программами Shockwave и Flash и непрерывно
улучшающая свои изделия, повышая их эффективность в соответствии с запросами
пользователей и проектировщиков.

Первоначально созданный как формат для Macromedia Director, Shockwave — это
семейство протоколов, нацеленных прежде всего на производство интерактивного
и графического содержания, создаваемого специально для использования в сети
Интернет. А Shockwave Flash — это вообще уникальный инструмент и один из самых
лучших способов для создания анимации и публикации ее на Web-странице. Shockwave
Flash образует совсем маленькие файлы (так как использует преимущественно векторный
формат представления) и по сравнению с другими форматами наиболее удобен с точки
зрения подготовки.

При публикации такой анимации на ваших страницах не забудьте уведомить об этом
пользователя, чтобы он заранее запасся дополнительным модулем и приготовился
к томительному ожиданию загрузки. Однако последние версии — и Netscape Navigator,
и Internet Explorer имеют модули просмотра для Flash-анимаций даже в базовой
поставке. Фирма Netscape подтвердила, что последующие версии Navigator будут
иметь такую поддержку для Flash даже на уровне кода.

Как назначить программу запуска

Каждому типу файла система назначает приложение для его запуска. И помечает иконкой этой программы. Например, текстовые (txt) будут по умолчанию открыты в Блокноте. А музыкальные (mp3) – в проигрывателе Windows Media.

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

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

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

Для каждого популярного формата есть своя бесплатная программа:

Другие форматы и программы для них смотрите .

Выбор программы по умолчанию

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

1. Щелкните правой кнопкой мыши по файлу. Выберите «Открыть с помощью…» или «Открыть с помощью» → «Выбрать другое приложение».

2. В окошке кликните левой кнопкой мыши по нужной программе и поставьте птичку на пункт «Всегда использовать это приложение». Нажмите ОК.

Вот и всё – теперь объекты данного формата будут по умолчанию запускаться в назначенной программе.

Подробнее о выборе формата записи цифровой фотографии

Итак, рассмотрим главные особенности популярных форматов фотографий.

Формат RAW

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

Формат TIFF

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

Формат JPEG

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

Формат PNG

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

Формат GIF

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

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

Также популярно использование формата PSD (формата программы PhotoShop) для хранения фотографии на компьютере для дальнейшей обработки.

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

.JPEG (JPG)

Это, пожалуй, самый распространенный графический формат. Обычно он используется для публикации в интернете фотографий и изображений с текстом. JPEG является TrueColor-форматом, то есть может хранить изображения с глубиной цвета 24 бит/пиксель. Данный формат может отображать более 16 млн цветов.

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

JPEG с высоким качеством (100). Размер 113 КБ

JPEG со средним качеством (50). Размер 59 КБ

JPEG с низким качеством (20). Размер 27 КБ

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

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

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

Рисунок 3. Формат RAW позволяет более тонко обработать изображение чем JPEG.

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

В основном формат RAW доступен на полупрофессиональных и профессиональных фотокамерах. На простых цифромыльницах в основном доступны JPEG и TIFF форматы.

Формат JPEG.

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

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

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

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

Dragon Age 3 на Core 2 Duo процессоре — идет или нет?

Форматы в зависимости от цели использования

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

	Фотографические изображения	Графика, логотипы, иконки
Лучший выбор	WebP; JPEG (с оптимальной степенью сжатия).	SVG; PNG; WebP.
Худший выбор	GIF; SVG.	JPEG (сжатие добавляет артефакты, смазывается текст, края линий, пропадает прозрачность).
Лучшее качество	JPEG (минимальное сжатие); PNG; WebP.	PNG; SVG; WebP.
Наименьший размер файла	JPEG (максимальное сжатие); WebP.	SVG; GIF.

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

Формат 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 добавляет артефакты, смазывается текст и края линий

В

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

Thank You For Helping Us!