Payday loans

Чудеса Retina — файлы меньше, качество лучше

6 Ноя

Модная сейчас тема — оптимизация контента под retina (и прочие high-DPI) экраны. На сайтах, в мобильных приложениях, в рассылках — повсеместно. Делать это довольно тяжко и нудно, что уже само по себе немало. Еще один довод против «ретины» — размер файлов и возрастающий трафик. Или сокращающийся?

Retina jpeg

Слева фото девицы в масштабе 1:1 (оригинал), то есть пиксель в пиксель, с качеством JPEG 80%.

Справа — учетверенная (ее не уменьшали) под высокое разрешение картинка, сжатая до тех же размеров средствами браузера. Качество JPEG 41%, размер файла те же 18Кб.

Другие примеры и размеры есть в исходной статье (en).

Вывод делают простой — объем файла такой же (или даже меньше), а деталей на фотографии больше. Не думаю, что это сфабриковано, но и объяснить толком не могу. То есть на ретина-экране могу, в принципе, а вот на ноутбуке никак. Получается, что браузер сжимает изображение лучше, чем использованный автором графический редактор?

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

Неуловимо похожие записи:

  • Фдуч

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

    • tagmac

      Я про масштаб, а не про изменение качества. Я вижу на экране 100×100, хотя на самом деле файл 200×200 и выглядит это лучше, чем 100×100, ресайзнутые из 200×200 в графредакторе. При этом второй файл еще и больше первого в Кб. Фактически, в первом случае жмет (масштабирует) браузер/рендерер. Во втором все уже сделано, нужно только вывести.