February 12th, 2013

Аватарка 2009

Как вставить в пост фотографии для 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. А сравнивать можно с первой картинкой - она обычного разрешения.
promo q3d june 12, 2014 11:01 41
Buy for 300 tokens
Окончательно понял, что зачем нужна выдержка, диафрагма и ISO нужно написать как можно понятнее, простыми словами. Слишком много идёт вопросов от учеников и читателей, проще давать ссылкой. Выдержка Итак, выдержка. Это время, за которое свет падает на матрицу. Измеряется в секундах и долях…
Аватарка 2009

retina-пост #2: на примере пейзажей sergeydolya

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

retina_post_1800px_teaser2

Пейзажи совсем другая история - в них, часто, изюминка в мелочах, в текстуре песка, в мелких снежинках, в ёлках на заднем плане, в незаметных с первого взгляда мелочах. Я попросил разрешения у моего друга sergeydolya и составил второй экспериментальный пост из его туристических фотографий, публикуемых в постах под тегом "обои".

Как и в прошлый раз, если вы смотрите сайт на обычном устройстве, разницы быть не должно - просто картинки на 900 пикселей по длинной стороне. Но если у вас новый iPad или любой Android-планшет с экраном 1920-2048 точек по ширине, смартфон с разрешением от 1280 пикселей или современный огромный монитор 2560x1600, типа Apple Cinema Display 27" (и вы серфите сайты с зумом, чтобы они не казались мелкими), то детализация картинок должна быть выше. Как верно отметил в комментариях к прошлому пост alyap, этот способ очень старый. Как это делается, зачем мне эксперимент читайте в посте: "Как вставить в пост фотографии для retina-экранов"

Под катом 14 фотографий, суммарным объёмом 5,83 Мбайт - немного, по нынешним меркам.
Collapse )

Зачем всё это? Мне интересно продолжить дискуссию в этом посте, узнать как вы смотрите фотографии, видите ли больше деталей, чувствуете ли что это нужно. К этому посту комментарии закрываю, чтобы не плодить две ветки об одном и том же.
Аватарка 2009

Короткометражный фильм по Бредбери

Катя Лунина прислала ссылку на свой короткометражный фильм по рассказу Рэя Бредбери "Будем самими собой". Интересная работа, я воздержусь от чисто технических комментариев, мне показался куда интереснее эмоциональный фон, философия, сама история и её передача.