Сократить время загрузки тяжелых изображений в HTML5

Question

Я пытаюсь загрузить на сайт тяжелые изображения. Я попытался использовать метод photoshop -> posterize, чтобы уменьшить размер файла для больших png-файлов, а затем некоторые онлайн-инструменты для уменьшения размера png-файла без существенного нарушения размера изображения. Я уже пробовал предварительно загружать изображения, но они все равно загружаются довольно долго.

Может кто-нибудь предложить мне какой-нибудь способ сократить время загрузки png изображений на сайте, чтобы они загружались быстрее?

Большое спасибо заранее!

Answer 1

Даже если вы будете следовать всем / некоторым из предыдущих советов, хорошим дополнением к вашему рабочему процессу является передача всех ваших PNG через PNGoptimizer .

Это простая программа перетаскиванияудаляет ненужную информацию из ваших PNG.В зависимости от типа изображения, размер экономии варьируется от 5-10% до более 70%.

Answer 2

@ ShrutiJakhete вы можете использовать ленивую загрузку Jquery с вашим HTML5Изображения вне порта просмотра не будут видны, пока вы не прокрутите страницу вниз.Таким образом это сократит время загрузки.Проверьте это http://www.appelsiini.net/projects/lazyload

Answer 3

Photoshop's Posterize вам не поможет;PNG не используют палитру (если вы не выберете PNG-8).Вы можете использовать File-> Export for Web для экспорта меньшего PNG (или GIF).Если ваше изображение содержит альфа-информацию, оно будет потеряно при экспорте в Интернет.PNG-8 и PNG-24 имеют индекс прозрачности.

Answer 4

В зависимости от того, какой у вас сервер, я использую изображение gen для всех своих сайтов .net.

http://our.umbraco.org/projects/website-utilities/imagegen

<img src="/ImageGen.ashx?image=/images/an-image.png&amp;width=50&amp;height=50" width="50" height="56" alt="">

Answer 5

Существует хороший JS-скрипт, облегчающий предварительную загрузку изображений: https://github.com/jussi-kalliokoski/html5Preloader.js

Также помните, что правильное кэширование ОБЯЗАТЕЛЬНО для тяжелых сайтов.У Google есть хорошее введение для этой цели: https://developers.google.com/speed/docs/best-practices/caching

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

Это выглядит довольно аккуратно для посетителя и сокращает время ожидания.

Answer 6

Ваша проблема должна быть в другом месте.

Максимум, 79 КБ x 5 - это меньше, чем 1/2 МБ.Это будет медленная загрузка только при медленном соединении.

Я предлагаю вам установить YSlow (http://developer.yahoo.com/yslow/).Он анализирует веб-страницы и предлагает способы повышения их производительности на основе набора правил для высокопроизводительных веб-страниц .

Answer 7

Попробуйте выполнить предварительную загрузку, используя XHR и некоторые хитрости сервера. Или используйте формат webp .