Online formaat en optimalisatie van afbeeldingen

Als u een verzameling fantastische foto's heeft, weet ik zeker dat u deze graag met uw klanten op uw website wilt delen. Je kunt een mooie diavoorstelling maken, galerijen maken of eenvoudigweg een afbeelding invoegen op een enkele pagina of blog. Welke optie u ook kiest, er zal altijd één probleem zijn dat u tegenkomt bij een niet-gespecialiseerde inhoudseditor: het formaat van de afbeelding wijzigen.

Hieronder vindt u enkele aanbevelingen voor het wijzigen van het formaat van afbeeldingen die nuttig voor u zullen zijn.

Pas de grootte aan uw inhoud aan

Pas het formaat van uw afbeeldingen altijd aan op basis van de grootte van de inhoud of de breedte van de inhoud. Als uw inhoudsgebied bijvoorbeeld beperkt is tot 650 pixels breed, hoeft u uw afbeelding niet groter te maken dan 650 pixels, omdat uw pagina slechts maximaal 650 pixels weergeeft. Als de eigenschap afbeeldingsgrootte kleiner of groter is dan de container, zal de weergavekwaliteit verslechteren.

Pas de afbeeldingsresolutie aan voor internet

Er zal geen enkele indruk van "per inch" zijn in een websiteoverzicht. PPI, dat wil zeggen pixels per inch en DPI, dat is dots per inch, is niet relevant wanneer u uw foto bewerkt of het formaat ervan wijzigt voor welk doel dan ook, zoals e-mailen, bloggen of delen via sociale media. Behalve voor afdrukken, kunt u op het scherm geen onderscheid maken in beeldfunctie of kwaliteit.

Dit is vooral het geval voor de PDF . Vermijd het beschikbaar maken van PDF's voor weblezen die afbeeldingen bevatten met een resolutie hoger dan 72 dpi. In dit geval kan de ImageRecycle PDF-optimalisatie helpen: optimaliseer een PDF met 300dpi-afbeeldingen erin en u kunt 98% van de pdf-grootte opslaan met een perfecte kwaliteit om op internet te lezen.

De beste JPG-exportkwaliteit met ImageRecycle

Als u Photoshop gebruikt, is de aanbeveling voor internet om uw JPEG-afbeeldingen op te slaan met max. 20% compressie. U kunt ook een aantal tests uitvoeren met diverse JPEG-functies die voor u het beste werken. Het toepassen van een mondiale compressie is een kwestie van evenwicht tussen omvang en kwaliteit.

Met ImageRecycle algoritme voor beeldoptimalisatie is het proces heel anders. ImageRecycle detecteert de huidige beeldcompressieverhouding en optimaliseert op basis daarvan de afbeelding. Omdat er geen compressie op het hele beeld wordt toegepast, zul je oprecht versteld staan ​​van de onderstaande test.

Houd er rekening mee: hoe minder de originele afbeelding wordt gecomprimeerd, hoe beter de optimalisatie en grootte zullen zijn.

In het onderstaande voorbeeld heb ik 4 jpg-afbeeldingen geëxporteerd met Photoshop op kwaliteitsniveau: 60% |
80% | 90% | 100% Vervolgens heb ik afbeeldingen geoptimaliseerd met ImageRecycle , hier is het resultaat van de grootte. Wat betreft de kwaliteit zijn de 90/100% iets beter dan de 2 andere. De les hier is: exporteer uw jpg-afbeeldingen zo min mogelijk gecomprimeerd, ImageRecycle doet de rest!

Optimaliseer de uiteindelijke afbeeldingen

Afhankelijk van de website die u gebruikt, kunnen dezelfde afbeeldingen worden weergegeven op verschillende pagina's met verschillende formaten. Dit is typisch iets dat je kunt vinden op een e-commerce met Slider, productlijst, productdetails,...
Het formaatwijzigingsproces wordt meestal gedaan door een online php-bibliotheek zoals GD. Zorg ervoor dat de kwaliteit en het gewicht van uw ORIGINELE versus FINALE gebruikersafbeeldingen goed zijn. Vertrouw online bibliotheken en cachegenerator niet, anders kunt u een probleem hebben met de kwaliteit en grootte. Als uw originele afbeelding al aan uw kant is geoptimaliseerd (door een fijnafstemming te maken tussen kwaliteit, kleuren, compressie) om bandbreedte en het laden van pagina's te besparen, met sommige webextensies die de grootte van bibliotheken wijzigen, kunt u dat allemaal verliezen!

De oplossing:

• Pas optimalisatie toe op de afbeelding die wordt weergegeven in de browser van uw uiteindelijke client. U kunt dat handmatig doen op elke afbeelding en voor elk formaat, of u kunt onze API- of CMS-extensie van ImageRecycle gebruiken om de map te selecteren waarin uw definitieve afbeeldingen worden opgeslagen. Voer er vervolgens automatische optimalisatie op uit.
• Gebruik onze resizer voor originele afbeeldingen. U kunt serveropslag besparen, uw afbeeldingen sneller manipuleren en meestal heeft u geen afbeelding nodig met een breedte groter dan 1600px op de uiteindelijke weergave

Wat is het volgende: HTML5 en de element

Responsieve ontwerptechnieken die mediaquery's omvatten, zijn voor webontwerpers de manier om de lay-out van een site aan te passen aan een breed scala aan apparaten, van desktops tot smartphones, en deze er consistent scherp uit te laten zien. Het probleem hier is niet het display maar de prestaties, dit is de desktopafbeelding die wordt weergegeven en geladen op smartphone en tablet.

De Het HTML5-element probeert dit probleem op te lossen. Het voordeel van native geoptimaliseerde beeldbronnen is de laadtijd - vooral belangrijk voor gebruikers met langzamere mobiele internetverbindingen. De element maakt een echte dynamische aanpassing mogelijk door simpelweg een HTML-instructie aan de browser te geven.

Code uittreksel:

De limiet op dit moment is dat hiervoor een zeer recente Chrome-versie (39) en een aantal JS nodig zijn om goed te kunnen werken. In de nabije toekomst kunnen we, met deze technologie gekoppeld aan een beeldoptimalisatie, het beste verwachten voor de laadtijd van de website.