Оптимизация изображений/css для скорости работы

У меня есть фоновое изображение, 1000x666px и только 93kb. Я использую его в качестве фонового изображения, с помощью этого кода:Оптимизация изображений/css для скорости работы

url(/Optimized-image1.png) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover;

Когда я установить это изображение в качестве фона, мои JQuery эффекты очень медленно и не гладкие на всех. То же самое происходит с моими материалами Google Maps.

Когда я устанавливаю фон просто белым или любым другим цветом, все это гладко, поэтому я считаю, что мой CSS-код не так уж хорош.

Я попытался предварительно загрузить изображение с помощью javascript, но это не хорошо. Также base64 не работает.

Любые советы?

источник

2012-01-21 yesterday

Кажется background-size: cover; выполняет плохо, по крайней мере, в хромированном состоянии.

см Poor performance of Chrome using background-size: cover

Вот список альтернативных решений http://css-tricks.com/perfect-full-page-background-image/

источник

2012-01-21 20:35:57

, когда я удаляю все это (обложка), он работает очень хорошо! но затем возникает другой вопрос: когда я загружаю изображение, оно должно быть «одинаковым» на разных экранах. Таким образом, образ 2000x1000 должен «масштабироваться», я знаю, что я имею в виду. Он должен заполнить общий фон. – yesterday

добавлена ссылка на альтернативы –

Во-первых, вы можете оптимизировать свои изображения с помощью SMush It. Также вы можете оптимизировать все ваши файлы CSS с помощью Clean CSS.

Если вы хотите «смазать» ваши изображения динамически, вы можете использовать Smush It, все еще.

1) Пользователь будет загрузить изображение
2) Получить новое загруженное изображение в URL ($ imgurl)
3) Сделать запрос на http://www.smushit.com/ysmush.it/ws.php?img=$imgurl и получить его содержания (это JSON) для $content
4) разобрать JSON с $ newimage = json_decode ($ content);
5) URL вашего нового и оптимизированное изображение является $newimage->dest скачать и использовать его :)

источник

2012-01-21 20:33:22 Eray

спасибо за ссылку чистого CSS. проблема с изображениями заключается в том, что это динамическое изображение. посетители/пользователи могут загружать свой собственный образ. У меня есть ограничение на загрузку 400kb. – yesterday

@yesterday, я обновляю свой ответ всего минуту. – Eray

@ вчера, обновлено. – Eray

Вы пробовали отводками изображения и Dóm объекты с Z-индексов, чтобы убедиться, что они Арент конкурируют за ресурсы?

источник

2012-01-21 20:35:08

Оптимизация изображений/css для скорости работы

ответ

Смежные вопросы