Главная > Статьи > Сжатие веб-графики - основные методы и сценарии сжатия

Сжатие веб-графики - основные методы и сценарии сжатия

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

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

При этом существует несколько способов уменьшения объема графических элементов. Ниже перечислим их.

1. Использование фрагмента картинки. В этом случае при помощи CSS мы будем задавать определенный размер изображения и его позицию относительно данной размерной рамки. То есть пользователь будет видеть лишь самое необходимое. Второй способ – это обычное вырезание отдельного фрагмента из целого изображения.
2. Изменение формата картинки и изменение ее качества. В этом случае меньший объем достигается путем конвертации больших и тяжелых файлов в более простой формат JPEG. В результате несколько ухудшается качество, но и уменьшается объем в килобайтах.
3. Уменьшение разрешения картинки. Если у вас имеется большое изображение, которое даже физически не влезает на страницы сайта, то целесообразно будет уменьшить его разрешение. При этом должны учитываться пропорции картинки.
4. Использование такой функции, как предпросмотр. Существуют специальные плагины для популярных CMS, благодаря которым, из всех изображений, размещающихся на странице, будут изготовлены миниатюрные копии. В результате страница будет загружаться намного быстрее, а пользователь сам решит, стоит ли ему смотреть картинку в полном размере.

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

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

Просмотров: 4045

Комментарии

Написать комментарий