?

Log in

No account? Create an account

Прошлый пост | Следующий пост

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

Comments

( 62 комментария — Оставить комментарий )
Страница 1 из 2
<<[1] [2] >>
alkrylov
12 фев, 2013 01:21 (UTC)
Спасибо за интересный пост. Думаю, для поста со снимками вес в 3-5 мегабайт вполне уместен. У нас на Дальнем Востоке со скоростями и ценами пока всё еще очень плохо
parfun
12 фев, 2013 01:52 (UTC)
классный пост, но многие вещи из перечисленного я делать не умею.

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

наверное это для профи и гурманов )
q3d
12 фев, 2013 01:58 (UTC)
На айфоне её особо и не видно, если не приближать картинки. А на iPad... думаю, надо подобрать пейзажные снимки, там эффект выражен ярче - чем больше мелких деталей, тем очевидней разница.
(без темы) - q3d - 12 фев, 2013 02:03 (UTC) - Развернуть
(без темы) - parfun - 12 фев, 2013 03:27 (UTC) - Развернуть
misharov
12 фев, 2013 05:53 (UTC)
любопытно, да.
envy_ng
12 фев, 2013 06:53 (UTC)
Всё это хорошо, но тогда надо предупреждать читателей о том, что максимальный размер они увидят при масштабировании или при клике на картинку. А-то многие, я, например, читают текст не масштабируя и в результате такие пользователи будут видеть меньший размер.

Есть ещё личные предпочтения. Я люблю просматривать блоги с фотографиями большого размера, а есть люди которые не приемлют ничего кроме микроскопических превьюшек. Я когда перешел на фотографии с длинной стороной 1200 точек, меня сразу несколько человек расфрендили. Всем не угодишь.
q3d
12 фев, 2013 08:38 (UTC)
Логично. Здесь встаёт вопрос - как читают сайты те, у кого экраны высокого разрешения? 1:1 попиксельно или с зумом?
(без темы) - envy_ng - 12 фев, 2013 08:45 (UTC) - Развернуть
(без темы) - q3d - 12 фев, 2013 09:13 (UTC) - Развернуть
(без темы) - envy_ng - 12 фев, 2013 09:20 (UTC) - Развернуть
edkin
12 фев, 2013 07:08 (UTC)
Иногда во френд-ленте попадаются снимки прямо с фотоаппарата, например 12 Мп. Я сначала ошалел пару раз, а потом прошелся по страницам френдов. Оказывается у них эти фоточки не выходят за пределы текста. Покапался в их CSS и поменял свой:
http://edkin.livejournal.com/368504.html
( Там не все оптимально, с тех пор я еще вносил несколько изменений)

Суть в том, что избыточный по размеру снимок можно вписать в экран или даже блок в пикселях или процентах, привязанных к размеру экрана.
Еще как-то на javascript писал подгрузку разного размера фот в зависимости от разрешения экрана.
Понимаю, что поставленный Вами вопрос шире, потому интересны мнения. Жаль, сейчас от компа ухожу до вечера, не смогу отвечать, если что.
q3d
12 фев, 2013 08:48 (UTC)
Да, тоже с этим сталкивался. Но в полном разрешении это дикий, даже по нынешним быстрым временам, размер файла. По уму, конечно хочется видеть функцию подгрузки картинок в штатном движке, чтобы он отдавал картинку в вёрстку в зависимости от разрешения и масштаба, и возможность увидеть большую картинку по клику.

Ведь если смотреть в увеличенном масштабе или на iPad, где он всегда увеличенный, мы видим чёткие векторные шрифты и размытую графику. А верстать изначально под высокое разрешение не совсем правильно, ведь читают ещё на мелких устройствах.

Поэтому я и оставляю, с одной стороны, дизайн в виде колонки на 700 пикселей - шире текст плохо будет читаться со смартфона или будет мелким на большом экране. А картинкам нужна детализация.
(без темы) - edkin - 12 фев, 2013 13:29 (UTC) - Развернуть
(без темы) - macos - 9 дек, 2013 13:55 (UTC) - Развернуть
dmitry_novak
12 фев, 2013 07:38 (UTC)
Увы, в моей 900-пиксельной ленте все горизонтальные фоты все равно обрезаются справа.
А посты в отд. окнах я раскрываю один из ста :)

А один фиг большинство дизайнов ЖЖ и других блогов ориентированы на стандарт 900 по длинной. И во френдленте более крупное начинает обрезаться, что не есть хорошо.
Я уже этот вопрос пытался решить, но у большинства 900 ширина, остальное режется.

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

Для обоих размеров у меня экшены в шопе, из полноразмера одним нажатием кнопки генерится два документа - 900 и 2048, файлы называю условно 12354s.jpg и 12345m.jpg (small и medium) которые заливаю в альбом ЖЖ и добавляю в пост, там ссылка на крупное ставится удобно и быстро, никаких проблем.

Плюс экономия моб. трафика! Юзер откроет только тетфото, которые сочтет интересными.

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

1800 - считаю все равно мало, это меньше, чем HD-обои, меньше, чем полноэкраннач ретина на iPad. А так я еще себе бонусом получаю и фотке в галерею на айпэд :)


Edited at 2013-02-12 07:40 (UTC)
q3d
12 фев, 2013 09:21 (UTC)
Я также на сайте делаю - похожим скриптом три картинки (превьюшка, в текст и для увеличения на весь экран по клику). А обрезались именно мои фоты под 900 пикселей, или имеется ввиду, что режутся снимки из френдленты, имеющие бОльший размер?

Экономия мобильного трафика это основной вопрос, тут я совершенно согласен. Грузить пост из путешествия на 20 картинок может быть мучительным занятием по 3G. Да и безлимитные сотовые тарифные планы такие "безлимитные".
(без темы) - dmitry_novak - 12 фев, 2013 09:29 (UTC) - Развернуть
(без темы) - q3d - 12 фев, 2013 10:08 (UTC) - Развернуть
стандарт 900 - vit_1 - 18 июн, 2013 15:15 (UTC) - Развернуть
l0st_paradise
12 фев, 2013 07:44 (UTC)
Кстати, в css3 есть решение проблемы трафика, неприменимое для ЖЖ, но для личного сайта - в самый раз. В зависимости от ширины и высоты экрана, юзерагента и некоторых других параметров кормить браузеру разные картинки (предварительно их создав, конечно же), можно мобильникам их вообще не отдавать и т.п.
q3d
12 фев, 2013 08:43 (UTC)
Я так понимаю, это на той же Picasa реализовано, и на других фотовьюверских сайтах, но интересно как это в блоге сделать. Скажем у того же dima_chatrov фото 1300 пикселей в специальных постах - на моём экране они занимают, всё равно, лишь половину дисплея, если смотреть 1:1, или становятся относительно размыленными картинками, если приближать. Встаёт и другой вопрос - многие фотографы не выкладывают фото высокого разрешения, чтобы продавать свои работы, или чтобы их не воровали просто так, ведь чем выше разрешение, тем на более крупных формат их можно забрать и отпечатать.
(без темы) - l0st_paradise - 12 фев, 2013 09:18 (UTC) - Развернуть
(без темы) - q3d - 12 фев, 2013 09:24 (UTC) - Развернуть
alyap
12 фев, 2013 08:53 (UTC)
Станислав, этот способ известен еще с древних версий html, когда источник используется полноразмерный, но отображается в рамках укзанного размера.
Иными словами, в нашем случае файла со стороной 900 пикселей не существует, есть сразу 1800, который просто отображается браузером чуть уменьшенным.
Стоит только добавить что, реальный размер файла и размер, прописываемый в атрибутах, желательно выбирать целой, или даже четной кратности, для того, чтобы алгоритм сжатия не деформировал картинку, например сжимая 1000 пикселей до 830.
q3d
12 фев, 2013 09:16 (UTC)
Да, поэтому я его и использовал, не будучи web-программистом, и совершенно согласен, к тому же способ этот муторный - надо же ещё переписывать размер руками. Я в какой-то момент обратил внимание, что Chrome стал масштабировать картинки лучше и даже шарпить их, причём на медленных компьютерах этот эффект разнесён по времени и визуально заметен.
(без темы) - envy_ng - 12 фев, 2013 09:24 (UTC) - Развернуть
(без темы) - q3d - 12 фев, 2013 10:01 (UTC) - Развернуть
(без темы) - envy_ng - 12 фев, 2013 10:09 (UTC) - Развернуть
(без темы) - q3d - 12 фев, 2013 10:13 (UTC) - Развернуть
(без темы) - envy_ng - 12 фев, 2013 10:32 (UTC) - Развернуть
(без темы) - q3d - 12 фев, 2013 10:50 (UTC) - Развернуть
l0st_paradise
12 фев, 2013 11:53 (UTC)
Кстати, будут вопросы к обратной совместимости фотографий. Посмотрев фоточки в новом посте, наткнулся вот на ЭТО. Полагаю, браузерам стоит запретить зумить картинки выше 100%. Или, по крайней мере, ввести такую настройку.

Edited at 2013-02-12 11:53 (UTC)
q3d
12 фев, 2013 15:02 (UTC)
Артефакты сжатия или что-то еще? Не совсем понял что на том кате изображено ((
(без темы) - l0st_paradise - 12 фев, 2013 16:28 (UTC) - Развернуть
(без темы) - q3d - 12 фев, 2013 22:59 (UTC) - Развернуть
hasisin
12 фев, 2013 12:34 (UTC)
Не очень понял, как Вы это делаете, и планшетника у меня нету, только старенький Аймак. Но скажу, что разница очень и очень заметна. Детализация превосходная.
q3d
12 фев, 2013 16:56 (UTC)
Могу подробнее пояснить )
(без темы) - hasisin - 13 фев, 2013 00:40 (UTC) - Развернуть
ammo1
12 фев, 2013 16:16 (UTC)
Спасибо. С завтрашнего дня перехожу на картинки высокого разрешения. Для себя не вижу никаких проблем и усложнений - я вставляю картинки, пользуясь строкой-шаблонов в html. Добавит туда раз и навсегда один параметр дело десяти секунд.
(без темы) - macos - 16 дек, 2013 23:18 (UTC) - Развернуть
(без темы) - ammo1 - 17 дек, 2013 05:02 (UTC) - Развернуть
(без темы) - q3d - 17 дек, 2013 07:07 (UTC) - Развернуть
(без темы) - macos - 19 дек, 2013 02:59 (UTC) - Развернуть
(без темы) - q3d - 21 дек, 2013 04:56 (UTC) - Развернуть
(без темы) - macos - 19 дек, 2013 02:59 (UTC) - Развернуть
(без темы) - q3d - 21 дек, 2013 04:58 (UTC) - Развернуть
(без темы) - ixtiandra - 11 янв, 2015 19:02 (UTC) - Развернуть
(Удалённый комментарий)
q3d
12 фев, 2013 23:02 (UTC)
ИМХО опция не самая распространенная. На смартфонах ведь так не сделаешь, и на планшетах. В писишных браузерах это тоже есть, помню пользовал, но неявно или, наоборот, принудительно. В итоге, если дать ширину полосы 1800 и под ней текст стандартного кегля, получится какая-то ужасающая верстка, неудобоваримая для чтения, ИМХО.
bystritsky
12 фев, 2013 20:29 (UTC)
Люблю огромный монитор и чтоб подальше от глаз, и чтобы экран пополам поделить и одновременно можно смотреть две разные страницы. Коли есть интересная картинка, то развернуть на весь экран и разглядывать, а текст, в зависимости от вовлечённости: то скроллишь, как чумовой, а то увеличишь и один абзац читаешь пять минут.

Планшета у меня нет, а вот на телефоне книги читать некоторые неудобно, и я тоскую по "ползущим" страницам, когда текст в зависимости от размера равномерно расползался по странице, а не вываливался за пределы экрана.
Помните, ещё такое выражение было "порвать экран"?
Я даже стиль ЖЖ себе выбирал именно из расчета ползущих рамок экрана.
mikhailgolubev
13 фев, 2013 08:15 (UTC)
Кроме блогофотограферов, думается, остальным (нормальным) людям пофиг эти ретины. На нашем веку весь инет был и будет 600-700-800 точек. Давайте из-за горстки умников все резко кинемся ретины покупать. Пусть они сами и мучаются как им смотреть 99% сайтов со своми ретинами :)
q3d
13 фев, 2013 08:28 (UTC)
Ну не знаю, может мой век долог, но я помню интернет с фотками на 100-200 и 200-300 пикселей, а нынче 1000-1300 уже. И всё равно скоро такие экраны будут у всех, просто также, как сейчас большая часть продаваемых мониторов и ТВ FullHD )) В этом и следующем году экраны с высокой плотностью будут во всех планшетах со среднего сегмента
psy_factor
14 фев, 2013 05:38 (UTC)
Посмотрел на примере своих картинок (сделал так же вчера), сначала я конечно вооушевился, что детализация выше и твсе так круто =)
Но если применить хороший алгоритм повышения резкости, то детализация, на самом деле, не сильно разительно отличается. Хотя плюс этого метода есть да, при просмотре на планшетах и зуммировании показывается картинка более выского разрешения.
Но минус тут кроится в том, что в сеть выкладываются файлы высокого разрешения.
Страница 1 из 2
<<[1] [2] >>
( 62 комментария — Оставить комментарий )

Подписаться на этот блог




Новые обзоры в блоге</a>

Обзор AfterShohz Bluez 2 с костной проводимостью

Обзор Plantronics Voyager Legend

Обзор Canon 7D Mark II

Обзор PowerGorilla

Обзор PowerGorilla

Календарь записей

Март 2018
Вс Пн Вт Ср Чт Пт Сб
    123
45678910
11121314151617
18192021222324
25262728293031

Теги

Разработано LiveJournal.com
Designed by Tiffany Chow