Képet hogy lehet optimalizálni?

Attól függ, milyen képről van szó (egy rajzolt logó? egy fotó?), mit értesz "optimalizáláson", illetve hogy "jól nézzen ki arányaiban"?

Például a rajzolt logókat - lásd itt, a gyakorikérdések oldalán az ikonokat - vektorizálhatsz és SVG formátumban elmentve egyrészt szabadon méretezhetőek lesznek (nem lesznek pixelesek) másrészt megfelelő optimalizálással kevesebb helyet foglalnak (a GYK esetén ez kb. 40% lenne - és akkor még nem számoltuk bele a szöveges formátumú állományok [így az SVG is] webszerver általi gzip-tömörítéséből származó nyereségét).

Lehet optimalizálni a metaadatok (EXIF, IPTC, ICC, XMP,...) törlésével - így kevesebb helyet foglalnak.

PNG esetén veszteségmentesen lehet állítani a tömörítési szintet ( [link] ), csökkenheted a színek számát (poszterizáció), a 24 bites színtér helyett alkalmazhatsz indexeltet (akár ditheringgel is: [link] ), satöbbi: [link] satöbbi: [link] satöbbi: [link]

JPEG esetén főleg a minőség állításával lehet optimalizálni.

Sok, kisebb méretű - főleg rajzolt PNG/SVG képeknél - kép egy oldalon való megjelenítésénél lehet használni a CSS-sprite technikát:

[link]

ezzel takarékoskodva a HTTP-fejlécen.

Úgy hogy a képről kiretusálod a nagyit és a barátod húgának a topless képével helyettesíted.. ;P Nekem ez az optimalizálás.

De te mit értesz optimalizáláson?

Így:

(CSS)

img {

max-width: 100%

}