Gif, png или jpg — форматы растровой графики для веба, их плюсы и минусы при использовании на сайте

Форматы JPG GIF и PNG. Разница для размещения на сайте

Какой формат выбрать для размещения на сайте изображений зависит прежде всего от того какие изображения используются и какие существуют требования. Форматы JPG GIF и PNG используются в web в разной степени, чаще всего применяются JPG и PNG, GIF в настоящее время только для анимации, он практически вытеснен PNG.

На веб-сайтах изображения в основном используются двух форматов JPG и PNG. Рассмотрим их и определим плюсы, минусы и оправданность применения

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

PNG — не отличается очень хорошей передачей текста, но поддерживает прозрачность (alpha-transparency) и не приводит к потере качества при изменении размера изображения. Использовать лучше для логотипов, иконок схем, графиков и т.п.

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

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

Форматы или цветовые палитры PNG-8 и PNG-24

Есть 2 подформата PNG с разной битностью: PNG-8 и PNG-24. Первый представляет собой замену GIF, второй поддерживает многоцветность и имеет приемлиму цветопередачу (если речь идет не о фотографиях высокой четкости).

PNG-8 практически идентичен GIF (с индексированной палитрой цветов и их количестве до 256). В 1 бите может храниться информация о двух цветах, в 8 — о 256. Это максимум для формата.
PNG-24 — используется для растровых изображений и приближается к JPG, хотя уступает ему в случае с цветными фотографиями

Преобразовать изображение в другой формат

Делать это полезно прежде всего для уменьшения размера файлов. Если используется 2 цвета — нет смысле иметь палитру, позволяющую 16 777 216 сочетаний (для 24 битного изображения). Оптимизированные изображения при большом их количестве могут очень заметно увеличить скорость работы сайта.

Чтобы выполнить преобразование можно использовать convert из пакета imagemagick

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

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

Такая команда автоматически преобразует file.png подобрав нужную битность, которая обеспечит 80% качество аналогичного изображения в формате JPG.

Источник: https://server-gu.ru/jpg-gif-png/

Основные форматы изображений: плюсы и минусы

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

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

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

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

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

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

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

Мы полагаем, вы слышали о растровых или векторных изображениях, не так ли?

1. Растровое изображение против векторного

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

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

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

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

2. Сжатие изображений с потерями и без потерь

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

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

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

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

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

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

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

***

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

А теперь пришло время познакомиться с теми самыми типами расширений.

Расширение: JPEG

Расшифровка: Joint Photographic Experts Group

Тип изображения: растровое
Тип сжатия: с потерями

Особенности:

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

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

Поддерживается всеми операционными системами;
Является хорошим решением, когда нужно позаботиться о цветовых деталях;
Поддерживается всеми фотокамерами, фотопринтерами и программами для редактирования;
Соотношение между размером и качеством – удовлетворительное.

Недостатки:

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

Расширение: GIF

Расшифровка: Graphics Interchange Format

Тип изображения: растровое
Тип сжатия: без потерь

Особенности:

Согласно Википедии, слово “gif”, первоначально было признано в качестве существительного и глагола (в значении – сделать gif-картинку);
Расширение .gif было выпущено компанией CompuServe. Этот тип изображения использовался на первых веб-сайтах.

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

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

Недостатки:

Gif изображения поддерживают только 256 цветов; из-за этого, рекомендуется не выбирать данный формат для красочных изображений;
Существуют новые форматы изображений, которые могут скоро сменить “добрый старый GIF”.

Расширение: TIFF

Расшифровка:

Источник: https://www.motocms.com/blog/ru/osnovnye-formaty-izobragenii-plusy-minusy/

Имеет ли смысл конвертировать все изображения на сайте в PNG?

1. Принцип сжатия JPEG основан на разбиении изображения на квадраты 8×8 пикселов и заливке этих квадратов градиентами.

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

2. Принцип сжатия GIF и PNG-8 (не путать с PNG-24) основан на сужении цветовой палитры до минимума, достаточного для более-менее корректного отображения изображения. За счёт сужения палитры каждый вариант цвета можно закодировать меньшим количеством байт, этим (помимо алгоритмов архивации) и достигается сжатие. Максимальное количество оттенков — 256. Соответственно, GIF и PNG-8 хорошо подходят для субъективно беспотерьного (кодируется каждый пиксел) сжатия штриховых изображений с однотонными областями и небольшим количеством оттенков (логотипов, графиков, схем и проч.) и НЕ подходит для подавляющего большинства фотографических изображений (в фотографиях количество оттенков обычно сильно больше, чем 256, а если и не больше, то объём файла получается неоправданно большим, поскольку GIF/PNG-8 честно кодируют каждый пиксел изображения).

3. PNG-24 (не путать с PNG-8) — сжатие вообще без потерь. По сути специализированный архиватор для изображений.

Соответственно, объём выходного файла наибольший и обычно значительно больше, чем у GIF/PNG-8, равно как и JPEG.

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

Нравится 7 6 комментариев

Форматы следует использовать по назначению.

ПНГ предназначен для хранения прозрачных и полупрозрачных изображений, Джпег для хранения фотографий, а ГИФ для хранения самой примитивной графики. Алгоритмы сжатия каждого из форматов заточены конкретно под свои нужды.

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

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

Фотографии значительно лучше сожмутся JPEG, логотипы, градиенты — PNG.

Нравится 1 КомментироватьНеобходимо повысить посещаемость сайта. Возникло такое предложение: конвертировать все изображения на ресурсе в формат PNG.

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

то перевод картинок — один из вариантов экономии, хотя на мой взгляд совершенно малопонятный. Посещаемость 2500 посещений в день — это нагрузка ВДС сервера с 512М ОЗУ, который можно купить за 450-500р в месяц.

И такого конфига я думаю хватит примерно до 10000 посещений в день(если не больше).

Возникнут проблемы с ресурсом — не проблема перейти на более старший тариф с 1Гб ОЗУ и более мощным процессором за 850-900р.

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

Источник: https://toster.ru/q/2454

PNG против JPG, GIF, BMP и TIF

Мы все загружаем изображения, создаем фото, делаем “мемы”, чтобы делиться ими в социальных сетях.

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

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

Краткий анализ графических форматов файлов

JPG / JPEG / JFIF
PNG
TIF / TIFF
GIF
BMP

Растр против вектора

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

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

Сжатие файлов

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

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

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

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

Аббревиатура от: Joint Photographic Experts Group – Объединённая группа экспертов по фотографиям.

Расширения файлов: .jpg / .jpeg

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

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

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

Аббревиатура от

Источник: https://userello.ru/internet/png-protiv-jpg-gif-bmp-i-tif

Основные форматы изображений: плюсы и минусы

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

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

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

Мы полагаем, вы слышали о растровых или векторных изображениях, не так ли?

1. Растровое изображение против векторного

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

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

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

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

2. Сжатие изображений с потерями и без потерь

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

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

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

А теперь пришло время познакомиться с теми самыми типами расширений.

Расширение: JPEG

Расшифровка: Joint Photographic Experts Group

Тип изображения: растровое
Тип сжатия: с потерями

Особенности:

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

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

Поддерживается всеми операционными системами;
Является хорошим решением, когда нужно позаботиться о цветовых деталях;
Поддерживается всеми фотокамерами, фотопринтерами и программами для редактирования;
Соотношение между размером и качеством – удовлетворительное.

Недостатки:

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

Расширение: GIF

Расшифровка: Graphics Interchange Format

Тип изображения: растровое
Тип сжатия: без потерь

Особенности:

Согласно Википедии, слово “gif”, первоначально было признано в качестве существительного и глагола (в значении – сделать gif-картинку);
Расширение .gif было выпущено компанией CompuServe. Этот тип изображения использовался на первых веб-сайтах.

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

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

Недостатки:

Gif изображения поддерживают только 256 цветов; из-за этого, рекомендуется не выбирать данный формат для красочных изображений;
Существуют новые форматы изображений, которые могут скоро сменить “добрый старый GIF”.

Расширение: TIFF

Источник: https://sveres.ru/articles/osnovy-dizayna/osnovnye-formaty-izobrazheniy-plyusy-i-minusy.html

В чем разница между jpeg, gif, png, raw, bmp, tiff и прочими графическими форматами?

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

Алгоритмы сжатия данных с потерями / без потерь

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

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

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

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

.RAW

Формат файлов, содержащий необработанную информацию, поступающую напрямую с матрицы полупрофессиональной и профессиональной фотокамер. Эти файлы не обрабатываются процессором камеры и содержат всю отснятую информацию в «сыром» виде. Размер таких файлов может превышать 25 МБ. Файлы RAW отлично подойдут для редактирования, однако из-за размера хранить их не слишком удобно.

.JPEG (JPG)

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

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

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

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

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

.GIF

Формат GIF (Graphics Interchange Format) не радует глубиной цвета (8 бит). Он может хранить сжатые без потери данных изображения в формате не более 256 цветов. Одной из особенностей GIF является поддержка анимации.

По теме:

.PNG

Данный формат был разработан в качестве замены GIF. Расшифровывается PNG как Portable Network Graphics. В отличии от GIF, у PNG есть поддержка градаций прозрачности за счет дополнительного альфа-канала. Обычно на прозрачность указывает шахматный фон, как видно из расположенного ниже изображения.

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

.TIFF

Источник: https://yablyk.com/746217-v-chem-raznica-mezhdu-jpeg-gif-png-raw-bmp-tiff-i-prochimi-graficheskimi-formatami/

Какие графические форматы используются в web-дизайне?

Растровая графика — это когда изображение хранится в виде маленьких точек — пикселей.

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

Векторная графика — это когда изображение хранится в виде массива чисел, описывающих построение изображения в виде кривых и ключевых точек-вершин. Форматы векторной графики — swf, cdr, max, ai, частично pdf.

В практике web графики в основном используются два формата растровой графики — jpeg и gif, и один формат векторной графики — swf. Гораздо реже используется формат png.

Форматы jpeg и gif различаются различными алгоритмами сжатия изображения. Так как в web размер файла до сих пор играет весьма существенное значение в силу ряда причин, следовательно, малый вес графического файла существенно повышает скорость загрузки изображения. Для разных «видов» картинок подходит тот или иной формат графики.

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

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

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

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

Алгоритм сжатия этого формата основывается на том, что изображению задается фиксированная цветовая палитра (от 2 до 256 цветов), а все близкие оттенки выкидываются либо заменяются соседними цветами.

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

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

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

Это накладывает ограничения на использование прозрачных переходов в прозрачность, из-за чего файлы gif с прозрачностью зачастую выглядят «рваными» по краям.

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

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

То есть, если это картинка к статье, то она должна располагаться в папке articles и ее названием служит id статьи.

Если это позиция в каталоге, то в соответствующей папке (items, groups) картинка должна иметь названием ID группы, подгруппы или товара.

В то же время, если, к примеру, на сайте очень редко пишутся статьи, можно не вводить дополнительные папки, но тогда файл должен по названию однозначно ассоциироваться с данным разделом. Это можно сделать к примеру добавлением слова news или art перед id картинки (к примеру news-34.jpeg).

Если к одному id относится несколько картинок разного размера — необходимо добавлять после id картинки расширение, обозначающее размер (для больших картинок — b, для маленьких — s) (пример 38-s.gif, art-08-b.jpeg).

Для нескольких картинок одного размера, можно ввести порядковые номера (пример: art08-b01.gif).

При именовании картинок, формирующих оформление сайта, следует придерживаться следующих обозначений: top — для шапки сайта, bottom — для подвала сайта, but — для различного рода кнопок, ico — для иконок, img или pic — для прочих картинок оформления с добавлением порядкового номера в конце.

Основными программами для работы с изображениями у дизайнера служат Adobe Photoshop и Adobe ImageReady для растровой графики; Corel draw и Macromedia Flash для векторной.

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

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

Формат flash — один из самых «модных» и популярных в вебе. Этому служат несколько его особенностей. Во-первых, за счет того, что это векторный формат, возможно создание относительно сложных и красочных изображений при достаточно малом весе файла.

Во-вторых, за счет использования встроенного скриптового языка Action Script во flash есть возможность создавать интерактивные баннеры, приложения, писать различные сценарии, создавать онлайн системы расчета, игры, отдельные приложения и т. п.

Источник: https://ShkolaZhizni.ru/@DrBodja/posts/6364/

Чем отличаются форматы изображений bmp, png, jpg, gif

Всем привет! Все видели у картинок в интернете такую приписку, как bmp, png, jpg или gif (ну или другие)? Например, foto.png или foto.jpg. Это графические файлы разных форматов.

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

Что такое форматы изображений бывают и зачем они нужны?

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

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

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

(В качестве иллюстрации своих слов я взял портреты Владимира Семеновича Высоцкого, да простят меня те, кому это покажется неуместным)

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

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

То же самой и с форматами изображений – вариантов множество.

Но их всех можно разделить на две большие группы – растровые и векторные. А нет, есть еще одна группа – смешанные, или комплексные, куда ж без них в современном мире

Источник: http://blogmonet.ru/chem-otlichayutsya-formaty-izobrazhenij-bmp-png-jpg-gif.html

Какой формат картинок лучше – png, gif или jpeg?

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

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

Форматы картинок png, gif и jpeg

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

Некому не секрет что страничка должна “весить” как можно меньше. Размер (“вес”) графики на сайте зависит как от форматов картинок, так и от их размеров.

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

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

Картинки формата PNG

PNG (Portable Network Graphics) – изначально разрабатывался как альтернатива расширению GIF. Изначально PNG предназначался для применения в вебе. На сегодняшний день картинки формата PNG не приобрели большой популярности.

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

С помощью вариаций PNG можно легко заменить JPEG и GIF:

PNG 8 – восьмерка обозначает, что при сохранении будет использоваться не больше 256 цветов (по аналогии, как и в GIF). Вообще PNG 8 был разработан, что б заменить картинки формата GIF, но при этом он отличается тем, что не может отображать анимацию ни в каком виде. Можно использовать низкоуровневую прозрачность.
PNG 24 – 24 означает, что используется 24-битная палитра цвета. Данная вариация предназначалась для замены формата JPEG. Как и в формате JPEG, PNG 24 сохраняет яркость и оттенки цветов в фотографиях. Данный формат картинок использует около 16.7 млн. цветов из-за чего пришел на смену полноцветных изображений, как в JPEG. Имеет поддержку многоуровневой прозрачности, что позволяет сделать плавный переход от прозрачной области к цветной.
PNG 32 – похож на вариацию 24, но отличается тем, что можно указать изменение степени прозрачности, а это дает хорошо видимое изображение на любых веб страницах с любым фоном.

Если брать во внимание нагрузку на веб страницу, то размер PNG 8 практически в два раза меньше чем размер PNG 24, но это не удивительно, ведь они предназначались для замены форматов GIF и JPEG (качество соответствует размеру).

Картинки формата GIF

GIF (Graphics Interchange Format) – это первый исторический формат, используемый в Интернете. Даже на сегодняшний день это расширение имеет большую популярность. Картинки формата GIF имеют маленький размер, поэтому нагрузка на сервер минимальная. Особенность GIF – это наличие анимации.

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

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

Картинки формата JPEG

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

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

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

Источник: http://scriptcoding.ru/2014/09/23/formaty-kartinok-png-gif-jpeg/

Использование JPEG и PNG для веба

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

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

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

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

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

Конечно же, есть, например, MathML для математических формул, SVG для векторной графики. Но поддержка всего этого в современных браузерах ещё весьма далека от идеальной. Особенно это справедливо для самого “продвинутого” в мире браузера от Microsoft, который даже несчастный формат PNG научился только к седьмой версии нормально отображать. Так что без картинок сейчас никак не обойтись.

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

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

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

И на основании практических результатов определим, в каких случаях хорош PNG, а в каких – JPEG. Для этого я подготовил в GIMP соответствующие примеры каждого типа размером 640х480 в формате BMP, а потом конвертировал их в PNG и JPEG1.

Сжатие PNG – 9, а JPEG – 70%.

А что же GIF? Это старый формат с индексацией всего 256 цветов. Он эдакий древний предшественник PNG.

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

Фотография

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

Логично рассуждать, что использование PNG с его бережным отношением к мелким элементам будет в данном случае неэффективным. Так оно и есть. Картинка фотографического типа в этом формате потянула 550 килобайт, а в формате JPEG с компрессией всего 70% – 57 килобайт. Разница в десять раз, при не очень ощутимых потерях в качестве.

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

Рисунок

Рисунок – это полная противоположность фотографии. Здесь бывает мало полутоновых переходов, здесь большие пространства однородных цветов. То есть всё то, что так хорошо ужмётся форматом PNG. К рисункам следует относить графики, диаграммы, блок-схемы.

Практика подтверждает теорию. В формате PNG рисунок имеет размер четыре килобайта, а в JPEG при стандартных 70% сжатия – восемь с половиной. Причём рисунки имеют обычно резкие границы, которые JPEG-формат сильно портит артефактами.

Так что, когда публикуем рисунки, то лучший выбор здесь как раз PNG.

Чертёж

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

На практике JPEG потянул двадцать шесть кило, а PNG – сорок три. Но всё-таки склоняюсь к мнению, что в данном случае качество имеет больший приоритет, так как чертёж должен быть как можно более аккуратненьким.

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

Символьные картинки

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

В нашем случае данную партитуру PNG ужал в четырнадцать килобайт, а JPEG – в двадцать шесть.

Источник: https://www.kv.by/archive/index2008090601.htm

Как выбрать подходящий для web формат изображения

12.08.2016 10:40

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

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

JPEG

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

Сначала изображение из цветового пространства RGB (от английских “red” – «красный», “green” – «зеленый» и “blue” – «синий») преобразуется в пространство YUV, которое основано на характеристиках яркости и цветности; это пространство наиболее близко к тому, как воспринимает цвета человек.

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

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

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

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

GIF

На заре зарождения интернета, если изображение не было формата JPEG, значит, оно было формата GIF. GIF использует для сжатия алгоритм LZW (Lempel-Ziv-Welch – алгоритм Лемпеля — Зива — Велча), который намного проще, чем технология сжатия JPEG.

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

Именно такие изображения удастся сжать при помощи GIF наиболее эффективно и без потерь.

Несмотря на то, что GIF достаточно простой формат, у него есть пара интересных характеристик – это прозрачность и анимация.

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

Пример изображений в формате GIF:

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

PNG

Разработка PNG началась в 1995 году, и уже через год его можно было использовать в качестве полноправного сетевого формата.

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

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

Увидеть, как хорошо PNG сжимает разноцветное полупрозрачное изображение, можно ниже:

Так почему PNG лучше сжимает изображения, чем GIF? Это происходит благодаря новым алгоритмам сжатия.

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

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

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

Форматы следующего поколения

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

WEBP

Источник: https://timeweb.com/ru/community/articles/kak-vybrat-podhodyashchiy-dlya-web-format-izobrazheniya-1