Осмотр рендеринга браузера

Question

Я динамически подгоняю прозрачный .gif на своей веб-странице с помощью JavaScript. Исходный размер изображения составляет около 200x200 пикселей и обычно изменяется в диапазоне от 600x600 до 800x800. В IE8 и FF3 изменение размера изображения приводит к красивому градиенту, в котором цвета выглядят растянутыми. Однако в старых браузерах, таких как IE7 и FF2, изображение с измененным размером не отображает градиент, а только блоки одного цвета. Очевидно, что в браузерах есть что-то, что вызывает это, но мне любопытно, есть ли способ обойти это без необходимости менять исходное изображение.

Answer 1

Если вы просто используете его в качестве градиента, почему бы не просто поднять новый в Photoshop/Gimp, который соответствует правильному разрешению для того, что вам нужно. В конечном итоге это будет намного проще, а затем попытаться получить масштабированное изображение для правильного отображения во всех браузерах.

Answer 2

Нет. Старые браузеры просто берут пиксели в изображении и умножают их в соответствии с новым размером, который вы дали изображению.

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

Answer 3

Похоже, что IE7 поддерживает бикубический, если вы добавляете «-ms-интерполяционный режим: бикубический»; к вашему типу img css. Я сам не пробовал, и задаюсь вопросом, будет ли оно работать на gif или если оно будет работать только с истинными цветными изображениями.