Станислав Васильев (q3d) wrote,
Станислав Васильев
q3d

Categories:

Как вставить в пост фотографии для retina-экранов

На прошлой неделе мы сидели в Долькабаре и обсуждали с sergeydolya и kershperm, какого размера фотографии и с каким качеством стоит выкладывать в блог. Скажем, Сергей выкладывает у себя картинки 1000 пикселей по длинной стороне, сжимая их на 60%, многие другие блогеры используют 900 пикселей и даже 700, а сжатие может быть послабее. Не далее как сегодн dima_chatrov выложил пост, где фотографии по длинной стороне имели целых 1300 точек. Единого стандарта на размер, конечно же, не существует, и никто не заставляет нас использовать конкретную цифру. Но какую же использовать? Уверен, пора потихоньку задумываться о будущем, о том как наши посты будут выглядеть через несколько лет, на экранах будущего.

С 2012 года началось одно важное изменение - экраны очень высокого разрешения пришли в массовые планшеты и стали появляться в доступных ноутбуках. Сначала новые iPad стали оснащать матрицами, имеющими разрешение 2048x1536 пикселей, затем появились MacBook Pro с дисплеями 2560x1600, за ними PC-шные ноутбуки всё больше потянулись к экранам, где в 11 дюймов диагонали умещается 1920 точек по ширине. В продажу выбросили дешёвые Android-планшеты с экранами, как у iPad, смартфоны с разрешением 1920x1080 пикседей. Не за горами и дисплеи 4К, которые будут показывать 8 мегапикселей всей своей поверхностью. Где мы окажемся, в итоге? В 8К, конечно, когда на экране будет 33 мегапикселя и подход и к отрисовке интерфейсов, и к дизайну сайтов, и к созданию программ, будет уже, к тому времени, совсем другой.

Но, ещё мы окажемся там, где уже были - мы же проходили апгрейд разрешения в недалёком ещё прошлом и должны помнить итоги. Когда-то в интернет выкладывались очень маленькие фотографии (200-300 пикселей по длинной стороне). Они были такими из-за модемного интернета, из-за дизайна сайтов, рассчитанного на 800x600 и по другим причинам. Сейчас те картинки, в тех статьях, выглядят как почтовые марки, и увеличивая их на весь экран, мы получаем мазню без деталей. Разрешение дисплеев и средняя скорость интернета во много раз выросла, "гуляй-не хочу", пости картинки 2048 точек шириной? Не всё так просто.

Как вставить в блог фото высокого разрешения

Есть один момент, принципиально отличающийся от прошлой эволюции - мы подошли к пределу человеческого зрения. Увеличение разрешения будет происходить и дальше, но это будет позволять видеть не больше текста на квадратный сантиметр, а более чёткий шрифт, приблизит сайты к бумаге по микродетализации. Размер шрифта тоже имеет ограничения - если раньше можно было создавать сайты с резиновой вёрсткой, где ширина полосы определялась шириной экрана, то в нынешние времена доступных 24-30 дюймовых мониторов это уже непрофессионально, ведь читать текст с такой ширины поверхности неудобно. Нельзя делать вёрстку слишком широкой и из-за планшетов - то что вы прекрасно сможете читать на большом мониторе, на 7-дюймовом планшете, какое бы высокое разрешение он не имел, будет слишком мелким, а читать крутя страницу влево-вправо неудобно. В отличие от прошлых лет, мы стали много чаще пользоваться масштабированием - если текст кажется мелким, уже стало рефлексом растащить его пальцами на экране планшета или смартфона, как и использовать зум в браузере. И вот тут закопана мина замедленного действия - если текст кажется мелким, и хочется его укрупнить, при масштабировании расползаются и картинки. Они не просто увеличиваются, а не имея источника дополнительных деталей, становятся размытыми, за счёт тупого алгоритма интерполяции. Насколько я вижу, в Chrome уже встроен движок, проводящий более умное масштабирование, но если при нормальном размере текста картинка, имеющая в базе 1300 пикселей по длинной стороне, расползётся до 2600 точек, и не поместится на весь экран, пост читать будет удобно ли?

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

Способ сделать так есть уже сегодня, но он не очень удобный, и ввиду трафика я убрал примеры под кат. Ниже вы найдёте десять фотографий, которые на экране обычного разрешения будут выглядеть практически как обычные 900-пиксельные картинки, но на retina-экране, когда вы смасштабируете текст чтобы он стал крупнее, должны появиться новые детали. Читатели моего блога с новыми iPad должны сразу увидеть повышенную детализацию фото. Давайте проверим?

Часть первая, примеры (под катом 3.5 Мбайт трафика!)

Как постить в блог фото высокого разрешения: примеры снимковCollapse )

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

Как постить в блог фото высокого разрешения: подготовка, заливка, кодCollapse )

Мне очень интересно, что вы об этом думаете, и как у вас выглядят картинки. Особенно у тех, чьи мониторы и экраны ноутбуков перешагнули за 2К, или у кого смартфоны оснащены дисплеями повышенной плотности, скажем, те же FullHD. А сравнивать можно с первой картинкой - она обычного разрешения.
Tags: livejournal, photoshop, ликбез, обработка, фото, фотография
Subscribe

promo q3d june 12, 2014 11:01 41
Buy for 300 tokens
Окончательно понял, что зачем нужна выдержка, диафрагма и ISO нужно написать как можно понятнее, простыми словами. Слишком много идёт вопросов от учеников и читателей, проще давать ссылкой. Выдержка Итак, выдержка. Это время, за которое свет падает на матрицу. Измеряется в секундах и долях…
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 61 comments
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →
Previous
← Ctrl ← Alt
Next
Ctrl → Alt →