CSS решение для рендеринга изображений - PullRequest
0 голосов
/ 16 июля 2010

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

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

Есть ли другой выход.

Спасибо

Ответы [ 3 ]

3 голосов
/ 16 июля 2010

Согласно image-rendering на MDC , image-rendering в настоящее время поддерживается только в Firefox 3.6.Аналогичное свойство -ms-interpolation-mode доступно для IE7 и IE8.Другие браузеры, похоже, не имеют этой функции (пока).

Поскольку latze упоминал , лучше всего отредактировать само изображение, масштабируя его до необходимого вам уровня.Я не уверен, но вы можете попытаться использовать <canvas> для выполнения желаемой интерполяции.

0 голосов
/ 16 июля 2010

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

0 голосов
/ 16 июля 2010

Я бы просто отредактировал картинку вместо CSS.

Попробуйте сделать изображение немного больше, шаг за шагом, пока вы убедитесь, что изображение не (как мы его называем на датском, не уверены, правильно ли оно на английском) "pixelate".

Это можно сделать в различных программах для редактирования изображений, от Gimp-shop до Photoshop.

...