Как решить проблему производительности масштабирования изображений в ответных целях?

Question

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

<img class="img_scale" src="img.png" alt"this img doesn't have width and height 
definition"> 

CSS:

.img_scale{width:100%; height:100%; margin:0 auto; height:auto !important;} 

Это решение отлично работает, если изображение не щит фоновое изображение или в не гибкой коробке .. Так что я хотел бы, чтобы масштабировать изображение вместо использования JQuery плагин.

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

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

Answer 1

Отъезд this article from Smashing Magazine. Автор подробно излагает все, что вы можете пожелать, и возможные решения.

Answer 2

Я думаю, это зависит от того, какие «проблемы с производительностью» вы действительно пытаетесь решить. Если вы беспокоитесь о времени, затраченном на повторную калибровку в браузере или проблемах с повторным потоком, используйте максимальную ширину: 100% на изображении и установите ширину контейнера изображения, предпочтительно используя гибкую структуру, такую ​​как Foundations Framework или Bootstrap.

Если вы беспокоитесь о времени, затрачиваемом на загрузку изображений на мобильное устройство через медленную мобильную сеть, тогда изображение должно быть масштабировано или обрезано до того, как они попадут в провод. Делать это в клиентском браузере слишком поздно. Вы можете сделать это «на лету» или заменить свой img.src на один из нескольких размеров изображений на основе точек останова.

Чтобы масштабировать или настраивать обратные изображения на лету, вы можете использовать услугу, такую ​​как Pixtulate. Они предоставляют JavaScript, который автоматически определит размер вашего контейнера, отправит эти измерения на сервер и изменит размер сервера изображения в режиме реального времени до того, как страница закончит загрузку.