Moderne webbläsare och innehållshanteringssystem optimerar bilder för att visas i alla miljöer. Det är dock bäst att förbereda bilder som är optimerade för varje möjlig formfaktor och plats som en bild kan visas. Fokusera på tre saker: bildupplösning, storlek och färgrymd.
Färgutrymme i bilder
Grafiska formgivare förlitar sig på två primära färgrymder. En färgrymd är en metod genom vilken primärfärger kombineras för att bilda komplexa regnbågar av färg.
Använd RGB-läget när du förbereder bilder för mobila enheter. Skärmar på datorskärmar och smartphones förlitar sig på en kombination av röda, blå och gröna pixlar. Denna RGB-bild är optimerad för att exakt återge de avsedda färgerna på en skärm.
För tryck använder designers en fyrfärgsprocess, där varje färg destilleras till en kombination av cyan, magenta, gult och svart. Ibland kallas fyrfärgsbilder av denna anledning som CMYK-bilder.
Bildupplösning
Bilder, särskilt på mobila plattformar, bör dimensioneras så små som möjligt för att balansera kvalitet mot nedladdningshastighet på mobila nätverk och filstorlek mot mobildatatak.
De flesta program, inklusive Adobe Creative Cloud-applikationerna, stöder ett Export for Web-verktyg som visar bilden i olika kombinationer av upplösning och komprimering. Välj den bästa bilden med den lägsta totala storleken.
Bildstorlek i pixlar
Varje bild bör ha en storlek för sitt avsedda syfte. Här är några exempel på bildstorlekar för populära webbanvändningar:
- Internetbannerannonser är ofta 468 pixlar gånger 60 pixlar.
- Facebook-omslagsbilder bör vara 851 pixlar gånger 315 pixlar.
- Twitter-profilfoton bör vara 400 pixlar gånger 400 pixlar.
- Bilder för delade länkar bör vara 1200 pixlar gånger 630 pixlar.
När du arbetar med foton för specifika ändamål, kontrollera platsen där bilden kommer att visas (som en webbplats på sociala medier eller en blogg) för att verifiera de optimala bildmåtten och storleksanpassa därefter för att undvika att töja eller trimma bilden.
För att undvika pixelering, sikta på den faktiska skärmstorleken. Även om en bild är rätt dimensionerad, om den inte har rätt storlek, kan den resulterande produkten se pixlad ut om bilden måste skalas upp för att möta det tillgängliga utrymmet.
Om vektorbilder
Vektorbilder – bilder som beräknas och ritas av enheten – är vanligtvis mer effektiva och har högre kvalitet än rasterbilder (bilder ritade en pixel i taget) eftersom de kan förstoras och förminskas utan att bildkvaliteten påverkas. För enkla logotyper, streckteckningar och grafer är en vektorversion idealisk. Vektorformat används inte för foton.