Качество сжатия картинки

Содержимое статьи:

Уменьшение размера картинки

Исходные данные

Исходное ихображение: вес - 1754Кб (1,75Мб), размеры: 2560*1600 - изображение слева;

Обрезанное изображение: вес - 454Кб (0,45Мб), размеры: 1280*800 - изображение справа, сжатие - без потерть (100% от оригинала);

Сравнение

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

Картинка (оригинал) 2560*1600 - 1754 Кб
Картинка (сжатый размер) - 1280*800 - 454 Кб

Вывод

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


Уменьшение веса картинки за счет алгоритма сжатия

Исходные данные

Исходное ихображение: вес - 454Кб (0,45Мб), размеры: размеры: 1280*800 - изображение справа, сжатие - без потерть (100% от оригинала);

Обрезанное изображение: вес - 114Кб (0,11Мб), размеры: 1280*800 - изображение справа, сжатие - 80% от оригинала;

Сравнение

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

Картинка (оригинал) 1280*800 - 454 Кб (100%)
Картинка (сжатие качества) - 1280*800 - 114 Кб (80%)

Вывод

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

Почему это важно

Коротко о структуре сайта

Место в облаке

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

Трафик интернета

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

Время загрузки

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

Подведем итоги

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