Optymalizacja obrazu dla usługi SharePoint Online

Szybkość ładowania strony internetowej zależy od łącznego rozmiaru wszystkich składników, które są wymagane do renderowania strony: obrazów, plików HTML, skryptów JavaScript i stylów CSS. Obrazy są doskonałym sposobem na zwiększenie atrakcyjności witryny, ale ich rozmiar może mieć wpływ na wydajność. Wpływ bardzo dużych obrazów można zrównoważyć, optymalizując je za pomocą funkcji kompresji i zmiany rozmiaru oraz używając obiektów graficznych. Za pomocą odwzorowań obrazów w programie SharePoint można przekazać jeden duży obraz i wyświetlać części obrazu, umożliwiając ich ponowne użycie zamiast ponownego ładowania.

Używanie obiektów graficznych do przyspieszania ładowania obrazów w usłudze SharePoint Online

Obiekt graficzny składa się z wielu mniejszych obrazów. Za pomocą stylów CSS wybierasz fragment złożonego obrazu do wyświetlania w konkretnej części strony z pozycjonowaniem bezwzględnym. Po prostu zamiast ładować wiele obrazów przenosisz jeden obraz na stronie i wyświetlasz tylko jego niewielki fragment w małym oknie, w którym użytkownikowi końcowemu jest wyświetlany wymagany fragment obiektu graficznego. Usługa SharePoint Online używa obiektów graficznych do wyświetlania różnych ikon w obiekcie graficznym spcommon.png.

Zagadnienia omawiane w tym artykule

  • Kompresja obrazu

  • Optymalizacja obrazu

  • Odwzorowania obrazów w programie SharePoint

Zrzut ekranu przedstawiający plik spcommon

Może to zwiększyć wydajność, ponieważ zamiast kilku obrazów pobierasz tylko jeden, a następnie zapisujesz go w pamięci podręcznej i używasz go ponownie. Nawet wtedy, gdy obraz nie pozostaje w pamięci podręcznej, posiadanie jednego obrazu zamiast wielu sprawia, że ta metoda zmniejsza całkowitą liczbę żądań HTTP do serwera, co skraca czas ładowania strony. W praktyce jest to forma tworzenia pakietów obrazów. Ta technika jest bardzo użyteczna, jeśli obrazy nie zmieniają się zbyt często, tak jak w przypadku ikon pokazanych w przykładzie z programu SharePoint powyżej. Możesz to łatwo osiągnąć w programie Microsoft Visual Studio, korzystając z Web Essentials — projektu społecznościowego open source innej firmy. Aby uzyskać więcej informacji, zobacz Minifikacja i tworzenie pakietów w usłudze SharePoint Online.

Używanie kompresji i optymalizacji obrazów do przyspieszania ładowania strony w programie SharePoint

Kompresja i optymalizacja obrazów polega na zmniejszaniu rozmiaru pliku obrazów używanych w witrynie. Często najlepszą metodą zmniejszania rozmiaru obrazu jest zmiana jego rozmiaru do maksymalnych wymiarów, w których będzie on wyświetlany w witrynie. Nie ma sensu zamieszczanie obrazu o rozmiarze większym niż ten, w którym będzie on kiedykolwiek wyświetlany. Nadanie obrazom prawidłowych wymiarów przy użyciu edytora obrazów to szybki i łatwy sposób na zmniejszenie rozmiaru strony.

Gdy obrazy mają odpowiedni rozmiar, następnym krokiem jest zoptymalizowanie ich kompresji. Dostępne są różne narzędzia do kompresowania i optymalizacji, takie jak Galeria fotografii i narzędzia innych firm. Istotą kompresji jest możliwie jak największe zmniejszenie rozmiaru pliku bez utraty jakości dostrzegalnej przez użytkowników końcowych Pamiętaj o przetestowaniu plików skompresowanych na ekranie o wysokiej rozdzielczości, aby upewnić się, że nadal będą one dobrze wyglądać.

Przyspieszanie pobierania strony przez używanie odwzorowań obrazów w programie SharePoint

Odwzorowania obrazów to funkcja usługi SharePoint Online, która pozwala na używanie różnych wersji obrazów na podstawie wstępnie zdefiniowanych wymiarów obrazów. Jest to szczególnie ważne, gdy zawartość obrazu jest generowana przez użytkownika lub wymiary obrazu, takie jak szerokość i wysokość, są ustawione na stałe przez styl CSS w witrynie. Nawet gdy obraz jest ustawiony na stałe przez styl CSS, i tak jest ładowany obraz w pełnej rozdzielczości. W takim przypadku rozmiar pliku można zmniejszyć przy użyciu odwzorowań obrazów.

Uwaga : Odwzorowania są dostępne w programie SharePoint po włączeniu publikowania. Publikowanie można włączyć w obszarze Ustawienia > Ustawienia witryny > Zarządzanie funkcjami witryny > Publikowanie w programie SharePoint Server. Inaczej ta opcja nie będzie wyświetlana.

Zmiana rozmiaru przez odwzorowanie obrazu działa w ten sposób, że przyjmuje najmniejszy zdefiniowany wymiar (szerokość lub wysokość), a następnie zmienia rozmiar obrazu, automatycznie dostosowując drugi wymiar według zablokowanego współczynnika proporcji. Domyślnie obraz jest przycinany od środka według pozostałych wymiarów. Jeśli na przykład zdefiniowano odwzorowanie o szerokości 100 pikseli i wysokości 50 pikseli, a oryginalny obraz ma 1000 pikseli szerokości na 800 pikseli wysokości, jego rozmiar zostanie zmieniony tak, że wymiar 800 pikseli będzie teraz miał 50 pikseli, a wymiar 1000 pikseli (teraz 62,5 piksela) zostanie przycięty od środka obrazu.

Poszczególne kroki są dość proste. Jednak aby używać odwzorowań obrazów, odwzorowania muszą już istnieć w witrynie programu SharePoint, zanim dodasz obrazy. Ponadto muszą być włączone funkcje Infrastruktura publikowania w programie SharePoint Server (na poziomie zbioru witryn) i Publikowanie w programie SharePoint Server (na poziomie witryny).

Dodawanie odwzorowania obrazu w celu przyspieszenia ładowania strony

  1. Sprawdź, czy konto użytkownika wykonującego tę procedurę ma co najmniej uprawnienia do projektowania dla witryny najwyższego poziomu w zbiorze witryn oraz czy witryna jest publikowana na stronie internetowej.

  2. W przeglądarce internetowej przejdź do witryny najwyższego poziomu w zbiorze witryn publikowania.

  3. Wybierz ikonę Ustawienia.

  4. Na stronie Ustawienia witryny w sekcji Wygląd i działanie będą widoczne wbudowane odwzorowania obrazu.

    Możesz użyć gotowych odwzorowań lub wybrać pozycję Odwzorowania obrazów w celu utworzenia nowego.

    Zrzut ekranu przedstawiający odwzorowanie obrazu
  5. Na stronie Odwzorowania obrazów wybierz pozycję Dodaj nowy element.

    Zrzut ekranu przedstawiający dodawanie nowego elementu
  6. Na stronie Nowe odwzorowanie obrazu w polu Nazwa wprowadź nazwę odwzorowania.

  7. W polach tekstowych Szerokość i Wysokość wprowadź szerokość i wysokość odwzorowania w pikselach, a następnie wybierz pozycję Zapisz.

    Zrzut ekranu przedstawiający nazwę odwzorowania obrazu

Niestandardowe przycinanie za pomocą odwzorowań obrazu w programie SharePoint

Domyślnie odwzorowanie obrazu jest generowane od środka obrazu. Odwzorowanie obrazu dla pojedynczych obrazów można dostosować przez przycięcie fragmentu obrazu, którego chcesz użyć. Obrazy można przycinać indywidualnie, dla każdego odwzorowania. Przycinanie obrazów przyspiesza ładowanie strony, ponieważ powoduje używanie pamięci podręcznej blogu programu SharePoint do tworzenia wersji obrazu dla każdego odwzorowania. Zmniejsza to obciążenie serwera, ponieważ rozmiar obrazu jest zmieniany tylko raz, a następnie może być przekazywany do użytkowników wiele razy. Aby uzyskać więcej informacji na temat przycinania odwzorowania obrazu, zobacz Przycinanie odwzorowania obrazu.

Rozwijaj swoje umiejętności
Poznaj szkolenia
Uzyskuj nowe funkcje w pierwszej kolejności
Dołącz do niejawnych testerów pakietu Office

Czy te informacje były pomocne?

Dziękujemy za opinię!

Dziękujemy za opinię! Wygląda na to, że połączenie Cię z jednym z naszych agentów pomocy technicznej pakietu Office może być pomocne.

×