Что сделать с большим изображением, это замедляет веб-сайт, загружающийся значительно

Что стоит попробовать:

1. Повторяющийся фон : если часть его можно разделить на повторяющееся изображение, вы можете уменьшить размер файла так много (разделите изображение на части, которые не повторяются, такие как логотип, и части, которые повторяются, а затем используйте CSS, чтобы повторить его в качестве фона).

2. Кэширование : вам следует проверить, правильно ли кэшируется изображение. Нет причин, по которым он должен перезагружаться при каждом запросе страницы. Если заголовки HTTP правильно разрешают кеширование, браузер не будет запрашивать его снова, пока изображение не будет очищено из его кеша.

   См. http://www.mnot.net/cache_docs/ для получения некоторой информации об управлении кешем с помощью заголовков HTTP.

   Используйте панель инструментов веб-разработчика для Firefox, чтобы проверить заголовки изображения (нажмите URL-адрес изображения, затем нажмите Информация > Просмотреть заголовки ответов )

3. ​​Качество файла или тип : Кроме того, вы можете использовать Photoshop для повторного сохранения изображения в другом формате или в более низком качестве.Изображения GIF и JPG могут иметь очень разные размеры файлов для одного и того же изображения в зависимости от содержимого изображения (GIF очень хорош для графики с ограниченными и / или повторяющимися цветами, особенно когда большие части одного цвета проходят в последовательных горизонтальных пикселях) . Если изображение похоже на фотографию, JPG может быть очень хорошим, потому что высокое сжатие может быть замаскировано в очень подробных изображениях.

Вам нужно сделать две вещи:

1. Конвертировать его в PNG (в среднем на 10-30% меньше, чем GIF); и
2. Эффективное кеширование.

Способ кэширования - это версия и использование заголовка Expires из далекого будущего. Для управления версиями я обычно просто использую mtime (время последнего изменения) файла в качестве строки запроса:

body { background-image: url(/images/background.png?1232343455); }

См. Советы по ускорению: добавление заголовков Future Expires для добавления заголовка Expires. Вы можете сделать это с помощью сценария или конфигурации веб-сервера. Причина, по которой вам нужна версия, заключается в том, что вы можете изменить ее, чтобы принудительно перезагрузить файл, в противном случае вам нужно переименовать его, когда вы захотите его изменить.

Таким образом, фон будет загружен только один раз. Разделение файла на несколько фактически ухудшит ситуацию, поскольку браузеры, как правило, ограничивают количество одновременных загрузок, и вы будете загружать больше данных в целом (больше заголовков HTTP плюс накладные расходы на файл изображения).

В абзаце сразу после этого кода объясняется. Существует сочетание пакетных и лексических переменных в одной области:

Остальная часть сокращения работает как сортировка, помещая два элемента в пакетные переменные $ a и $ b. Грэм определяет лексические переменные с этими именами и немедленно назначает typeglobs для $ a и $ b в вызывающем пакете с помощью символьных ссылок. После этого значения $ a и $ b являются лексическими версиями. Когда он вызывает аргумент подпрограммы & {$ code} (), этот код просматривает переменные пакета, которые действуют, когда я написал подпрограмму. Понял? Внутри уменьшите, я использую лексические версии, но внутри $ code, я использую версии пакета из вызывающего пакета. Вот почему Грэм сделал им псевдонимы друг друга.

https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Global_Objects/String/Trim

Это довольно недавнее дополнение к javascript, не поддерживаемое IE.

Размещение образа на CDN также может помочь (наряду с другими упомянутыми), поскольку люди могут загружать изображения с CDN быстрее, чем ваш сервер.

Обработка (удаление ненужных метаданных и поиск более эффективного алгоритма сжатия) изображения с помощью подходящего компрессора изображений - хорошее начало. Уменьшение количества цветов, изменение формата (GIF или PNG24 на PNG8), когда это возможно.

Это может быть совершенно очевидно, но ... отложите это до полной загрузки страницы (если контраст цветов в фоновом изображении не нужен, чтобы сделать текст переднего плана читаемым).

Простой способ сделать это - сделать селектор CSS для фонового изображения зависимым от класса в теле, например:

...
    <style type="text/css">
    /*<![CDATA[*/
        body.page-loaded{background:url(/path/to/image.jpg)}
    /*]]>*/
    </style>
</head>

<body class="page-loaded" onload="document.body.className+=' page-loaded';"> 
...

Конечно, атрибут «onload» в теге тела должен быть перенесен (в Тег SCRIPT внизу страницы или во внешнем файле JavaScript). Также этот код не требует для запуска какой-либо библиотеки JS; вероятно, следует использовать наблюдателя за событиями.