Оптимизация изображений для SharePoint Online

Скорость загрузки веб-страницы зависит от общего размера всех компонентов, необходимых для ее отрисовки, включая изображения, HTML, JavaScript и CSS. Изображения позволяют сделать сайт более привлекательным, но их размер может повлиять на производительность. Благодаря оптимизации изображений посредством сжатия и изменения размера и использованию спрайтов вы можете нейтрализовать влияние очень больших изображений. Используя представления изображений в SharePoint, вы можете передать одно изображение и отображать его части. Это позволит вам многократно использовать одно изображение, не загружая его каждый раз заново.

Ускорение загрузки изображений в SharePoint Online с помощью спрайтов

Спрайт содержит множество небольших изображений. Используя CSS, вы выбираете часть составного изображения для отображения в фиксированном положении в определенной области страницы. По сути вы перемещаете по странице одно изображение, вместо того чтобы загружать несколько, и делаете видимой его малую часть через небольшое окно, в котором для пользователя отображается нужная часть спрайта. Таким способом в SharePoint Online отображаются различные значки спрайта spcommon.png.

В этой статье рассматриваются:

  • Сжатие изображения

  • Оптимизация изображения

  • Представления изображений в SharePoint

Снимок экрана: общий спрайт

Это позволит вам увеличить производительность, поскольку вы загружаете только одно изображение, которое затем можно кэшировать и многократно использовать. Даже если изображение не остается в кэше, использование одного изображения вместо нескольких позволяет сократить общее количество HTTP-запросов к серверу, уменьшая тем самым время загрузки страницы. Фактически это форма объединения изображений. Этот метод очень удобен для изображений, которые не подвержены частым изменениям, например для значков, как показано в приведенном выше примере для SharePoint. Вы можете узнать, как легко достичь того же в Microsoft Visual Studio с помощью Web Essentials — стороннего проекта с открытым исходным кодом. Дополнительные сведения см. в статье Минификация и объединение в SharePoint Online.

Ускорение загрузки страниц в SharePoint с помощью сжатия и оптимизации

Методы сжатия и оптимизации позволяют уменьшить размер файла изображения, которое вы используете на сайте. Зачастую лучший способ уменьшить размер изображения — это привести его к максимальным размерам, с которыми оно будет отображаться для просмотра на сайте. Не имеет смысла делать изображение больше того размера, с которым его когда-либо будут просматривать. Чтобы уменьшить размер страницы, быстрее и проще всего настроить правильные размеры изображения в редакторе изображений.

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

Ускорение загрузки страниц с помощью представлений изображений в SharePoint

Представления изображений — это функция в SharePoint Online, которая позволяет создавать разные версии изображений на основе заранее заданных размеров. Это особенно важно в тех случаях, когда контент изображения формируется пользователем или когда размеры изображения, такие как ширина и высота, зафиксированы на сайте с помощью CSS. Даже если изображение зафиксировано с помощью CSS, все равно оно загружается с полным разрешением. В этом случае можно уменьшить размер файла с помощью представления изображения.

Примечание : Представления доступны для SharePoint только при включенной публикации. Чтобы включить публикацию, выберите Параметры > Параметры сайта > Управление компонентами сайтов > Публикация SharePoint Server. Иначе параметр не появится.

При изменении размера представления изображения берется наименьший заданный вами размер (ширина или высота), а затем другой его размер автоматически изменяется в соответствии с фиксированной пропорцией. По умолчанию изображения обрезаются от центра по оставшимся размерам. Например, если вы задали представление шириной 100 и высотой 50 пикселей, а исходное изображение имеет ширину 1000 и высоту 800 пикселей, то после изменения размера высота (800 пикселей) составит 50 пикселей, а ширина (1000 пикселей), равная теперь 62,5 пикселя, будет обрезана от центра изображения.

Действия относительно просты, но для того чтобы использовать представления, их нужно поместить на сайт SharePoint до добавления изображений. Необходимо также включить компоненты "Инфраструктура публикации SharePoint Server" (на уровне семейства веб-сайтов) и "Публикация SharePoint Server" (на уровне сайта).

Добавление представления изображения для ускорения загрузки страницы

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

  2. В веб-браузере перейдите на сайт верхнего уровня семейства веб-сайтов публикации.

  3. Выберите значок Параметры.

  4. На странице Параметры сайта в разделе Внешний вид и функции вы увидите встроенные представления изображений.

    Вы можете использовать стандартные представления или выбрать элемент Представления изображений, чтобы создать новое представление.

    Снимок экрана: представление изображений
  5. На странице Представления изображений выберите команду Добавить элемент.

    Снимок экрана: команда "Добавить новый элемент"
  6. На странице Новая визуализация изображения в поле Имя введите название представления.

  7. В текстовых полях Ширина и Высота введите ширину и высоту (в пикселях) представления и нажмите кнопку Сохранить.

    Снимок экрана: имя представления изображения

Настраиваемая обрезка при использовании представлений изображений в SharePoint

По умолчанию представление формируется от центра изображения. Вы можете настроить представление для отдельного изображения, вырезая ту его часть, которую хотите использовать. Можно обрезать изображения по отдельности для каждого представления. Обрезка изображений ускоряет загрузку страницы за счет того, что версия изображения для каждого представления создается в кэше блога SharePoint. Таким образом снижается нагрузка на сервер, поскольку размер изображения изменяется только однажды, а затем его можно использовать многократно. Дополнительные сведения об обрезке представлений изображений см. в статье Обрезка представления изображения.

Совершенствование навыков
Перейти к обучению
Первоочередный доступ к новым возможностям
Присоединиться к программе предварительной оценки Office

Были ли сведения полезными?

Спасибо за ваш отзыв!

Благодарим за отзыв! Возможно, будет полезно связать вас с одним из наших специалистов службы поддержки Office.

×