Design för hemsida & webshop

Att spara bilder i rätt format och med rätt komprimering kan kännas som en svår uppgift för den som är ovan vid bildhantering för webben. Och även om du själv inte är den som hanterar bilder är det bra att känna till vad som är rätt eller fel. Jag utgår ifrån att du har någon sort programvara som är lämplig för att spara bilder för webben. Photoshop är det vanligaste alternativet men det finns även gratisalternativ som Gimp. Här är lite enkla riktlinjer för hur du väljer rätt format med rätt komprimering. Resultatet av fel bildformat leder till större bilder och onödigt långa laddningstider på din sida.

TIPS: Tänk på att spara dina originalbilder. Komprimering av GIF- och JPG-bilder innebär att man tar bort information i högre eller lägre grad för att göra filstorleken på bilden mindre. Skulle du komprimera bilden för mycket får du förvisso mindre filer men kvalitén blir inte tillräckligt bra.

GIF-formatet
Tumregeln för när du ska välja GIF är när det är bilder som är illustrerade eller har få färger som tex svart text mot en vit botten.GIF-formatet gör en sk indexering av färgerna i din bild och kan bara ta med upp till 256 färger. Att komprimera en GIF-bild innebär att du gör avkall på vissa färger. Du kan till exempel spara en bild med bara 16 färger för att göra den riktigt liten, men oftast finns det fler färger du vill ha med. I 98% av alla fall så blir någonstans mellan 128 och 256 färger lagom för en GIF-bild. Tänk på att eftersom du har så få färger att röra dig med så blir toningar i bilder oftast skiktade d v s du får ingen jämn toning. I Photoshop finns alternativet “Diffusion” när du exporterar för webb, det förbättrar ojämna toningar men kostar lite i filstorlek.

TIPS: Ska du animera en banner måste du använda dig av GIF-formatet eller göra en flashbanner (men det är en helt annan artikel).

GIF och transparens/transparency
Även om antalet färger är en nackdel för GIF-formatet har det i sin tur en stor fördel eftersom formatet har stöd för transparanta färger. När du sparar din bild har du möjlighet att välja vilka färger som ska vara transparanta. Bra när du ska göra grafik som ska fungera mot många olika bakgrundfärger.

TIPS: För att få ett bra resultat måste du se till att kontrasten mellan tex ikongrafiken och den färg du vill göra transparent är så skarp som möjligt. Alternativt får du använda det nyare formatet PNG som har stöd för sk alpha transparency.

JPG-formatet
JPG är det format du ska välja när du vill spara fotografier och andra bilder med många färger i. JPG-formatet hanterar miljontals färger så i princip tappar du ingen färg när du sparar som jpg. Men det är i principens värld…när det väl är dags att spara kommer komprimeringen smygande. JPG komprimeras i en kvalitets-skala från 0-100% där 100% är den bästa kvalité du kan få.

PNG-formatet
PNG-formatet utvecklades från början för att kunna ersätta GIF-formatet. Egentligen är det ett väldigt bra format med överlägsen hantering av transparenta färger med sitt stöd för alpha transparency. Det innebär att man kan göra färger transparanta i olika nivåer och få väldigt snygga övergångar mot den bakgrund dom ska användas mot. Tyvärr har äldre browsers misslyckats med att stödja formatet fullt ut och efter många år står formatet fortfarande i skuggan av GIF. PNG är, med all sin finess, ett ganska avancerat format. Vill du gräva ner dig i tekniska detaljer går det att läsa mer om formatet på http://sv.wikipedia.org/wiki/PNG.

TIPS: Om du ska producera en Flashfil och vill använda dig av bilder som ska vara transparenta är PNG det bästa valet.

Kategori: Grafik |