Показать Меню
falbar Основы HTML

Урок 12. Форматы изображений и работа с ними в HTML

Основы HTML

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

Рассматривать форматы мы начнём с gif(Graphics Interchange Format). Он является практически самым старым из трех выше перечисленных, который появился для обмена изображениями. Gif может включать в себя 256 цветов, основными возможностями данного формата являются:

1. Мультипликация;

Мультипликация

2. Прозрачная графика;

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

Gif прозрачная графика

3. Чересстрочная развёртка.

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

Gif чересстрочная развёртка

Следующий формат это jpg(Joint Photographic Group) был создан для полноценных картинок, который работает с матрицей 8x8 пикселей. Эта матрица подразумевает под собой разбитие всего изображения на куски 8x8. Алгоритм сжатия данного формата создан так, что он постоянно искажает исходное изображение. Поэтому если пересохранить картинку несколько раз, то в результате можно будет увидеть явные отличия от исходника. Вывод из этого один: сохранять в jpg нужно только очень хорошие исходники. Во многих редакторах при сохранении в jpg формат есть поле изменяющие качество изображения это фактически, и является коэффициентом сжатия.

Картинка в формате jpg

Png(Portable network graphics) формат на сегодняшний день является самым популярным из всех. Способствовало этому его удобство использования и открытость для всех. В себя он включает несколько разновидностей: png8, png24, png32. Цифра, стоящая возле формата означает битность цвета.

Картинка в формате png

  • Png8 - говорит нам, что используется те же 256 цветов (индексированная палитра);
  • Png24 – глубина цвета 24 бита говорит нам о том, что на каждый пиксель используется по 8 бит для описания цвета (поэтому цвет будет передаваться таким, какой он есть), но при этом конечно мы потеряем в размере картинки;
  • Png32 – тоже самое, что и png24 плюс наличие альфа-канала(каждый канал дополнительно дает ещё 8 бит). Эта возможность позволяет указывать цвет без мате, но у каждого браузера работает по своему.

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

Подписаться на обновления

Комментариев еще не оставлено