Afbeeldingen voorbereiden voor mobiele apparaten

Moderne webbrowsers en contentmanagementsystemen optimaliseren afbeeldingen zodat ze in elke omgeving kunnen worden weergegeven. Het is echter een best practice om afbeeldingen voor te bereiden die zijn geoptimaliseerd voor elke mogelijke vormfactor en locatie waar een afbeelding kan verschijnen. Focus op drie dingen: Grootte in pixels, afbeeldingsgrootte en kleurruimte.

Kleurruimte in afbeeldingen

Grafisch ontwerpers vertrouwen op twee primaire kleurruimten. Een kleurruimte is een methode waarmee primaire kleuren worden gecombineerd om complexe kleurenregenbogen te vormen.

Voor afdrukken gebruiken ontwerpers kleuren met vier processen, waarbij elke kleur destilleert tot een combinatie van cyaan, magenta, geel en zwart. Soms worden afbeeldingen met vier processen om deze reden CMYK-afbeeldingen genoemd. Beeldschermen op computermonitoren en smartphones zijn afhankelijk van een combinatie van rode, blauwe en groene pixels. Dit RGB-beeld is geoptimaliseerd om de beoogde kleuren nauwkeurig weer te geven op een scherm.

Afbeeldingsgrootte

Afbeeldingen, met name op mobiele platforms, moeten zo klein mogelijk zijn om de kwaliteit af te wegen tegen de downloadsnelheid op mobiele netwerken en de bestandsgrootte tegen de mobiele datalimieten. De meeste programma’s, inclusief de Adobe Creative Cloud-toepassingen, ondersteunen een Export for Web-tool die de afbeelding in verschillende combinaties van resolutie en compressie toont. Kies de afbeelding van de beste kwaliteit met de laagste totale grootte. Vectorafbeeldingen — afbeeldingen die worden berekend en getekend door het apparaat — zijn meestal efficiënter en van hogere kwaliteit dan rasterafbeeldingen (afbeeldingen die pixel voor pixel worden getekend). Voor eenvoudige logo’s, lijntekeningen en grafieken is een vectorversie ideaal. Vectorformaten kunnen niet worden gebruikt met complexe afbeeldingen zoals foto’s, omdat de kwaliteit aanzienlijk afneemt.

Grootte in pixels

Elke afbeelding moet worden aangepast aan het beoogde doel. Hier zijn enkele voorbeelden van afbeeldingsformaten voor populair webgebruik:

• Internetbanneradvertenties zijn vaak 468 pixels bij 60 pixels.
• Facebook-omslagafbeeldingen moeten 851 pixels bij 315 pixels zijn.
• Twitter-profielfoto’s moeten 400 bij 400 pixels zijn.
• Afbeeldingen voor gedeelde links moeten 1200 bij 630 pixels zijn.

Wanneer u foto’s voor specifieke doeleinden ontwikkelt, controleer dan de plaats waar die foto zal verschijnen (zoals een sociale-mediasite of een blog) om de optimale afbeeldingsafmetingen te verifiëren, en pas de grootte dienovereenkomstig aan om te voorkomen dat de afbeelding wordt uitgerekt of bijgesneden. Om pixelvorming te voorkomen, richt u zich op de werkelijke weergavegrootte. Zelfs als een afbeelding de juiste afmetingen heeft, als de afmetingen niet correct zijn, kan het resulterende product er korrelig uitzien als de afbeelding moet worden vergroot om aan de beschikbare ruimte te voldoen.