Некоторые способы добавления текста к изображениям в веб-дизайне:

• Добавить контраст. 13 Для изображений с тёмным фоном выбрать светлый цвет шрифта, и наоборот. 1 Контрастным может быть также размер и начертание текста. 1
• Интегрировать текст в изображение. 1 Этот приём хорош, если нужно «вписать» в картинку с одним доминирующим элементом короткое слово, надпись или название бренда. 1
• Учитывать логику изображения. 1 Не размещать текст на ключевых элементах картинки (лица людей, основное действие, рекламируемый продукт). 1 Универсальный вариант — размещать текстовые элементы там, куда направлен взгляд человека на фото, повёрнут его корпус или направлена рука. 1
• Размыть картинку. 1 Частичное размытие фона — простой, но действенный приём. 1 На слегка размытом фоне текст виден лучше. 1
• Разместить текст в поле. 1 Этот приём оптимален, когда фоновое изображение разнообразно по цветовой гамме, или тёмные участки часто чередуются со светлыми. 1 В качестве подложки подойдёт простая геометрическая фигура — прямоугольник или круг, например. 1
• Вынести текст на фон. 1 Если на картинке достаточно фонового пространства, попробовать разместить текст там, а не на первом плане. 1 Эта часть изображения обычно однотонная и не перегружена мелкими деталями, так что текст здесь будет хорошо читаться. 1
• Увеличить масштаб. 3 Чтобы текст смотрелся на фото лучше и был более заметным, можно увеличить или размер шрифта, или само изображение. 1
• Использовать полупрозрачное покрытие. 1 Это довольно сложный метод, но если точно подобрать оттенок для наложения и прозрачность, а также цвет самого текста, эффект может быть потрясающим. 1 Смысл приёма в том, чтобы верхний цветовой слой был прозрачным настолько, чтобы пользователь понимал, что изображено на картинке, но одновременно мог легко прочитать текст. 1
• Выйти за рамки фона. 1 Для этого нужно увеличить основную текстовую надпись и сжать фоновое изображение. 1 В результате образуются большие просветы по периметру, и текст будет казаться намного ближе, чем другие элементы композиции. 1

Также для добавления подписи к изображению в HTML можно использовать элементы