Afbeeldingen optimaliseren voor SharePoint Online

De laadsnelheid van een webpagina is afhankelijk van de totale grootte van alle onderdelen die zijn vereist om de pagina weer te geven, inclusief onder meer afbeeldingen, HTML, JavaScript en CSS. Afbeeldingen zijn geweldig om uw site er aantrekkelijker uit te laten zien, maar hun grootte kan invloed hebben op de prestaties. Door uw afbeeldingen te optimaliseren door middel van compressie, het formaat te wijzigen en sprites te gebruiken, kunt u de nadelige effecten van heel grote afbeeldingen beperken. Als u SharePoint-afbeeldingsweergaven gebruikt, kunt één grote afbeelding uploaden, en delen van de afbeelding weergeven. Daarbij wordt deze opnieuw gebruikt, in plaats van opnieuw geladen.

Sprites gebruiken om afbeeldingen sneller te laden in SharePoint Online

Een afbeeldingssprite bevat verschillende kleinere afbeeldingen. Met behulp van CSS selecteert u het deel van de samengestelde afbeelding dat u in een bepaald gedeelte van de pagina wilt weergeven met absolute plaatsing. In plaats van meerdere afbeeldingen te laden verplaatst u in feite één afbeelding op de pagina en maakt u een kleiner deel van die afbeelding zichtbaar via een klein venster waarin het vereiste deel van de spriteafbeelding wordt weergegeven aan de eindgebruiker. In SharePoint Online worden sprites gebruikt om de verschillende pictogrammen in de sprite spcommon.png weer te geven.

Wat hier wordt besproken

  • Afbeeldingen comprimeren

  • Afbeeldingen optimaliseren

  • SharePoint-afbeeldingsweergaven

Knop Toevoegen aan groep

Hierdoor kunnen de prestaties toenemen, omdat u in plaats van meerdere afbeeldingen slechts één afbeelding downloadt, waarna die afbeelding in de cache wordt opgeslagen en opnieuw wordt gebruikt. Met deze methode van één afbeelding in plaats van meerdere afbeeldingen wordt het totale aantal HTTP-aanvragen voor de server verminderd waardoor de laadtijd van pagina's wordt beperkt, ook al blijft de afbeelding niet in de cache. Dit is eigenlijk een manier van afbeeldingsbundeling. Deze techniek is zeer handig als de afbeeldingen niet vaak worden gewijzigd, zoals de pictogrammen in het hierboven beschreven SharePoint-voorbeeld. U kunt deze techniek eenvoudig in Microsoft Visual Studio toepassen met behulp van Web Essentials, een communitygebaseerd open-sourceproject van een andere leverancier. Zie het Engelstalige artikel Minification and bundling in SharePoint Online voor meer informatie.

Afbeeldingen comprimeren en optimaliseren om pagina's sneller te laden in SharePoint

Als u afbeeldingen comprimeert en optimaliseert, verkleint u de bestandsgrootte van de afbeeldingen die op uw site worden gebruikt. Vaak kunt u een afbeelding het beste verkleinen door het formaat van de afbeelding te wijzigen tot de maximale afmetingen waarin de afbeelding op de site wordt bekeken. Het heeft geen zin een afbeelding groter te maken dan het maximumformaat waarin de afbeelding op de site wordt bekeken. U kunt de grootte van uw pagina snel en eenvoudig beperken met behulp van een afbeeldingseditor, zodat u zeker weet dat de afbeeldingen de juiste afmetingen hebben.

Als de afbeeldingen eenmaal de juiste grootte hebben, is de volgende stap het optimaliseren van de compressie van deze afbeeldingen. Er zijn verschillende hulpprogramma's waarmee u afbeeldingen kunt comprimeren en optimaliseren, waaronder Fotogalerie en hulpprogramma's van andere leveranciers. Het belangrijkste bij compressie is de bestandsgrootte zoveel mogelijk te verkleinen zonder dat hierbij de kwaliteit voor eindgebruikers verloren gaat. Zorg ervoor dat u de gecomprimeerde bestanden op een HD-beeldscherm test om te controleren of ze er nog steeds goed uitzien.

Pagina's sneller downloaden behulp van SharePoint-afbeeldingsweergaven

Afbeeldingsweergaven zijn een functie in SharePoint Online waarmee u verschillende versies van afbeeldingen kunt gebruiken die zijn gebaseerd op vooraf gedefinieerde afbeeldingsafmetingen. Dit is vooral belangrijk als er door de gebruiker gegenereerde afbeeldingsinhoud is of als de afmetingen van de afbeelding (zoals de breedte en de hoogte) worden vastgesteld op basis van de CSS van de site. Zelfs als de afmetingen van een afbeelding worden vastgesteld op basis van de CSS, wordt de afbeelding toch met volledige resolutie geladen. In dit geval kan de bestandsgrootte worden verkleind door gebruik te maken van afbeeldingsweergaven.

Opmerking : Weergaven zijn alleen beschikbaar voor SharePoint als publiceren is ingeschakeld. U kunt publiceren inschakelen onder Instellingen > Site-instellingen > Siteonderdelen beheren > SharePoint Server-publicatie. Anders wordt de optie niet weergegeven.

Voor de formaatwijziging met behulp van afbeeldingsweergaven wordt de kleinste afmeting gebruikt die u definieert (breedte of hoogte), waarna het formaat van de afbeelding zo wordt gewijzigd, dat de andere afmeting automatisch wordt aangepast op basis van de vergrendelde hoogte-breedteverhouding. Standaard wordt de afbeelding vanuit het midden bijgesneden op basis van de overige afmetingen. Stel dat u een weergave van 100 pixels breed bij 50 pixels hoog hebt en de oorspronkelijke afbeelding 1000 pixels breed bij 800 pixels hoog is. Het formaat van de afbeelding wordt gewijzigd zodat de afmeting van 800 pixels nu 50 pixels is en de afmeting van 1000 pixels (nu 62,5 pixels) vanuit het midden van de afbeelding wordt bijgesneden.

De stappen zijn vrij eenvoudig, maar als u voor afbeeldingen de weergaven wilt gebruiken, moeten de weergaven op de SharePoint-site aanwezig zijn voordat u de afbeeldingen toevoegt. Daarnaast moet u ook de functies Publicatie-infrastructuur SharePoint Server (siteverzamelingsniveau) en SharePoint Server-publicatie (siteniveau) inschakelen.

Een afbeeldingsweergave toevoegen om pagina's sneller te laden

  1. Controleer of het gebruikersaccount waarmee deze procedure wordt uitgevoerd, ten minste ontwerpmachtigingen heeft voor de site op het hoogste niveau van de siteverzameling. Controleer ook of de site wordt gepubliceerd naar een webpagina.

  2. Ga in een webbrowser naar de site op het hoogste niveau van de verzameling publicerende sites.

  3. Klik op het pictogram Instellingen.

  4. In de sectie Uiterlijk op de pagina Site-instellingen ziet u de ingebouwde afbeeldingsweergaven.

    U kunt de kant-en-klare weergaven gebruiken of Afbeeldingsweergaven kiezen om een nieuwe weergave te maken.

    Afbeelding van lint in Word
  5. Kies Nieuw item toevoegen op de pagina Afbeeldingsweergaven.

    Het nieuwe deelvenster Opmerkingen
  6. Voer in het vak Naam op de pagina Nieuwe afbeeldingsweergave een naam in voor de weergave.

  7. Voer in de tekstvakken Breedte en Hoogte de breedte en hoogte van de weergave in pixels in en klik vervolgens op Opslaan.

    Gesynchroniseerde map van OneDrive voor Bedrijven in de favorieten van de Verkenner

Aangepaste methode voor het bijsnijden van afbeeldingsweergaven in SharePoint

Standaard wordt een afbeeldingsweergave gegenereerd vanuit het midden van de afbeelding. U kunt de afbeeldingsweergave voor afzonderlijke afbeeldingen aanpassen door het gedeelte van de afbeelding bij te snijden dat u wilt gebruiken. U kunt de afbeeldingen afzonderlijk bijsnijden, per weergave. Als u afbeeldingen bijsnijdt, worden pagina's sneller geladen. Dit komt doordat de cache van de SharePoint-blog wordt gebruikt om voor elke weergave een versie van de afbeelding te maken. Op deze manier wordt de belasting van de server beperkt omdat het formaat van de afbeelding slechts eenmaal wordt gewijzigd en vervolgens meerdere keren voor gebruikers kan worden weergegeven. Zie het Engelstalige artikel Crop an image rendition voor meer informatie over het bijsnijden van afbeeldingsweergaven.

Uw vaardigheden uitbreiden
Training verkennen
Als eerste nieuwe functies krijgen
Deelnemen aan Office Insiders

Was deze informatie nuttig?

Bedankt voor uw feedback.

Hartelijk dank voor uw feedback! Het lijkt ons een goed idee om u in contact te brengen met een van onze Office-ondersteuningsagents.

×