Как вставить в пост фотографии для retina-экранов
На прошлой неделе мы сидели в Долькабаре и обсуждали с sergeydolya и anynoff, какого размера фотографии и с каким качеством стоит выкладывать в блог. Скажем, Сергей выкладывает у себя картинки 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 Мбайт трафика!)
Вторая часть: после того, как вы посмотрели картинки и увидели (или не увидели) разницу, давайте расскажу как я это делал. Обратите внимание, что картинки занимают на экране относительно немного места, и можно спокойно пользоваться хоть щипковым масштабированием на планшете, хоть зумом в обычном браузере, чтобы текст стал крупнее и появились детали, но сами фото при этом не уедут за экран.
Всё просто. Изначально картинки подготовлены под ширину 1800 пикселей. Самая большая имеет объём 583 килобайта, самая маленькая 220. Все они упакованы в JPEG с довольно сильной степенью сжатия - 55% в Photoshop-овском помощнике Save for Web. Обычно для постов я сохраняю фото с качеством 60-80 процентов, хотя практика показывает, что отличие между этими крайними положениями едва заметно (на сложных градиентах, чистых оттенках и очень мелких деталях). Мы с друзьями в Дольке ещё и ещё раз проверяли это эмпирически на ряде сложных фотографий Сергея.
Далее я залил их в пост. Не через Picasa, а через штатный движок Livejournal. Так проще выдернуть их в размере 1:1 в пост. Вставив их все в оригинальном разрешении я перешёл в HTML-редактор и увидел, что у каждого тега![]()
прописаны параметры 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. А сравнивать можно с первой картинкой - она обычного разрешения.
С 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 Мбайт трафика!)
Вторая часть: после того, как вы посмотрели картинки и увидели (или не увидели) разницу, давайте расскажу как я это делал. Обратите внимание, что картинки занимают на экране относительно немного места, и можно спокойно пользоваться хоть щипковым масштабированием на планшете, хоть зумом в обычном браузере, чтобы текст стал крупнее и появились детали, но сами фото при этом не уедут за экран.
Всё просто. Изначально картинки подготовлены под ширину 1800 пикселей. Самая большая имеет объём 583 килобайта, самая маленькая 220. Все они упакованы в JPEG с довольно сильной степенью сжатия - 55% в Photoshop-овском помощнике Save for Web. Обычно для постов я сохраняю фото с качеством 60-80 процентов, хотя практика показывает, что отличие между этими крайними положениями едва заметно (на сложных градиентах, чистых оттенках и очень мелких деталях). Мы с друзьями в Дольке ещё и ещё раз проверяли это эмпирически на ряде сложных фотографий Сергея.
Далее я залил их в пост. Не через Picasa, а через штатный движок Livejournal. Так проще выдернуть их в размере 1:1 в пост. Вставив их все в оригинальном разрешении я перешёл в HTML-редактор и увидел, что у каждого тега
прописаны параметры 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. А сравнивать можно с первой картинкой - она обычного разрешения.