Что со всеми методами замены изображений?

Question

Я только что узнал об замене изображений, технике (ов), или, вернее, просто изучаю, так как видел в нем микширование в Bootstrap. Недавно я увидел, что это появилось, поэтому я решил исследовать. Я нашел this article, но, признаюсь, я не понимаю, о чем вся эта суета. Почему бы просто не поместить тег IMG поверх текста, который вы хотите заменить?

Answer 1

В качестве страницы ссылки OP, Nine Techniques for CSS Image Replacement, есть несколько аспектов, которые следует учитывать при внедрении замены изображений. Некоторые методы более просты, чем другие, большинство из них действительно работают над графическими браузерами, некоторые из них имеют более абстрактные проблемы, такие как ненужная разметка.

Что у вас есть вариант вниз к земле

<h1 class="technique-ten"> 
    <img src="graphics/thetitle.png" alt="The Title" /> 
</h1> 

, что не нуждается в какой-либо CSS, это основное, это работает во многих ситуациях (чтения с экрана, только текстовые браузеры и т.д.) , но это не идеально для целей SEO. Таким образом, вы добавить дополнительный текст

<h1 class="technique-ten"> 
    The Title 
    <img src="graphics/thetitle.png" alt="The Title" /> 
</h1> 

с этим CSS

.technique-ten {width:350px; height:75px;} 
.technique-ten img {display:block; margin-top:-1.2em} 

положить изображение поверх текста, но тогда у вас есть дополнительный код (текст в h1 и img что говорит то же самое), и если изображения отключены, вы получаете двойной текст.
И вы не можете использовать изображение с прозрачными областями, как показано на рисунке jsfiddle. Создание невидимого текста не является идеальным вариантом, потому что любой метод, который делает текст невидимым, также влияет на его SEO.

Вы можете сделать alt txt пустым.

<h1 class="technique-ten"> 
    The Title 
    <img src="graphics/thetitle.png" alt="" /> 
</h1> 

но это только останавливает проблему с «двойным текстом», а не другие. Кроме того, img перестает иметь смысловое значение.

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