Как сделать изображение с текстом четким на сайте?

Question

[Senseich]

Всем привет! Давно мучал этот вопрос, но накипело и охота услышать грамотных решений. Т.к. я не вебдизайнер, то забивал на это. Суть такова, к примеру я делаю баннер для сайта с текстом. В фотошопе всё идеально, но когда начинаешь на сайт выкладывать, текст плывет, искажается и т.д. Я заметил, если изображение точь в точь по размеру блока родительского, то всё гуд. Если блок меньше, то начинаются проблемы с текстом. То же самое на других разрешениях. Не делать же под каждое разрешение отдельную картинку )
Вот к примеру сайт баннер на сайт я сделал: prntscr.com/hs5quf
Не заметно, но текст уже мутнеет. Это заметно, если открыть оригинал.
Но это ещё ладно, вот здесь можно посмотреть как это будет на планшете и на мобильном
Для мобильного отдельный баннер создал, но тоже плывёт: quirktools.com/screenfly/#u=http%3A//gemexcellent....

Comments

[Moskus]

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

[Senseich]

Moskus, а как с адаптивностью быть? Под каждое разрешение делать отдельную картинку? Это сума сойдешь )

[Moskus]

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

[Владимир]

А что мешает банера в SVG или в HTML делать ? Так чтобі текст біл или вектором или текстом ? НА картинке всегда текст будет пліть при изменении размера
https://developer.mozilla.org/ru/docs/Web/SVG/Tuto...

Гугл для баннеров в HTML даже свой редактор віложил https://www.google.com/webdesigner/

Answer 1

[ой всё]

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

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