Online afbeeldingen verkleinen en optimaliseren

Als je een verzameling prachtige foto's hebt, wil je die vast graag delen met je klanten op je website. Je kunt een mooie diavoorstelling maken, galerijen creëren of gewoon een afbeelding invoegen op een enkele pagina of in een blog. Welke optie je ook kiest, er is één probleem waar je tegenaan loopt bij het gebruik van een contenteditor die niet gespecialiseerd is in dit onderwerp: het formaat van de afbeelding aanpassen.

Hieronder vindt u enkele aanbevelingen voor het aanpassen van de afmetingen van afbeeldingen die u wellicht van pas komen.

Pas de grootte aan aan uw inhoud

Pas de afmetingen van je afbeeldingen altijd aan de grootte of breedte van de content aan. Als je contentgebied bijvoorbeeld beperkt is tot 650 pixels breed, hoef je de afbeelding niet groter te maken dan 650 pixels, omdat je pagina dan slechts tot 650 pixels wordt weergegeven. Als de afbeelding kleiner of groter is dan de container, zal de weergavekwaliteit verslechteren.

Pas de beeldresolutie aan voor het web

Er zal nergens op een website een vermelding van "per inch" te vinden zijn. PPI (pixels per inch) en DPI (dots per inch) zijn niet relevant wanneer u uw afbeelding bewerkt of het formaat ervan aanpast voor bijvoorbeeld e-mail, blogs of sociale media. Behalve bij afdrukken, zult u op een scherm geen verschil zien in beeldkwaliteit of -eigenschappen.

Dit geldt met name voor PDF's. Vermijd het beschikbaar stellen van PDF's voor weblezen die afbeeldingen bevatten met een resolutie hoger dan 72 dpi. In dit geval kan de ImageRecycle PDF-optimizer uitkomst bieden: optimaliseer een PDF met afbeeldingen van 300 dpi en bespaar 98% van de bestandsgrootte met behoud van een perfecte kwaliteit voor weblezen.

De beste JPG-exportkwaliteit met ImageRecycle

Voor het web wordt in Photoshop aangeraden om JPEG-afbeeldingen op te slaan met een maximale compressie van 20%. Je kunt ook experimenteren met verschillende JPEG-compressie-instellingen om te zien welke voor jou het beste werkt. Het toepassen van een algehele compressie is een kwestie van balans tussen bestandsgrootte en kwaliteit.

Met ImageRecycle -algoritme voor beeldoptimalisatie is het proces heel anders. ImageRecycle detecteert de huidige beeldcompressieverhouding en optimaliseert het beeld op basis daarvan. Omdat de compressie niet op het hele beeld wordt toegepast, zult u versteld staan ​​van de onderstaande test.

Houd er rekening mee: hoe minder de originele afbeelding gecomprimeerd is, hoe beter de optimalisatie en hoe kleiner de bestandsgrootte.

In het onderstaande voorbeeld heb ik 4 jpg-afbeeldingen geëxporteerd met Photoshop met de volgende kwaliteitsniveaus: 60% | 80% | 90% | 100%.
Vervolgens heb ik de afbeeldingen geoptimaliseerd met ImageRecycle . Dit is het resultaat qua grootte. Qua kwaliteit zijn de afbeeldingen met 90% en 100% iets beter dan de andere twee. De les hier is: exporteer je jpg-afbeeldingen zo min mogelijk gecomprimeerd, ImageRecycle doet de rest!

Optimaliseer de uiteindelijke afbeeldingen

Afhankelijk van de website die je beheert, kunnen dezelfde afbeeldingen op verschillende pagina's in verschillende formaten worden weergegeven. Dit zie je typisch bij webshops met sliders, productlijsten, productdetails, enzovoort.
Het formaat aanpassen wordt meestal gedaan door een online PHP-bibliotheek zoals GD. Controleer de kwaliteit en bestandsgrootte van je ORIGINELE afbeeldingen en die van de uiteindelijke afbeeldingen. Vertrouw niet blindelings op online bibliotheken en cachegeneratoren, want dan kun je problemen krijgen met de kwaliteit en de grootte. Als je originele afbeelding al geoptimaliseerd is (door een goede balans te vinden tussen kwaliteit, kleuren en compressie) om bandbreedte en laadtijd te besparen, kun je met sommige webextensies die afbeeldingen aanpassen, al die optimalisatie tenietdoen!

De oplossing:

• Optimaliseer de afbeelding die in de browser van uw uiteindelijke klant wordt weergegeven. U kunt dit handmatig doen voor elke afbeelding en elk formaat, of u kunt onze API of de CMS-extensie van ImageRecycle gebruiken om de map te selecteren waarin uw uiteindelijke afbeeldingen zijn opgeslagen. Voer vervolgens automatische optimalisatie uit.
• Gebruik onze tool voor het verkleinen van originele afbeeldingen. Zo bespaart u serveropslag, kunt u uw afbeeldingen sneller bewerken en heeft u meestal geen afbeelding nodig met een breedte van meer dan 1600px voor de uiteindelijke weergave

Wat volgt: HTML5 & de<picture> element

Responsieve ontwerptechnieken, waaronder mediaqueries, stellen webdesigners in staat om de lay-out van een website aan te passen aan een breed scala aan apparaten, van desktops tot smartphones, en ervoor te zorgen dat deze er consistent scherp uitziet. Het probleem zit hem hier niet in de weergave, maar in de prestaties: de desktopafbeelding wordt weergegeven en geladen op smartphones en tablets.

De<picture> Het HTML5-element probeert dit probleem op te lossen. Het voordeel van native geoptimaliseerde afbeeldingsbronnen is de laadtijd, wat vooral belangrijk is voor gebruikers met een trage mobiele internetverbinding.<picture> Met dit element is een dynamische formaatwijziging mogelijk door simpelweg een HTML-instructie aan de browser te geven.

Codefragment:

De huidige beperking is dat hiervoor een zeer recente Chrome-versie (39) en wat JavaScript nodig zijn om het goed te laten werken. In de nabije toekomst, wanneer deze technologie wordt gecombineerd met een beeldoptimalisatieprogramma, kunnen we de laadtijd van de website aanzienlijk verbeteren.