Фотография текста выглядит размытой, когда она маленькая на веб-сайте, но когда она увеличена, она выглядит четкой?

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

Они PNG, так как они не являются чистыми линиями по краю, поэтому мне нужна прозрачность по краям.меньший "размытый" текст

Это случилось с кем-нибудь? или есть у кого предложения?введите описание изображения здесь

Это может быть просто потому, что браузер использует метод быстрого уменьшения масштаба. Пробовали в разных браузерах?
Я обычно использую хром, но попробовал сафари, и это выглядело так же
Попробуйте Firefox и, возможно, Edge. Я думаю, что Safari использует тот же алгоритм уменьшения масштаба, что и Chrome.
да, но проблема в том, что большинство людей будут использовать хром или сафари, поэтому мне нужно, чтобы он работал и на них.

Ответы (3)

Изображение, по-видимому, было уменьшено, или вы не просматриваете его в масштабе 100%. Проверьте уровень масштабирования в Photoshop и установите его на 100%. Этого может быть достаточно, чтобы исправить это.

Если вам нужно уменьшить масштаб изображения, чтобы оно соответствовало другому изображению, или сделать изображение меньшего размера для веб-сайта, то на вкладке «Настройки» > «Общие» установите для интерполяции изображения значение «Бикубическая резкость (лучше всего для уменьшения)».

Скопируйте и вставьте изображение, затем нажмите CTRL+ Tи масштабируйте изображение.

Результат лучше

введите описание изображения здесь

Оба этих изображения взяты из того же файла, когда я загрузил изображение на веб-сайт, только одно из них является основным видом на сайте, а другое — когда вы выталкиваете изображение, чтобы просмотреть его в большем размере.
@HannahBaker Тогда это означает, что у них разный уровень масштабирования. Вы не можете сравнивать изображения, которые показаны с разным уровнем масштабирования.
поэтому, чтобы настроить изображение, чтобы сделать его более четким для меньшего размера, вы можете предложить использовать «Bicubic Sharper (лучше всего для уменьшения)».
Я просто никогда не сталкивался с тем, что когда изображение меньше, оно менее четкое, это случалось со мной только при просмотре изображения большего размера.
Да, измените масштаб, если вы хотите уменьшить изображение для веб-страницы. Не масштабируйте изображения в браузере, они всегда выглядят как дерьмо, независимо от того, увеличиваете вы их или уменьшаете.

Изменение размера изображений по размеру веб-страницы

Измените размер изображений, чтобы они соответствовали веб-странице, без необходимости масштабирования.

Если вы используете Photoshop, выберите Preserve Detailsвариант resampleпри экспорте — для чистого вида с меньшей потерей качества изображения.

введите описание изображения здесь

Я попробовал это, но изображение все еще кажется «размытым», когда я просматриваю его на веб-сайте, я ненавижу даже называть его размытым, это почти как странный контраст, но я проверил его с множественным контрастом, и это кажется, не имеет значения
У вас есть URL-адрес веб-страницы, чтобы я мог ее проверить?
celestekrishna.com/preludered/#libretto страницы либретто появляются случайным образом, но я ввел 3 разные версии «вызова дьявола», две из которых находятся рядом друг с другом, это те, которые я тестирую, как вы можете см. остальные изображения, когда вы выдвигаете их, они становятся размытыми. Это то, что мы пытаемся выдумать, если в этом есть смысл.
также попробуйте это с этой страницей celestekrishna.com/preludered/#notes, и музыкальный квадрат на этой странице делает то же самое
@HannahBaker, эта веб-страница масштабирует изображение, поэтому проблема связана с сайтом, а не с Photoshop.
@Ханна Бейкер. Это твой образ. celestekrishna.com/static/public/uploads/… Он слишком велик для страницы и масштабируется браузером, поэтому выглядит неправильно. Этого нельзя избежать, потому что существует много разных размеров экрана, но вы можете сделать так, чтобы он хорошо выглядел на большинстве устройств. Что вам нужно сделать, так это спроектировать размер изображения для наиболее популярного размера экрана вашей целевой аудитории.
Вы можете получить эту информацию из Google Analytics, если сайт работает какое-то время. Самый популярный размер экрана варьируется от страны к стране, поэтому, если ваша аудитория в основном находится в США, используйте размер, наиболее подходящий для этого места. Вы можете найти эту информацию здесь: gs.statcounter.com/screen-resolution-stats/all/…

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

Кажется, это происходит из-за стилей CSS, которые использует библиотека fotorama .

Вот изображение, как оно сейчас на веб-странице:

Если я включу Инструменты разработчика и выберу родительский элемент изображения, я замечу, что для атрибута преобразования установлено значение translateZ(0) .

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

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

Шрифт является частью изображения, а не веб-сайта как такового. celestekrishna.com/static/public/uploads/…
большое спасибо за изучение этого. Когда я отключил это в настроении разработчика, изображение изменилось. Спасибо!
Приятно слышать! Пожалуйста, не забудьте принять ответ, чтобы другие могли извлечь из него пользу.
Фотография текста выглядит размытой, когда она маленькая на веб-сайте, но когда она увеличена, она выглядит четкой?
СпросиСетьПолитика конфиденциальности1y, 0v