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

Question

У меня есть фоновое изображение, 1000x666px, и только 93kb. Я использую это как фоновое изображение, с этим кодом:

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 не работает.

Какие-нибудь советы?

Answer 1

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

см. Плохая производительность Chrome при использовании background-size: cover

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

Answer 2

Вы пытались наложить свои изображения и объекты dom на z-индексы, чтобы убедиться, что они не конкурируют за ресурсы?

Answer 3

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

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

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