2007 год. При заходе на веб-сайт приходится смотреть в экран и ждать, пока изображение загрузится целиком. Уткнулся носом в монитор и смотришь на то, как страница скачивается, отрисовываясь полосками сверху вниз. Качество хорошее, только вот ждать долго. Но есть вера в то, что лет через 10 интернет станет быстрее, а мониторы будут две, а то и четыре тысячи пикселей в ширину, обеспечивая максимальное удовольствие от серфинга в сети.
2020 год. В мессенджерах пользователи пересылают друг другу картинки с фейками про коронавирус и разные мемасы, люто пожатые от частых перезаливов. В инстаграме куча аккаунтов публикуют фото других людей, скачивая их из все той же инсты и загружая по новой. В эпоху 4K и безлимитного интернета мы живем в более зашакаленном мире, чем раньше. Или нет?)Зашакаленный мир? Какие такие шакалы?
Дорогой читатель, если ты нашел этот пост, то наверняка разбираешься в технологиях и прекрасно знаком с "шакалами". Этот раздел можно смело пропустить. Или все же прочитать, если скучал по моей искрометной полуигривой полунаучной полуюморной подаче :)
Начнем издалека – изображения могут быть векторными или растровыми.
- Векторные представляют собой набор различных фигур с описанием свойств каждой. Размер, цвет, наклон и еще куча параметров. Такие картинки можно бесконечно много уменьшать и увеличивать – они не теряют в качестве. Поэтому бОльшая часть рекламной продукции отрисована и в векторе.
- Растровые состоят из своеобразного полотна фиксированного размера, заполненного точками разных цветов, которые принято звать пикселями. Например, обои рабочего стола Full HD монитора имеют размер 1080 на 1920 пикселей, то есть содержат в себе 1080x1920=2073600 точек, иначе говоря, 2 мегапикселя.
Про векторные забудем сразу. Они круты, но особую популярность обрели в дизайне. А вот растровые интереснее, ибо в повседневной жизни нас окружают именно они. В свою очередь растровые можно хранить как без потерь, так и с потерями.
- Без потерь – тут все ясно из названия. Плюсы – нет потери информации и качества. Минусы – занимает много места и часто хранит те детали, которые не особо то и нужны. Условно говоря, когда качество картинки изначально невысоко, то и хранить все мельчайшие детали не имеет смысла. Пример – скан пожелтевшего документа. Нужно ли нам видеть все полутона желтизны на фоне? Думаю нет. А вот скан отпечатков пальцев лучше сохранить без потерь. Самый распространенный формат – PNG.
- С потерями – тоже все ясно из названия. Некоторые детали будут безвозвратно утеряны. Это может быть плохо в теории, но на практике современные алгоритмы сжатия весьма хороши, и даже снимки из фотоаппаратов имеют отличное качество. Шерсть условной белки будет реалистичной и детальной, а и без того темная тень потеряет часть полутонов, которые и не различить без сильного увеличения и хорошо откалиброванного качественного монитора. Популярнейший формат – JPG.
В общем случае потери не всегда плохи. Особенно если они заключаются только в полутонах или некотором легком размытии участков кадра. Но беда наступает тогда, когда уже сжатую картинку сжимают заново.
В какой-то момент изображение уже можно будет классифицировать по известной шкале:
Да, именно этими милыми шакальчиками из советского мультфильма «Маугли» и принято оценивать потери при сжатии (зашакаленность).
«А мы пойдем на север, а мы пойдем на север!» – кричал наш герой в мультике. А мы, дорогой читатель, закончили с введением и пойдем смотреть сам эксперимент.
Исходные данные
Для теста изготовлено изображение размером 1080 на 1080 из следующих элементов:
- Конусовидный градиент, залитый шаблоном «спектр»
- Блик
- Шакал (обводка 3 пикселя черного цвета, 75% непрозрачности)
- Лого VLSU с непрозрачностью 60%
- Таблица для проверки зрения с непрозрачностью 80% (обводка 1 пиксель белого цвета, 85% непрозрачности)
Размер в 1080х1080 был выбран специально для того, чтобы избежать потерь при масштабировании – инстаграм сжимает квадратные фото именно до таких параметров.
Анализ «зашакаливания» – штука весьма субъективная, поэтому сразу оставлю ссылки на страницы, в которые производилась загрузка. Каждый может открыть любое фото оттуда и оценить его собственноручно.
 |
@compression_demo |
 |
@compression_demo |
Для первой публикации в инстаграм загружена оригинальная картинка в PNG, а в настройках приложения выставлена галочка «сохранять опубликованные фото». Таким образом после каждого поста инста сохранит только что опубликованное изображение, которое и станет исходником для следующей записи.
А на странице ВКонтакте был создан альбомом «СЖАТИЕ». Загрузка изображений в него производилась по аналогичному принципу, но с ручным скачиванием предыдущей публикации для повторного выкладывания.
Первое фото
Первая публикация на глаз примерно одинакова везде и не имеет критических отличий. Все элементы видны хорошо, в том числе последняя строка в таблице. При увеличении можно заметить бОльшее количество артефактов в инстаграм, но при просмотре на экране смартфона это почти не заметно. А вот с технической точки зрения интересен вес изображений в килобайтах. Он такой:
- Инстаграм – 76,8 КБ
- ВКонтакте – 223 КБ
Отличие в 3 раза. Попробовал экспортировать исходное фото с разными настройками качества, чтобы понять, какой ступени соответствует каждая соцсеть. Размер инсты примерно подходит качеству 2/12, вк – 10/12.
НО! Есть важное "но". При экспорте на таком низком качестве (2 или 3) градиент также страдает, чего не наблюдается в первой публикации из инстаграм. Поэтому сравнение с качеством из фотошопа весьма условно и не совпадает напрямую. Промежуточный вывод: выходной файл из инстаграм занимает гораздо меньше места, при этом теряя детали и добавляя артефакты, не особо различимые с мобильного устройства. ВКонтакте же не так сильно заботится об экономии места.
Размер публикаций
Если уж зашел разговор о размере файлов, то сразу посмотрим вес каждого фото. И тут нас ждет сюрприз.
| № фото | ВКонтакте | |
| 1 | 77 КБ | 223 КБ |
| 2 | 77 КБ | 224 КБ |
| 3 | 78 КБ | 207 КБ |
| 4 | 78 КБ | 224 КБ |
| 5 | 78 КБ | 224 КБ |
| 6 | 78 КБ | 224 КБ |
| 7 | 78 КБ | 206 КБ |
| 8 | 79 КБ | 206 КБ |
| 9 | 78 КБ | 223 КБ |
| 10 | 78 КБ | 223 КБ |
| 11 | 78 КБ | 206 КБ |
| 12 | 78 КБ | 223 КБ |
| 13 | 78 КБ | 223 КБ |
| 14 | 78 КБ | 223 КБ |
| 15 | 79 КБ | 223 КБ |
| 16 | 79 КБ | 223 КБ |
| 17 | 79 КБ | 223 КБ |
| 18 | 80 КБ | 223 КБ |
| 19 | 80 КБ | 223 КБ |
| 20 | 81 КБ | 223 КБ |
| 21 | 81 КБ | 223 КБ |
| 22 | 82 КБ | 223 КБ |
| 23 | 82 КБ | 223 КБ |
| 24 | 83 КБ | 223 КБ |
| 25 | 83 КБ | 223 КБ |
| 26 | 83 КБ | 223 КБ |
| 27 | 84 КБ | 223 КБ |
| 28 | 84 КБ | 223 КБ |
| 29 | 84 КБ | 223 КБ |
| 30 | 85 КБ | 223 КБ |
| 31 | 85 КБ | 223 КБ |
| 32 | 85 КБ | 223 КБ |
| 33 | 86 КБ | 205 КБ |
| 34 | 86 КБ | 223 КБ |
| 35 | 86 КБ | 223 КБ |
| 36 | 87 КБ | 223 КБ |
| 37 | 87 КБ | 223 КБ |
| 38 | 87 КБ | 223 КБ |
| 39 | 88 КБ | 223 КБ |
| 40 | 88 КБ | 223 КБ |
| 41 | 89 КБ | 223 КБ |
| 42 | 89 КБ | 223 КБ |
| 43 | 90 КБ | 223 КБ |
| 44 | 90 КБ | 223 КБ |
| 45 | 91 КБ | 223 КБ |
| 46 | 91 КБ | 205 КБ |
| 47 | 92 КБ | 223 КБ |
| 48 | 92 КБ | 205 КБ |
| 49 | 93 КБ | 205 КБ |
| 50 | 94 КБ | 205 КБ |
| 51 | 94 КБ | 223 КБ |
| 52 | 95 КБ | 223 КБ |
| 53 | 95 КБ | 223 КБ |
| 54 | 96 КБ | 223 КБ |
| 55 | 97 КБ | 223 КБ |
| 56 | 97 КБ | 223 КБ |
| 57 | 98 КБ | 205 КБ |
| 58 | 98 КБ | 223 КБ |
| 59 | 99 КБ | 223 КБ |
| 60 | 100 КБ | 223 КБ |
| 61 | 100 КБ | 223 КБ |
| 62 | 101 КБ | 223 КБ |
| 63 | 102 КБ | 223 КБ |
| 64 | 102 КБ | 223 КБ |
| 65 | 103 КБ | 223 КБ |
| 66 | 103 КБ | 223 КБ |
| 67 | 104 КБ | 223 КБ |
| 68 | 104 КБ | 223 КБ |
| 69 | 105 КБ | 223 КБ |
ВКонтакте держит размер примерно на одном уровне. А вот инстаграм своим сжатием добавил 28 КБ, что равно почти 40 процентам от веса первой публикации. Здорово, правда?)
Качество после 69 итераций
Не вижу смысла производить покадровый разбор того, что насжимал инстаграм. Вместо этого посмотрите на гифку, в которой все 69 кадров. Она наилучшим образом покажет то, почему вес увеличился на 40 процентов.
Спойлер:
Безобидная обводка стала расползаться по всему кадру, а детали в буквах, шакале и логотипе оказались утеряны. Но и градиент, и центр блика остались почти в неизменном виде. Промежуточный вывод: при сжатии сильнее всего страдают мелкие детали, в то время как равномерно залитые области остаются практически нетронутыми.
А вот с ВКонтакте ситуация совсем другая. Сперва посмотрим на гифку и несколько кадров.
Спойлер:
Обводка вокруг букв тоже расползлась, но сделала это "нежнее". Последний ряд букв очень долго оставался читабельным. Деформацию обводки вокруг шакала и лого также не назвать критичной. Сильнее ощущается потеря цвета в шакале и некоторая "рябь" внутри градиента при смене кадров. Но имеет ли смысл говорить о потере цвета в глазах шакала тогда, когда в инстаграме мы потеряли не только цвет, а всего шакала целиком?)
Вместо заключения
Оригинал и покадровое пожатие из соцсетей залил в свой дропбокс, все материалы доступны по ссылке. Все фото можно сравнивать и выявлять отличия на каждом этапе, обращая внимание на те детали, которые интересуют сильнее всего. Я это все здесь расписывать и показывать уже не буду. Во-первых, при склейке пожатые изображения дополнительно пожмутся, да и блог-платформа еще поспособствует этому, из-за чего пострадает достоверность. Во-вторых, целью был не кропотливый разбор каждого пикселя, а выявление закономерностей. А они следующие:
- Инстаграм жмет фото в разы сильнее, чем ВКонтакте
- Первые 5 перезаливов в обеих соцсетях дают приемлемое качество. Его потеря уже заметна, но находится на ожидаемом уровне
- Потери наиболее заметны в деталях. Плавно залитые области максимально долго сохраняют свой внешний вид и меньше страдают от каждой итерации
- Множественные перезаливы в инстаграм крайне противопоказаны. По возможности лучше вообще их избегать и бояться, как огня
- Множественные перезаливы в вк допустимы. Да, качество страдает. Да, цвета теряются. Да, изображение хуже оригинала. Но фото остается "смотрибельным", особенно если речь идет о мобильном устройстве и расстоянии в метр до глаз
Контент-менеджеры, ведущие аккаунты в инстаграм и ворующие чужие фото оттуда же – задумайтесь. В реалиях сжатия инсты гораздо лучше связаться с первоисточником и запросить у него оригинал фото.
Контент-менеджеры, ведущие аккаунты в вк и ворующие чужие фото оттуда же – не переживайте. Даже если вы десятые в цепочке перезаливальщиков, критичной потери качества не заметите.
Спасибо, блин. Теперь к каждой своей фотке буду присматриваться))
ОтветитьУдалить