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

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

Използване на спрайтове за ускоряване на зареждането на изображение в SharePoint Online

Спрайтът на изображение съдържа много и по-малки изображения. С помощта на CSS можете да изберете част от комбинирано изображение, за да го покажете на конкретна част на страницата с абсолютно позициониране. По принцип премествате едно изображение из страницата, вместо да зареждате няколко изображения, и правите видима само малка част от това изображение в малък прозорец, където се показва задължителната част от изображението на спрайта на крайния потребител. SharePoint Online използва спрайтове, за да покаже различните си икони в спрайта spcommon.png.

Какво е включено тук

  • Компресиране на изображението

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

  • Рендирания на изображения на SharePoint

Екранна снимка на spcommon

Това може да увеличи производителността, тъй като изтегляте само едно изображение вместо няколко и след това кеширате и повторно използвате това изображение. Дори ако изображението не остане кеширано, като имате едно изображение вместо няколко изображения, този метод намалява общия брой на HTTP заявките към сървъра, което ще намали в пъти зареждането на страницата. В действителност това е форма на пакетиране на изображения. Това е много полезен метод, ако изображенията не се променят много често, например за икони, както е показано в примера за SharePoint по-горе. Можете да използвате Web Essentials, проект на друг разработчик с отворен код, базиран на общността, за да постигнете това лесно в Microsoft Visual Studio. За повече информация вижте Минимизиране и групиране в 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. В текстовите полета Ширина и Височина въведете ширина и височина на рендирането в пиксели и след това изберете Запиши.

    Синхронизирана папка на OneDrive за бизнеса в "Предпочитани" във File Explorer

Изрязване по избор с рендирания на изображения в SharePoint

По подразбиране рендирането на изображение се генерира от центъра. Можете да настроите рендирането на изображение за отделни изображения, като изрежете частта от изображението, която искате да използвате. Можете да изрязвате изображенията поотделно за всяко рендиране. Изрязването на изображения ускорява зареждането, като се използва кешът за блогове на SharePoint, за да се създаде версия на изображението за всяко рендиране. По този начин натоварването на сървъра се намалява, защото изображението се преоразмерява само веднъж и след това е готово за използване от потребителите много пъти. Повече информация как да изрежете рендиране на изображение може да видите в Изрязване на рендиране на изображение.

Разширете уменията си
Преглед на обучението
Получавайте първи новите функции
Присъединете се към участниците в Office Insider

Беше ли полезна тази информация?

Благодарим ви за обратната връзка!

Благодарим ви за вашата обратна връзка. Изглежда, че ще бъде полезно да ви свържем с един от нашите агенти по поддръжката на Office.

×