Image compressie

Hangt van het doel van je imgage af.
zo kan je een foto niet echt een png van maken omdat je dan echt kwaliteitsverlies hebt. Maar met een getekende image kan dit weer wel.

Citaat

zo kan je een foto niet echt een png van maken omdat je dan echt kwaliteitsverlies hebt.

Kwaliteitsverlies bij een lossless compressie...? PNG heeft juist geen kwaliteitsverlies

Edit Over het algemeen gebruik je PNG of GIF voor schetsen, tekst en iconen omdat deze van zichzelf al een klein formaat hebben (weinig kleur / klein opervlakte). Het verschil tussen PNG en GIF zit hem niet in kwaliteit alleen beperkt GIF zich tot 256 kleuren.

Voor foto's en grote afbeeldingen wordt JPG geadviseerd omdat hiervoor deze compressie techniek erg effectief is MAAR JPG heeft wel kwaliteitsverlies.

Samengevat:

GIF
Kwaliteitsverlies: Nee (Lossless compressie)
Beperkt in kleuren: Ja, 256 kleuren
Gebruiken voor: Schetsen, Teksten, Iconen/Logos, Kleine afbeeldingen

PNG
Kwaliteitsverlies: Nee (Lossless compressie)
Beperkt in kleuren: Nee
Gebruiken voor: Schetsen, Teksten, Iconen/Logos, Kleine afbeeldingen

JPG
Kwaliteitsverlies: Ja (Lossy compressie)
Beperkt in kleuren: Nee
Gebruiken voor: Grote afbeeldingen en foto's

Mijn vuistregel is de volgende:

Beweegt de foto? => gif

Is de foto transparant? => png

Is de foto niet transparant?
=> Gebruikt de foto veel kleuren (foto genomen van je vriendin) => jpg
=> Gebruikt de foto weinig kleuren (bv een pattern) => jpg met een colormap

Bij dat laatste maakt hij een map aan met alle kleuren en verwijst hij in de afbeelding gewoon naar die map.
Daardoor is de afbeelding kleiner.
De header balk van ICTscripters heb ik bv bewust zo gedaan, is puur een grijze balk met pattern in.

Na verdere vraag via pb:
Voor volgende url
Jobs Rome
zou ik doen:

game2.pancakeapps.com/css/../img/jobs/rome/02.png
=> jpg, optimized for web (dus iets van een 80% kwaliteit)

url("../icons/money--plus.png")
=> icoontjes zoals deze kunnen best png blijven, want ze zijn transparant.
- Indien ze ronde hoeken gebruiken, gebruik je best hoge kwaliteit png
- indien het bv gewoon een rode vierkant zou zijn, kun je lage kwaliteit
png nemen, want er is maar 1 kleur en geen ronde hoeken