Размер файлов для публикации в интернете. 7 лет спустя
В каком размере лучше сохранять фотографии под web? Последний раз я писал об этом в 2008 году, то есть аж 7 лет назад. Давайте посмотрим, что изменилось за это время.
Что изменилось за 7 лет
1. Максимальное разрешение экранов несколько выросло. По статистике (например, W3Counter или OpenStat) лидирующие позиции имеют ширину экрана от 1024 до 1920 px. При этом экран 1920 пикселей использует всего около 20% пользователей, а более чем у половины оно меньше 1024.
2. Существенно выросла доля мобильных девайсов - телефонов и планшетов. За счет этого, собственно, средне-пользовательское разрешение экранов не выросло, а упало.
3. Появилась Retina - экран с разрешеним больше, чем разрешающая способность человеческого глаза.
4. Интернет стал быстрее и дешевле. Если 7 лет назад смысла в борьбе за каждый байт трафика было уже мало, то сегодня и подавно.
Какие можно сделать выводы
Принимая во внимание сказанное, а также личные наблюдения, я бы предложил следующие выводы:
1) Принципиальных изменений в размерах браузеров не произошло. Это связано не только с тем, что экраны стали не намного больше. Но и с тем, что на экранах с высоким разрешением пользователи редко раскрывают браузеры на всю ширину. Что касается Retina, то на десктопах производитель настоятельно рекомендует использовать половинчатое разрешение, т.к. родное получается избыточным для интерфейсов. Именно поэтому в статистике сверхвысокие разрешения занимают мизерную долю.
2) Все мобильные устройства, в том числе с экраном Retina ресайзят картинки автоматически под размер браузеров и ширину экрана. Это значит, что для мобильных устройствах нет особого смысла как-то специально ограничивать размер файлов сверху. А вот снизу надо - если мы хотим показать качественную картинку, то размер файлов должен быть немаленьким.
3) Для того, чтобы картинки было комфортно просматривать на десктопах (чтобы они не вылезали за пределы браузеров), имеет смысл делать их примерно такого же размера, как и раньше. То есть порядка 900-1000 px по ширине, или порядка 600-700 по высоте.
Так в каком размере лучше сохранять файлы под web
Как же и рыбку съесть, и на ёлочку залзть? Как сделать так, чтобы на компьютере картинки не выходили за пределы привычных размеров браузеров, но при этом хорошо (с высоким разрешением) смотрелись на ретинах? Каков должен быть размер файлов?
Я предлагаю следующее решение:
x = 1800 px
y = 1200 px
Как видите, 7 лет назад решение состояло из двух строчек, но теперь требуется три. Третья - насильно прописывает тегу IMG ширину, в 2 раза меньшую, чем реальный размер файла. Это очень важный момент: если его не учесть, ваши читатели будут жаловаться на то, что ваши картинки «рвут в клочья» их ленту.
Итак, по сравнению с тем, что было 7 лет назад, я предлагаю увеличить размер файлов для web в два раза. Но уменьшать его в те же самые два раза при публикации средствами HTML. В этом случае будет также удобно как и раньше, при этом на десктопах с обычными экранами разницы не будет, а вот на ретинах картинка будет выглядеть куда качественнее. На мобильных устройствах с ретиной разница также будет заметна, но особенно актуальна станет при увеличении картинки в браузере.
Увидеть разницу вы можете сами:
1. Картинка шириной 900 px.
2. Картинка шириной 1800 px, ужатая до 900 px средствами HTML.
Оба файла отображаются в браузере как бы в размере 900х600 px. Но реальные размеры второго файла в 2 раза больше, чем первого.
На ретине первый выглядит мыльно, второй намного более детализированно. Вот чуть увеличенный скриншот с моей ретины Макбук Про:
Как быть с квадратными и вертикальными кадрами
Для того, чтобы кадры с разным соотношением сторон комфортно смотрелись в браузере, я бы предложил для них следующие размеры. Ниже указано два размера - реальный размер файла, и в квадратных скобках размер, с которым я предлагаю его отображать в браузере с помощью тега IMG.
3:2 (горизонтальный) - 1800 x 1200 [900 х 600]
3:2 (вертикальный) - 1000 x 1500 [500 х 750]
4:3 (горизонтальный) - 1800 x 1350 [900 х 675]
4:3 (вертикальный) - 1050 x 1400 [525 х 700]
1:1 (квадрат) - 1200 x 1200 [600 х 600]
P.S. Надо принимать во внимание, что фотосайты и фотохостинги, как правило, предлагают HTML-код для шаринга картинок в других соцсетях, который содержит указание на реальную ширину (или без указания ширины вовсе). Поэтому прописывать (изменять/добавлять) ширину для каждого тега IMG необходимо вручную при подготовке публикации.