Online afbeelding vergroten en verkleinen en optimaliseren

Als je een cluster van geweldige foto's hebt, weet ik zeker dat je het graag met je klanten op je website wilt delen. Je kunt een mooie diavoorstelling maken, galerijen maken of gewoon een afbeelding invoegen op een enkele pagina of blog. Welke optie u ook kiest, er is één probleem dat u tegenkwam met 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 zijn.

Pas de grootte aan uw inhoud aan

Pas het formaat van uw afbeeldingen altijd aan de grootte van de inhoud of de breedte van de inhoud aan. Als uw inhoudsgebied bijvoorbeeld beperkt is tot 650 pixels breed, is er geen vereiste om uw afbeelding groter te maken dan 650 pixels, omdat uw pagina slechts maximaal 650 pixels zal weergeven. Als de eigenschap van de afbeeldingsgrootte kleiner of groter is dan de container, gaat de weergavekwaliteit achteruit.

Pas de beeldresolutie 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 met name het geval voor de PDF , vermijd het beschikbaar stellen van PDF voor weblezen die afbeeldingen bevat met een resolutie hoger dan 72 dpi. In dit geval kan de ImageRecycle PDF-optimizer helpen, een PDF optimaliseren met 300dpi-afbeeldingen erin en u kunt 98% van de pdf-grootte besparen met een perfecte kwaliteit om op internet te worden gelezen.

De beste JPG-exportkwaliteit met ImageRecycle

Met behulp van Photoshop is de aanbeveling voor het web om uw JPEG-afbeeldingen op te slaan met max. 20% compressie. Je kunt ook wat testen met verschillende JPEG-deugden die het beste bij je passen. Een globale compressie toepassen is een kwestie van evenwicht tussen grootte en kwaliteit.

Nu met ImageRecycle algoritme voor beeldoptimalisatie, is het proces heel anders. ImageRecycle detecteert de huidige compressieverhouding van afbeeldingen en optimaliseert de afbeelding daarom. Omdat compressie niet op het hele beeld wordt toegepast, zult u oprecht versteld staan ​​van de testbalg.

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

In het onderstaande voorbeeld heb ik 4 jpg-afbeeldingen geëxporteerd met photoshop op kwaliteitsniveau: 60% |
80% | 90% | 100% Dan heb ik afbeeldingen geoptimaliseerd met ImageRecycle , hier is het resultaat van de grootte. Over de kwaliteit zijn de 90/100% iets beter dan de 2 andere. 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 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 uw uiteindelijke clientbrowser. U kunt dat handmatig op elke afbeelding en voor elke grootte doen, of u kunt onze API of CMS-extensie van ImageRecycle gebruiken om de map te selecteren waarin uw uiteindelijke afbeeldingen worden opgeslagen. Voer vervolgens automatische optimalisatie 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

Volgende stap: HTML5 en de element

Responsieve ontwerptechnieken, waaronder mediaquery's, zijn dé manier voor webdesigners om een ​​sitelay-out aan te passen aan een breed scala aan apparaten, van desktops tot smartphones, en deze er altijd scherp uit te laten zien. Het probleem hier is niet de weergave, maar de prestaties, dit is de desktopafbeelding die wordt weergegeven en geladen op smartphone en tablet.

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

Code uittreksel:

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