Verbetering van de websiteprestaties door middel van beeldoptimalisatie

Bij het ontwikkelen of bijwerken van een website, zouden enkele van uw belangrijkste doelen moeten zijn om een ​​optimale eindgebruikerservaring te bieden en de conversie van websites te verbeteren, aangezien deze twee aspecten van cruciaal belang zijn voor het genereren van inkomsten en het verbeteren van de winstgevendheid van uw bedrijf. Maar een probleem dat u kunt ontdekken, is dat terwijl uw groeiende gebruik van afbeeldingen resulteert in een aantrekkelijker ontwerp, dit de prestaties van uw website negatief zou kunnen beïnvloeden..

Tegenwoordig zijn afbeeldingen goed voor meer dan 60% van de gedownloade inhoud op een webpagina, dus het optimaliseren van afbeeldingen kan aanzienlijke prestatieverbeteringen opleveren. Beeldoptimalisatie is echter zowel een kunst als een wetenschap, waarbij zorgvuldige evaluatie van verschillende parameters en een delicaat evenwicht tussen inhoud, formaat, kwaliteit en afmetingen vereist is.

Of uw webtoepassing door gebruikers geüploade afbeeldingen ondersteunt, u statische afbeeldingen verzendt of profielfoto's van sociale netwerken weergeeft, moet u deze waarschijnlijk aanpassen aan het grafische ontwerp van uw site. In deze zelfstudie verkennen we de functies van Cloudinary's uitgebreide cloudgebaseerde oplossing voor beeld- en videobeheer. U zult zien hoe het u kan helpen bij het optimaliseren van afbeeldingen en uiteindelijk het verbeteren van de prestaties van uw website.

Automatische selectie van het meest efficiënte formaat

Beeldformaten kunnen de laadtijden aanzienlijk beïnvloeden. Maar het handmatig bepalen van de optimale indeling en encoderinstellingen voor de inhoud van elke afbeelding kan complex en inefficiënt zijn.

Cloudinary bepaalt en levert dynamisch elke afbeelding in de meest efficiënte indeling, op basis van beeldinhoud en browserweergave. Afbeeldingen kunnen in verschillende indelingen worden geüpload naar Cloudinary en eenvoudig worden geconverteerd naar andere indelingen. Het kan bijvoorbeeld automatisch afbeeldingen als WebP aan Chrome of JPEG-XR aan Internet Explorer leveren. In sommige gevallen kan PNG worden geselecteerd als u transparantie wilt behouden.

Er zijn vele redenen om het geleverde afbeeldingsformaat te wijzigen:

  • JPEG's voor foto's die u snel wilt laden (of WebP als uw gebruikers zich in een Chrome-browser bevinden of in een mobiele app die u bestuurt).
  • GIF, als de afbeelding een tekening bevat met slechts een paar kleuren.
  • PNG (24 bit) voor illustraties van hoge kwaliteit met een transparante achtergrond.

Als u afbeeldingen in een andere indeling wilt leveren, geeft u de nieuwe indeling op als de bestandsextensie van de bezorgings-URL. Wanneer u Cloudinary SDK's gebruikt, kunt u de nieuwe indeling opgeven als een uitbreiding op de resourcenaam of de parameter format gebruiken.

Voorbeeld:

Zie de demo.

Pas automatisch de compressiekwaliteit aan 

Nauwkeurige aanpassing van de compressiekwaliteit en coderingsinstellingen kunnen de bestandsgrootten aanzienlijk verminderen zonder merkbare achteruitgang van de beeldkwaliteit. Het vinden van de juiste instellingen voor elke afbeelding is echter ingewikkelder dan het klinkt.

Cloudinary automatiseert de bestandsgrootte versus kwaliteitscompromis. Cloudinary's intelligente kwaliteits- en coderingsalgoritmen analyseren elk beeld om de optimale balans te vinden en produceren een perceptueel goed beeld terwijl de bestandsgrootte wordt geminimaliseerd. Door elke afbeelding afzonderlijk te analyseren en het optimale compressieniveau en de instellingen voor beeldcodering te vinden, kan het compressieniveau nauwkeurig worden aangepast, aangevuld met de fijnafstemming van de coderingsinstellingen, en kan de bestandsgrootte aanzienlijk worden verminderd zonder dat het menselijke oog verslechtert.

Voorbeeld:


Zie de demo.

Je kunt de transformatie van de afbeelding hier zien.

Schaal automatisch en snijd afbeeldingen om op elke pagina-indeling te passen

Wanneer afbeeldingen worden afgeleverd bij een grotere afmeting dan de vereiste weergavegrootte, wordt onnodige bandbreedte gebruikt en wordt het laden van de pagina vertraagd. Maar het handmatig creëren van meerdere versies van elke afbeelding om aan verschillende schermresoluties te voldoen, kan veel informatie vergen. Met Cloudinary kunt u de beeldresolutie dynamisch aanpassen aan de optimale versie die overeenkomt met de apparaatresolutie en kijkvensterafmetingen van elke gebruiker, zonder onnodige pixels af te leveren.

Bovendien moeten afbeeldingen vaak worden bijgesneden om te voldoen aan responsieve lay-outs en verschillende apparaatdimensies. Het Cloudinary-bijsnijdende bijsnijdalgoritme maakt gebruik van een combinatie van heuristieken om de regio van interesse in elke afbeelding automatisch te detecteren en deze vervolgens direct bij te snijden.  

Deze intelligente bijsnijdmogelijkheden zorgen ervoor dat de focus van elke afbeelding wordt opgenomen in de resulterende afgeleide afbeelding, niet alleen voor foto's met gezichten, maar voor elk inhoudstype. Elke afbeelding wordt afzonderlijk geanalyseerd om de optimale regio te vinden waarop u kunt focussen.

Originele foto: 

Voorbeeld van verschillende gewasmodi:


Zie de demo.

Als u de afbeelding via de transformatie-URL wilt bekijken, bekijkt u deze hier.

Dynamische URL's

Met Cloudinary kunt u uw afbeeldingen eenvoudig omzetten naar elk gewenst formaat, stijl en dimensie, en ook afbeeldingen optimaliseren om de minimale bestandsgrootte te hebben voor een verbeterde gebruikerservaring en om bandbreedte te besparen.

Het hart van de Cloudinary-oplossing is de mogelijkheid om afbeeldingen te leveren met behulp van dynamische URL's via een snel, wereldwijd content delivery network (CDN). De URL bevat de openbare ID van de aangevraagde afbeelding, plus eventuele optionele transformatieparameters. De openbare ID is de unieke ID van de afbeelding en wordt ofwel opgegeven wanneer de afbeelding wordt geüpload naar uw Cloudinary-account of automatisch toegewezen door Cloudinary. 

Elke transformatie (manipulatie) -instructie kan vóór de openbare ID in de bezorgings-URL worden toegevoegd. Wanneer de URL voor het eerst wordt gebruikt, wordt de afgeleide afbeelding direct gemaakt en aan uw gebruiker geleverd. De afgeleide afbeelding wordt ook in de cache opgeslagen op de CDN en is onmiddellijk beschikbaar voor alle volgende gebruikers die om dezelfde afbeelding vragen.

Conclusie

Deze tips zijn slechts een paar manieren waarop Cloudinary u kan helpen bij het optimaliseren van afbeeldingen voor uw website, om de prestaties en de gebruikerservaring te verbeteren. 

De Cloudinary-website biedt gedetailleerde documentatie over hoe deze functies werken. Je kunt ook blogposts vinden die de 10 belangrijkste fouten verklaren die je kunt maken bij het verwerken van websitebeelden en hoe je deze kunt oplossen, evenals hoe je websitebeelden analyseert om de snelheid te verbeteren en de bandbreedtekosten te verminderen.