Загрузка фонового изображения в высоком разрешении - PullRequest
Новая
       52

Загрузка фонового изображения в высоком разрешении

3 голосов
/ 01 июня 2011

У меня красочное фоновое изображение размером 2000px x 1500px, и из-за деталей я сохраняю его в формате JPEG, который отображается с размером 1,1 МБ. Я использую свойство CSS background для рендеринга изображения. Так как я относительно новичок в веб-разработке и работаю с клиентом / дизайнером, который не склонен к изменению дизайна на данном этапе процесса, что я должен сделать, чтобы помочь этому изображению загружаться невероятно быстро. Я не знаю, если это имеет значение, но сайт использует Joomla 1.5.9. Это то, что я всегда хотел понять, но у меня были проблемы с поиском решений для ... Я надеюсь, что кто-то может помочь !!

Спасибо всем!

Ответы [ 5 ]

8 голосов
/ 01 июня 2011

Нет способа заставить изображения магически загружаться быстрее.Иногда, однако, разделение изображения на более мелкие изображения позволяет получить неожиданный прирост размера;так что, если это не исключено для вашего макета CSS (хотя, как правило, так и есть), вы можете попробовать это.

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

3 голосов
/ 01 июня 2011

Лучшее, что вы можете сделать, это попытаться уменьшить размер файла до минимума. Пусть это использует какой-то оптимизатор, например, smush.it. Если вы создали фоновое изображение, попробуйте сначала сохранить его как прогрессивный, сначала он загружает версию с более низким разрешением, а затем заканчивает загрузку. Но лучше всего попытаться уменьшить размер изображения по ширине и высоте, найдя повторяющийся узор и обрезав только эту часть и используя ее. Большинство изображений about.me имеют размер не более 100 КБ и шириной более 1200 пикселей.

1 голос
/ 01 июня 2011

Вы можете сразу вызвать изображение в голове, используя 

<script>
(new Image()).src = "IMAGE PATH";
</script>

и убедиться, что вы сжимаете изображение настолько, насколько это возможно, с помощью различных программ, или, если у вас есть Photoshop CS5, вы можете сохранить его длявеб-устройство, чтобы убрать весь лишний мусор, вы можете попробовать smush.it

http://www.smushit.com/ysmush.it/

от Yahoo или полностью отложить загрузку сайта на несколько секунд, покавы можете быть уверены, что изображение загружается, вы можете попробовать что-то вроде сокрытия всех элементов и затемнения их при помощи setTimeout, например,

* CSS 

body{
opacity:0;
}

* jQuery 

setTimeout(function(){$('body').animate({opacity:'1'},300)},5000);

хотя это может быть не так уж и практично.

0 голосов
/ 09 мая 2012

Доставка изображения по CDN, скорее всего, ускорит процесс; лучшие из них, как правило, оптимизируются для доставки правильного размера TCP-пакета / MTU широкому кругу клиентов, и, как правило, проделали большую работу по детализации быстрой доставки. Медленные соединения, такие как сотовые телефоны, все равно будут вас ненавидеть, но правильные настройки размера пакета могут максимально использовать доступную полосу пропускания.

0 голосов
/ 01 июня 2011

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

Что-то вроде установки атрибута style для <body> равным background: url(image.jpg) в пределахфункция загрузки?

...