Изображения на текст
Текстът трябва да се реализира като действителен текст, а не като растерно изображение, освен ако изображението е съществено (лого, снимка на интерфейс, обсъждан в контекста) или напълно персонализируемо от потребителя.
Какво се изисква
Когато същото визуално представяне може да се постигне с реален текст и CSS, трябва да се използва реален текст. Изображенията на текст не се мащабират чисто при увеличение, не могат да бъдат избирани, не могат да бъдат превеждани от браузъра, не могат да бъдат преоформяни чрез потребителски CSS и пикселират при висок мащаб. Изключения: лога, съществени изображения (снимка на екрана, демонстрираща как изглежда даден интерфейс) и изображения на текст, които потребителят може да персонализира.
Как да се изпълни изискването
- Изобразявайте заглавия, банери и промоционален текст като HTML текст с уеб шрифтове, а не като експортирани PNG файлове.
- За маркетингови значки („Ново”, „Разпродажба”, „30% отстъпка”) използвайте
<span>с CSS стилизация вместо спрайт изображение. - Ако дизайнер предостави изображение на герой с вграден текст, поискайте текстът да бъде на отделен слой и да се изобрази върху изображението чрез CSS.
- При социално-медийни цитатни карти, генерирани от страната на сървъра, изобразявайте ги като SVG с елементи
<text>, когато е възможно — SVG текстът се мащабира чисто и може да се избира. - Използвайте
@font-faceза зареждане на персонализирани декоративни шрифтове вместо растеризиране на декоративни надписи.
Чести грешки
- Рекламни банери с целия текст („Ограничена оферта! Пазарувайте сега!”), изобразен като JPEG, размазан при 200% увеличение.
- Карти с ценови категории, при които „99 €/месец” е част от изображение на картата, а не HTML текст.
- Секционни разделители с украсен текст („Нашите услуги”), доставени като PNG вместо стилизиран
<h2>. - Призиви за действие, изцяло базирани на изображения, с алтернативен текст, дублиращ визуалното съдържание.
- Снимки на имейл стил, използвани на маркетингови страници, при които маркетинговото съдържание може просто да е реален текст.
Защо това е важно
Изображенията на текст са и проблем с превода и SEO оптимизацията — Google не може да ги индексира, Chrome не може да ги превежда, а потребителите на екранни лупи ги виждат пикселирани. Поправката обикновено е тривиална: замяна на експортирания файл с HTML. Трудността е в работния процес — дизайнерите доставят JPEG файлове, тъй като са по-бързи за производство в Figma, отколкото за спецификация.