Image Replacent: зачем, как и надо ли вообще?

[SelenIT]

Во многих обсуждениях темы "техник замены декоративных текстов рисоваными надписями" aka Image Replacement aka IR (даже тут неподалеку) с завидной периодичностью всплывает вопрос: "Зачем такие сложности, не лучше ли "в лоб" поставить IMG с alt-ом?"

А действительно, стоит ли "игра свеч, а результат — труда"©? Мои соображения таковы:

• С точки зрения идеологии, "академического пуризма" и т.п. — оно конечно, рисованные заголовки или, скажем, кнопки меню — не иллюстрации, и тег <img> для них вроде как не уместен. Но это в идеале.
  
• С точки зрения практической реализации — все известные способы IR "требуют жертв" либо со стороны семантики ("левые" span-ы и т.д. — чем это лучше img?), либо со стороны кроссбраузерности и/или доступности (либо при отключенных стилях, либо при отключенных картинках по крайней мере часть пользователей не увидит ни шиша, опять-таки в отличие от пресловутого img с alt).
  
• С точки зрения SEO — это палка о двух концах. С одной стороны, теоретически, простой текст в заголовках должен иметь для поисковиков больший вес, чем содержимое alt-а в конструкциях а-ля <h1><img alt="текст"></h1>, так что это плюс. С другой стороны, шаманства с невидимым текстом при опр. условиях могут быть расценены как попытка "обмануть" поисковик, со всеми вытекающими неприятными...
  

Вот в чем, на мой взгляд, бесспорное преимущество CSS-овых техник IR над "олдскульными" дискретными картинками — это в возможности уменьшить число HTTP-запросов с помощью спрайтов. Так что это однозначно оправдано для серий декоративных текстов (тех же меню, заголовков рубрик на индексной странице и т.п.). А вот для одиночных надписей (вроде многострадального главного заголовка), как вы думаете, перевешивает сумма плюсов сумму минусов?

Ну и, конечно же, буду благодарен всем, кто поделится практическими рецептами. Вдруг среди них как раз найдется тот идеальный вариант, свободный от всех недостатков из второго пункта?

[s0rr0w]

Во многих обсуждениях темы "техник замены декоративных текстов рисоваными надписями" aka Image Replacement aka IR (даже тут неподалеку) с завидной периодичностью всплывает вопрос: "Зачем такие сложности, не лучше ли "в лоб" поставить IMG с alt-ом?"

А действительно, стоит ли "игра свеч, а результат — труда"©? Мои соображения таковы:

А стоит ли вообще игра свеч? Эра "прикольненьких" графических заголовков практически ушла с возможностью браузера делать на тексте антиалиасинг.

"Чистый" и понятный дизайн сейчас куда более ценнее, чем нечто съедающее мозг.

Что-то более навороченное на себя перетянул флеш.

[SelenIT]

К сожалению, осталась еще проблема Священного Корпоративного ФирСтиля, одним из элементов которого является специфический шрифт (не "съедающий мозг" вычурный дизайнерский изыск, но и не входящий в традиционную "проверенную четверку"). Бить по ней из флеша/SVG - имхо, оверкилл, а ждать повсеместной поддержки Web Fonts - долго и грустно... Так что сама задача, увы, бывает актуальной. Хотелось бы по возможности услышать аргументы именно по подходам к ее решению.

P.S. Извиняюсь за досадную и нелепую опечатку в названии топика. Исправить уже никак нельзя?..

[rash]

Считаю наиболее приемлемым вариантом «левые span'ы», поскольку в коде при этом читается практически чистый правильный заголовок, который и отображается соответственно при отключенных изображениях или стилях.

[SelenIT]

Прошло три года, и тема нежданно апнула меня снова... Причем удар пришел с той стороны, откуда я никак его не ждал. От самого? великого и легендарного стандартиста, юзабилиста и вообще евангелиста светлой стороны Веба (и всего с ней связанного) Джефри Зельдмана. Вот, полюбуйтесь!

Это после того, как Николас Галлахер наконец придумал методу, сохраняющую доступность текста при раскладе "картинки off, CSS on", а ее недостаток — дуля вместо картинки в ископаемых IE — стал малосущественным (особенно в свете актуальной моды на progressive enhancement, mobile first и т.п. доводы за то, что сирым и убогим браузерам важна простота и базовая функциональность, а вовсе не пиксельпёрфектность любой ценой). И после всех отчаянных призывов донести до разработчиков важность доступности информации — опять всплывает именно тот метод IR, который оставляет с дулей вместо текста именно тех, кому больше других важен этот текст. Например, деревенских школьников, при свете лучины загружающих заветную страничку через GPRS, отключив картинки, чтобы увидеть на экране прошловекового дедова ноутбука хоть что-то...

Да, метод, просто офигенно "обновленный" добавлением overflow:hidden, благодаря чему он стал просто офигенно быстрее фурычить в целом первом айпаде (думаю, что дело именно в overflow, с ним и дикий минусовой text-indent бы обрезался и соптимизировался). Даром что в новых браузерах разницу в быстродействии никто не видел, а Пол Айриш вообще заметил, что от простой перестановки частей демки местами результат сравнения скорости меняется на противоположный

Да, сам Джефри приводит рациональный аргумент против самого естественного, логичного, стандартного, доступного и т.п. способа замены кучи слов одной картинкой (и наоборот) — <img alt="..."> (при том что у себя на сайте юзает именно его!). Ох уж эта новая мода на Responsive всё-что-плохо-лежит! Да, старая добрая "имг-шка" таким премудростям не обучена (неспроста бурлили совсем недавно страсти вокруг предложения ввести ей на смену элемент <picture> с возможностью выбора нужного источника по условиям). Но, черт подери, не ценой потери всех возможностей прочитать текст во вполне реальном юзкейсе!

То ли я всё-таки безнадежно устарел или/и просто дурак... То ли мир вообще и веб в частности катятся куда-то не туда. Как всегда, буду благодарен за любые наводки-подсказки, чего очевидного я в упор не заметил-не учел, и вообще за любые разумные доводы для примирения меня с реальностью!

P.S. А почему тема в "Библиотеке...", в ней ведь нет окончательного практического рецепта? Имхо, вопрос скорее открытый и дискуссионный. Может, лучше его куда-нибудь во Флейм — чтоб больше людей смелее делились соображениями?

Edited March 13, 2012 by SelenIT

[psywalker]

Перенёс, дружище)

[SelenIT]

Спасибо!

Макс, а лично ты по сабжу можешь что-нибудь добавить? Действительно для логотипов в адаптивном дизайне способ с выносом текста вон за пределы видимой области подходит? Но народ ведь подхватит с энтузиазмом ("сам Зельдман посоветовал!") и будет напропалую использовать в т.ч. для заголовков... Или я сгущаю краски и не так всё страшно?

И еще, в каком месте этот способ "accessible", если беглый анализ юзкейсов показывает, что нет (кстати, интересно, кого больше — юзеров медленных каналов с отключенными картинками или юзеров скринридеров, где бы найти статистику?). Или я опять же заблуждаюсь и путаю проблемы по степени важности?

[psywalker]

SelenIT,

Макс, а лично ты по сабжу можешь что-нибудь добавить? Действительно для логотипов в адаптивном дизайне способ с выносом текста вон за пределы видимой области подходит? Но народ ведь подхватит с энтузиазмом ("сам Зельдман посоветовал!") и будет напропалую использовать в т.ч. для заголовков... Или я сгущаю краски и не так всё страшно?

На самом деле да, может и подхватить народ, особенно сухари. Более продвинутые вынесут свой вердикт, как сделал народ в этой статье. Просто, слава яйца, есть из чего выбирать.

Кстати, считаю способ Зельдмана 101-ым, ничего нового, и он не решает проблему оставленного на месте текста. Вот этот способ самый лучший, на мой взгляд. Ну, ты уже в курсе)

.nir {
   height:100px; /* height of replacement image */
   padding:0;
   margin:0;
   overflow:hidden;
}

.nir:before {
   content:url(image.gif);
   display:block;
}

accessible

Громкие слова в своё оправдание. Зельдман избавился от -9999px, но, по сути, нормальное решение так и не привёл. Поэтому и сделал упор на то, что вообще можно сделать.

Короче старичок видно уже настолько старенький, что запаздывает за прогрессом))

[buddah]

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

[psywalker]

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

Был бы признателен, если бы ты привёл все аргументы, чем плох этот способ?

.nir {
   height:100px; /* height of replacement image */
   padding:0;
   margin:0;
   overflow:hidden;
}

.nir:before {
   content:url(image.gif);
   display:block;
}

[mishka]

Плох тем что в ие6-7 не работает.

И вот что я получил в опере при отключенных картинках:

Вот это слово "изображение" мешает.

при таком коде:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>imageReplacent</title>
	<style>
		.logo {
			width: 128px;
			height: 128px;
			overflow: hidden;
			border: 1px solid #f00;
		}
		.logo a:before {
			content: url(logo.png);
			display: block;
		}
	</style>
</head>
<body>
	<div class="logo">
		<a href="#">logo</a>
	</div>
</body>
</html>

Вобщем выход -- font-size: 0;

.logo a:before {
	content: url(logo.png);
	display: block;
	font-size: 0;
}

[psywalker]

Эти минусы я учитывал, но, если отбросить IE6-7, то способ считаю лучшим на данный день.

[buddah]

Эти минусы я учитывал, но, если отбросить IE6-7, то способ считаю лучшим на данный день.

А это и есть лучший способ пока что с точки зрения семантики. Просто я не откидывал ие7, поэтому и сказал, что выбирать надо из двух зол.

[SelenIT]

Вот это слово "изображение" мешает.

Разве одно лишнее слово в одном браузере хуже, чем вообще них ничего нигде?

[mishka]

Вот это слово "изображение" мешает.

Разве одно лишнее слово в одном браузере хуже, чем вообще них ничего нигде?

Да я же написал что font-size: 0; исправляет.

Тоже считаю этот способ лучшим, если пренебречь ие6-7.

[psywalker]

mishka, Поздравляю с юбилеем

[SelenIT]

я же написал что font-size: 0; исправляет.

Да, сорри, я не сразу посмотрел код и понял, что фонт-сайз задается самому псевдику, не отошел в тот момент от соотв. статьи на хабре, где предлагали font: 0/0 для всего . С твоим фиксом этот способ действительно наилучший — и по чистоте кода, и по доступности. Для старых IE возможны варианты (вставка картинки одноразовым экспрешном, откат к конскому text-indent и т.п.), но, имхо, самое подходящее для них в 2012-м году — изящная деградация (с быстрой загрузкой и легкой читабельностью).

[psywalker]

но, имхо, самое подходящее для них в 2012-м году — изящная деградация (с быстрой загрузкой и легкой читабельностью).

Нет, самое подходящее для них в 2012-м году - это гроб)

[SelenIT]

Это да, но иногда они ж, проказники, вылазят из него на прогулку...