Что делать с большим изображением, которое значительно замедляет загрузку сайта - PullRequest
Новая
       9

Что делать с большим изображением, которое значительно замедляет загрузку сайта

8 голосов
/ 21 февраля 2010

Я работаю над сайтом, который уже был разработан кем-то другим. Дизайнер использовал большое изображение (900x700 100 КБ), которое содержит большой логотип прямо вверху, а затем фон для двух столбцов.

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

Я подумываю разделить его на два или более изображения, особенно логотип сверху. Сокращает ли такое разбиение изображения время загрузки каким-либо существенным образом?

Спасибо

-edit: Кроме того, все изображения имеют формат .jpg. Поменяет ли это на .gif или .png что-нибудь?

Ответы [ 4 ]

7 голосов
/ 21 февраля 2010

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

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

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

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

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

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

1 голос
/ 27 марта 2010

Сжатие (удаление ненужных метаданных и поиск более эффективного алгоритма сжатия) - неплохое начало для изображения с приличным компрессором изображений. Уменьшение количества цветов, изменение формата (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» в теге body должен быть перенесен (в тег SCRIPT внизу страницы или во внешний файл JavaScript). Также этот код не требует никакой библиотеки JS для запуска; вероятно, он должен использовать наблюдателя событий.

0 голосов
/ 22 февраля 2010

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

0 голосов
/ 22 февраля 2010

Две вещи, которые вы хотите сделать:

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

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

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

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...