Точка фокуса в адаптивных изображениях

[Bytexpert]

Только утром увидел статью на Prismatic-е, зашел на Хабр — перевод, оперативненько — спасибо! У меня давно были мысли по поводу точки фокуса и использования ее при кадрировании. Но вот чтоб вот так прямо на CSS — и подумать не мог.

И все же мне кажется, лучше готовить изображения заранее. Как раз вчера выпустил новую версию бесплатной программы для создания html сайтов WebProject, в которую добавил графический редактор и возможность автоматом кропить и ресайзить изображения при сборке сайта. Вот как раз такая функциональность там бы очень пригодилась. Пожалуй займусь реализацией.

[Gangsta]

Пиар не удался.

[Bytexpert]

Ну это как посмотреть. Просто карма плавно сконвертировалась в посетителей сайта и пользователей программы. Это был по большей части эксперимент. Полную статью на Хабре в «Я пиарюсь» я планировал написать через недельку, а тут зашел с утра на Призматик и такая статья интересная попалась, прочитал — оценил, сделал выводы.

Зашел на Хабр, а тут перевод, ну думаю, статья по теме, наверняка выйдет на главную, коммент первый — скандальный, наверняка народ пойдет глянуть. Ну и подумал, а дай-ка эксперимент поставлю — насколько сильно уронят комментарий, карму и во что это сконвертируется. Устроил себе реалитишоу сегодня смотрел как тихонько тает карма и конвертируется в установки программы. :)

Если есть интерес, то могу потом выводы и статистику озвучить, т.е. сколько карма была вначале, сколько в конце и во сколько посещений и установок программы это вылилось.

[Adiost]

Я тоже люблю, когда кармы до жопы, и можно позволить себе в комментариях какую-нибудь непотребность. Мне как-то за один тридцать пунктов сняли — и ничего, живу.

[Bytexpert]

Друзья, резюмирую — пиар действительно не удался. С хабра пришло 457 человек. Расплата кармой -10 (голосов было больше, но как в минус так и в плюс). Количество пользователей программы за день — 37 (это на уровне среднего значения до заминусованного пиарного коммента в топике). Т.е. пиариться таким образом невыгодно, лучше писать нормальную, дельную и полезную статью в «Я пиарюсь». У статьи есть еще одно преимущество, с Хабра активно перепечатывают, поэтому вы получаете дополнительные переходы с других источников.

Ивниняюсь перед теми, чьи чувства я задел своим первым комментом, постараюсь больше так не хулиганить.

[desigens]

Конвертация кармы в трафик.

[michaelarshinov]

Недостатком фреймворка является необходимость заключать изображение в два div'а

Если для изменения масштаба фотографии мне нужно поменять лишь цифры в именах классов (right-, up- ), тогда не страшно :)

[michaelarshinov]

но осадок, конечно, остался неприятный!

[nooze]

Если расчет ведется от центра, то и координатную сетку стоило расположить на фотографии так же — было бы понятнее (0 в центре + — расходятся в стороны)

[dasty]

Мне одному кажется что здесь должно быть 2 Up и 2 Right?

И еще не понятно почему за центр они взяли строку 6, но столбец 7.

[leonard]

За центр явно взяты пересечение вертикали между 6 и 7 столбцом и такой же горизонтали. Тогlа и 3 Up сходятся и 3 right

Просто нарисовано криво. Не надо было закрашивать целиком квадраты, нужно был линии на диагоналях изобразить:

[Bytexpert]

Блин, я думал по ссылке будут примеры неудачного или прикольного авто-кадрирования, типа какой-нить интересной части человеческого тела на весь кадр, а там тьюториал… Я разочарован… :)

[Bytexpert]

Ну тогда надо не точку ставить, а прямоугольник указывать предпочтительного кадрирования. Я так скорее всего у себя в WebProject и сделаю.

А на CSS это здорово конечно, тем более, что с поддержкой ретины многие рекомендуют не ресайзить картинки, а наоборот делать разрешение в 2 раза больше, но вот проставлять такие свойства ручками утомительно. Нужен все же инструмент для этого.

[Hanhe]

По-моему и на картинке с мужиком, приведенной в топике, после кадрирования «полетела» композиция. Из-за обрезания картины взгляд уходит с картины направо.

[d1gga]

Любое кадрирование выполняемое не ради эстетических целей а для экономии места — полумеры. В примере поста, это очень удачные полумеры которые позволяют кадрировать фотографию так как это считает допустимым автор. Разумеется мадонну кадрировать смысла нет, но для обычных повседневных фотографий это очень удобный и грамотный ход.

[d1gga]

Не «само» а именно с указанием важных для сохранения смысла точек. Я полагаю автор фотографии сам выбирает что на его фотографии является важной частью и чем можно пренебречь для экономии места. И раз он решается на использование кропа — пренебречь есть чем.

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

[david_mz]

Ну вот такое я когда-то заскриншотил:) hiero.ru/david/ljpic/winnouse.gif

[Akson87]

Сначала был человек с руками, потом стал человек с обрубками рук. IMHO, особо улучшений не наблюдается…

[SergioBarbery]

А вдруг дядька случайно в кадр с картиной попал?

[Elfet]

Хватит все подряд, называть фреймворками, это — библиотека.

[Apathetic]

Мне кажется, этот метод крайне редко может быть применим. Единственный логичный вариант, который приходит на ум — адаптивные галереи, в которых и так по клику/тапу раскрывается полное изображение. В остальных случаях я просто не вижу смысла в использовании этой техники.

[kelegorm]

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

[kelegorm]

Для каких-то целей — проще и кропнуть. А для каких-то — проще использовать такую автоматизированную штуку.

Не надо драться за инструменты. Надо просто правильно подходить к их выбору.

[Bytexpert]

Не-не-не. Не скажите. Я считаю автоматический кроп хорошей и иногда очень полезной штукой. Вот у себя в программе, нудачно отпиаренной в первом комменте, я в шаблоне SimpleWeb как раз делаю автоматический кроп изображений для слайдера и «заголовочных» изображений для статей. Т.е. я не заморачиваюсь, просто прицепляю изображение к статье или слайдеру. А при сборке сайта, оно автоматически ресайзится и кропится. НО у меня в настройках автокропа в шаблоне есть параметр, как кропить — по центру или по верхней части или на уровне 25% от верха (это если портрет, то как раз обычно там лицо) и я выбираю параметр в зависимости от целей. Получается не идеально — но вполне сносно — зато экономия времени огромная.

[Bytexpert]

Да, я согласен, но ведь тут дело в целях и задачах. Вот пример, мне надо скриншоты разместить на странице, полноразмерные разместить прямо на месте не могу — место не позволяет. Ресайзить — артефакты будут от ресайза — буковки нечитабельные. Поэтому надо поместить кроп-вариант и по клику открывать полноразмерный. А кроп-вариант руками делать для каждого шота, выбирать композицию, да еще и уложиться в размеры дизайна страницы — этак жизни не хватит. Поэтому и делаю авто-кроп. Да, есть косяки, тут буковки торчат, тут линия висит, но каждый кроп доводить до совершенства я смысла не вижу, т.к. основная цель не в этом, да и заметит это пара человек от силы — остальным пофиг. Если в среднем на просмотр страницы серфер тратит от 1 до 3 секунд — то приложенные усилия не окупятся.