Станислав Васильев (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 Мбайт трафика!)



retina_post_1800px_01


retina_post_1800px_02


retina_post_1800px_03


retina_post_1800px_04


retina_post_1800px_05


retina_post_1800px_06


retina_post_1800px_07


retina_post_1800px_08


retina_post_1800px_09




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

Всё просто. Изначально картинки подготовлены под ширину 1800 пикселей. Самая большая имеет объём 583 килобайта, самая маленькая 220. Все они упакованы в JPEG с довольно сильной степенью сжатия - 55% в Photoshop-овском помощнике Save for Web. Обычно для постов я сохраняю фото с качеством 60-80 процентов, хотя практика показывает, что отличие между этими крайними положениями едва заметно (на сложных градиентах, чистых оттенках и очень мелких деталях). Мы с друзьями в Дольке ещё и ещё раз проверяли это эмпирически на ряде сложных фотографий Сергея.

Далее я залил их в пост. Не через Picasa, а через штатный движок Livejournal. Так проще выдернуть их в размере 1:1 в пост. Вставив их все в оригинальном разрешении я перешёл в HTML-редактор и увидел, что у каждого тега <img> прописаны параметры width и height, задающие ширину и высоту картинки. Ну и затем я сделал одну не очень хорошую, но принципиальную вещь - изменил эти цифры на вдвое меньшие. Так картинка шириной 1800x1200 превратилась в 900x600 точек. При этом браузер, будь то Chrome на PC или Safari на iPad/MacBook грузит фото в полном разрешении и выводит его в тех размерах, что я прошу. Но (!) если при этом используется масштабирование, и вы смотрите на укрупнённый текст, или же ваше устройство (как iPad) изначально показывает мои 900-пиксельные фото на экране укрупняя их (до 1300 точек, например), масштабирование делается уже из источника более высокого разрешения, а картинка на выходе оказывается более качественной. Те же, кто смотрит этот текст с 200% зумом (как делаю я, когда читаю свой блог с 30-дюймового монитора), видят и вовсе, вместо 900-пиксельных ужатых картинок полноразмерные 1800 точек.

Минусы? Трафик, конечно. Специально сравнил - при моих стандартных условиях сжатия фотографий для блога, фото занимали бы 1.1 мегабайта, а так, получилось 3.32 мегабайта - не слишком много, по нынешним меркам, для поста с десятью снимками. Скажем, если бы вы использовали JPEG без сжатия, пост и при 900px грузился бы дольше. Сколько будет весить ваш пост? Можете сравнить сами - сохраните в две разные папки одни и те же фото на 900 пикселей при сжатии 70 процентов и на 1800 пикселей при 55%. Разница и будет тот трафик, что потребуется вашим читателям для прогрузки поста. А дальше можно думать, постить ли картинки на будущее, или пока потерпит.

Мне очень интересно, что вы об этом думаете, и как у вас выглядят картинки. Особенно у тех, чьи мониторы и экраны ноутбуков перешагнули за 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 →