Есть ли разница в производительности между увеличением или уменьшением изображения с помощью CSS?

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

Что лучше всего сделать в этом случае? Случай а) уменьшение изображения в 950 пикселей или случай б) увеличение изображения в 850 пикселей (эти значения конечно фиктивные, я не говорю о конкретном случае)

С того места, где я стою, у каждого есть свои преимущества и недостатки:

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

Используя апскейлинг, вы увеличиваете скорость загрузки, но теряете качество.

Конечно, вы не будете масштабировать изображение в 500 пикселей, чтобы заполнить ширину в 1000 пикселей, точно так же, как вы не будете уменьшать изображение в 2000 пикселей по очевидным причинам, если у вас есть выбор. Но в случаях, когда у вас одинаковые значения, есть ли какое-то эмпирическое правило, которое может помочь вам принять решение, или это не имеет большого значения, и это зависит от разработчика?

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


image-scaling html css
person BBog    schedule 12.06.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Я думаю, вы могли бы посмотреть на это по-разному. Кроме того, вы должны задать себе несколько вопросов:

  • Какую аудиторию вы пытаетесь охватить (мобильные (скажем, до максимальной ширины 640 пикселей) или настольные компьютеры (все, что шире 640 пикселей))
  • Какое самое большое изображение вы будете использовать (по ширине и высоте)
  • Нужны ли ваши изображения на вашем мобильном веб-сайте (т. е. можете ли вы сделать упрощенную мобильную версию своего веб-сайта, не теряя слишком много его содержимого?)

Когда ваше внимание сосредоточено на среде рабочего стола, как определено выше, я бы не стал слишком беспокоиться о вашей проблеме. Конечно, для загрузки больших изображений потребуется некоторое время, но не забывайте, что большинство мобильных браузеров имеют две очень удобные функции: 1. данные, извлекаемые устройством, сначала сжимаются серверами (например, Blackberry, Opera ...) и 2. в большинстве случаев браузеры позволяют выбирать качество изображений (низкое, нормальное, высокое). Таким образом, пользователи по-прежнему могут выбирать, какое качество они хотят, и вам не нужно решать за них!

Я думаю, что когда вы ориентируетесь на мобильную аудиторию, лучше всего делать апскейл. Я не думаю, что ваш веб-сайт предназначен только для мобильных устройств, и вы хотите, чтобы ваш веб-сайт хорошо выглядел и на широкоэкранных устройствах, поэтому я бы пошел на уменьшение масштаба! Кроме того, не забудьте оптимизировать изображения (сжатие JPG на 80 % должно значительно уменьшить размер, но не должно сильно ухудшить качество).

РЕДАКТИРОВАТЬ: Итак, я думал об этом, и есть еще кое-что, что вы можете сделать: работать с двумя разными изображениями. Я слышу, как вы думаете: но это звучит нелогично, как браузер может определить изображение, которое нужно изменить, когда оно еще не загружено (было бы глупо загружать два изображения). Итак, вот давайте. (Кредиты идут к jAndy в этом вопросе)

Код jQuery (обратите внимание, что я связался со своим собственным веб-пространством. Таким образом, эта скрипка не будет работать вечно!)

$(document).ready(function() {
    $("#jsDisabledMessage").hide(); // HIDES MESSAGE THAT TELLS USER TO ENABLE JS

    if ($(window).width() < 480) {
            $("img").attr('src', function(index, src) {
       return "http://bramvanroy.be/files/jsfiddle/8mZnk/" + this.getAttribute('data-path') + "-mobile.jpg"; // FOR MOBILE DEVICES
        });
    }
    else {
        $("img").attr('src', function(index, src) {
       return "http://bramvanroy.be/files/jsfiddle/8mZnk/" + this.getAttribute('data-path') + "-not-mobile.jpg"; // FOR DESKTOP
        });
    }

   $("img").show();
});

Итак, что происходит:

  • Браузер читает HTML
  • Браузер не пытается найти изображение (и в любом случае изображения скрыты CSS)
  • jQuery находит подходящий URL-адрес (в зависимости от размера экрана) и соответствующим образом настраивает HTML.
  • jQuery показывает изображения
  • Когда JS отключен, будет отображаться сообщение о том, что запрошенные изображения не могут быть отображены.

Я надеюсь, что это что-то в правильном направлении.

person Bram Vanroy    schedule 12.06.2012
comment
Хороший ответ: D Мне любопытно, потому что я начал работать над универсальным приложением, ориентированным на браузеры, а также на все различные мобильные устройства / планшеты. Так что, к сожалению для меня, я должен учитывать все возможности, чтобы выбрать хорошее, если не лучшее решение. - person BBog; 12.06.2012
comment
@BBog Я добавил довольно много. Может быть, это поможет. :) - person Bram Vanroy; 12.06.2012
comment
На данный момент я использую настройку качества. Когда это правда, я уменьшаю масштаб изображения, когда это ложь, я увеличиваю их масштаб. Я до сих пор точно не знаю, есть ли разница. Я подожду до завтра, чтобы увидеть, появятся ли какие-либо другие предложения, но я, вероятно, приму ваш ответ, поскольку он был полезен. Спасибо - person BBog; 12.06.2012