Приводит ли изменение размеров изображений к HTML / CSS лучшие результаты, чем Fireworks и т. Д.?

Question

Обычно я беру изображение в Fireworks, меняю его на нужный размер для веб-сайта и затем экспортирую для Интернета в формате JPG / PNG. Это хорошо.

Я заметил, что если я использую увеличенное изображение в своем теге <img> и затем изменяю его размер с помощью свойства CSS width, это будет более четким и ясным, чем если бы я изменил его размер в продукте Adobe.

Получают ли другие такой же опыт? Например: возьмите изображение размером 100x100, размером 50x50 в Fireworks и 50x50 с CSS, и изображение будет выглядеть лучше с изменением размера CSS.

Я понимаю, что чем меньше изображение, тем лучше время загрузки сайта и т. Д.

Answer 1

Это зависит от браузера и программы для работы с изображениями.

Когда вы изменяете размер с помощью CSS или HTML, вы просите браузер выполнить изменение размера вместо предоставления предварительно измененного изображения.

Является ли результирующее измененное изображение более «четким», зависит от изображения, браузера и используемого алгоритма изменения размера (бикубический, билинейный, Ланцоша и т. Д.).Вы должны изменить его размер самостоятельно.Вы можете попробовать несколько различных алгоритмов изменения размера в вашей программе для работы с изображениями.С браузером вы зависите от этого браузера, чтобы предоставить правильный алгоритм изменения размера, и вы не можете гарантировать, что каждый посетитель будет использовать один и тот же браузер ...

http://en.wikipedia.org/wiki/Image_scaling

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

Answer 2

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

Вы можете взять редактор случайных изображений, например gimp, и посмотреть на параметр изменения размера, где вы можете выбрать один из доступных методов интерполяции.

Если ваш браузер также не выполняет дополнительное масштабирование изображения.

Answer 3

При использовании CSS он полностью основан на браузере.Firefox, кажется, очень хорош в уменьшении размеров изображений, но Internet Explorer (по крайней мере, IE6 / 7) ужасен.

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

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

Answer 4

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

Это будет первое.

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

Также, как вы уже сказали, увеличенное изображение == больше времени загрузки (для относительно небольшого изображения).

РЕДАКТИРОВАТЬ

Я только что проверил, что такое Fireworksis :) что-то для создания изображений для Интернета, возможно, не лучший инструмент для изменения размера изображений (я думаю, что это также делает сжатие).Вы пробовали PhotoShop / Illustrator?