Рендеринг изображений в браузере

Question

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

Answer 1

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

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

Answer 2

Похоже, что IE7 поддерживает бикубику, если вы добавляете "-ms-interpolation-mode: bicubic;" к вашему стилю img css. Я сам не пробовал, и мне интересно, будет ли это работать на GIF-изображениях или только на настоящих цветных изображениях.

Answer 3

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