Nackdel med PNG-format?

PNG filer kan bli stora om du behöver genomskinlighet (rundade hörn) eller använder 24-bitars färger. Filen blir större ju mer komplex bilden är att spara eftersom komprimeringen är förlustfri. Ibland är det smartara att använda sig av jpg om bilderna är av fotografisk natur och inte sådant som jpg komprimering förstör. GIF finns det ingen anledning att använda, förutom till enkla animationer.

Jag skulle rekommendera dig att testa CSS3 flör att skapa rundade hörn och JPG istället för PNG till själva bilden. Då blir hörnen snyggare på datorer med högupplösta skärmar (vissa tablets/mobiler med "retina" skärm eller motsvarande, samt nyare datorer eller användare som kör med 150% storlek i sitt OS).

Kolla http://cssround.com/ för inspiration.

Du borde tänka längre. Hur gör du när du vill uppdatera sidan i framtiden och tex. byta bakgrundsfärg (om du "hårdkodat" bakgrund i hörnen) eller byta stolek på effekten? Att då behövea ladda ett macro och köra om på orginalfilerna kan strula på massa sätt.

Undvik att använda PNG för bilder med fotografiskt innehåll. Använd det när du har bilder med ett lågt antal färger, designelement med transparens/väldigt skarpa kanter eller absolut inte kan skapa rundade hörn/dylikt med CSS av någon anledning.

PNG komprimerar utan att förlora kvalitet (vilket innebär väldigt stora bilder) och idealet för i stort sett alla fotografiska bilder på webben är att spara i JPG och komprimera till, säg, 50%. Jag lovar, du märker ingen skillnad på kvaliteten på bilderna och du kan ta bort upp till 80-90% av filstorleken mot en vanlig, JPG sparad med 100% kvalitet.

Jag har inte möjlighet att ge exempel med bilder just nu, men jag gjorde ett snabbt test med en bild för att kunna bidra med lite siffror iallafall:

Orginalbild (JPG med dimensionerna 800 x 1067px och 100% kvalitet) var 1 MB stor. (som referens så ser bilden ut så här, men jag har ingen kontroll över hur imgur komprimerar).

PNG: 1.71 MB
JPG med 50% kvalitet: 226 kB
JPG med 50% kvalitet och Photoshops save for web: 222 kB (det är dock mycket större skillnad på mindre filer - använd alltid save for web!)

Det gör inget om du inte har stenkoll på filstorlekar, tänk bara att mindre är bättre sålänge det inte blir märkbart dålig kvalitet. En bild på 1 MB är väldigt, väldigt stor och det finns mängder av goda anledningar till att pressa filstorlekar så mycket som möjligt. Varje kilobyte räknas.

För att lösa ditt problem: Som folk redan skrivit, använd helst CSS border-radius på bilden (eller lägg bilden som bakgrund i en div och lägg border-radius på diven för bättre bakåtkompitabilitet). Om du inte kan, vill eller vågar (besökare med äldre webbläsare kommer inte se runda hörn), gör runda hörn direkt på bilden, men försök fortfarande att använda JPG. Om bakgrunden bilden med runda hörn ligger på är enfärgad så behöver du inte ha genomskinliga hörn...

IE 7-8, Opera Mini 5.0-7.0.

EDIT. Såklart finns det äldre webbläsare som inte stödjer border-radius men det finns i stort sätt ingen mening med att stödja dem.
Känner du dig tvungen att t.ex stödja IE7-8 så kan du alltid använda dig av pollyfills.

http://caniuse.com/

Skriv bara in det CSS-property du undrar om i sökrutan (eller klicka i listan) så får du kompitabilitetsinformation och kända problem.

Just border-radius på bilder fungerar fr.o.m. IE9 om mitt minne fungerar som det ska.

Är väl fortfarande typ 50% som sitter med Win XP, och då är de ju fast i max IE8.

Helt fel, PNG komprimerar bilddata med DEFLATE algoritmen. Jämför själv en BMP (där storleken endast beror på antal pixlar och bit-djup) med PNG så ser du att vissa bilder blir ordentligt komprimerade.

Självklart komprimeras bilden, det är jag som talar i slarvig folkmun där "komprimering" = "kvalitetsförlust".

Ska är ett starkt ord. Personligen tycker jag inte att man ska stödja gamla webbläsare; det finns ingen anledning att uppmuntra långsam utveckling, men i verkligheten så är det självklart bra att stödja så långt bak man kan. Använd t.ex. html5shim, selectivizr och liknande polyfills för att fejka stöd för mycket nyheter i äldre webbläsare.

Nja, jag vet inte hur många som sitter med XP men IE8 uppskattas till ~10% av internetanvändare.

Jag skulle säga att det beror på vem sidans målgrupp är. Om man riktar sig till företag tror jag det är bra att se till att IE8 stöds då många företag fortfarande sitter kvar med Windows XP, vi gör det exempelvis på mitt jobb där vi är flera tusen anställda.

Jag hade sett till att ha bakåtkompatibilitet för en version tillbaka på webbläsare. Se till att ha en analystjänst också så att du kan se om en viss webbläsarversion är ganska högt representerad, för då kan det vara läge att kika och se så att den verkligen fungerar.