Results 11 to 13 of 13
Thread: Reducing Images file size for web
27 Feb 2012 @ 08.45
Most photos are content images, so make sure you're not spriting the wrong things. Only sprite decorative images. Typically, these are images that make up your interface. The classic example used to be rounded corners, but nowadays we use CSS3 for that.
When spriting, you need to maintain a reasonable level of image quality. Attempting to combine photos and graphics is probably a bad idea, because (typically) photos should be JPGs and graphics should be PNGs. You also need to pay attention to the colour palette: ideally, you would sprite graphics into PNG-8 (128 colours). If you have too many different colours in your graphics, then combining them into PNG-8 will reduce the quality. In this case, you might need to choose between using one truecolour PNG (larger file size) or two 8-bit PNGs. Similarly, avoid spriting alpha-transparent PNGs together with non-transparent PNGs: you may dramatically increase the file size and could even create some slowdown in browser rendering.
Remember that CSS3 can now replace a great deal of the graphics we used to sprite. This is the easiest and best-performing solution by far.
Last edited by Mike Hopley; 27 Feb 2012 at @ 08.49.
25 Apr 2012 @ 10.04[FONT=FontinSansRegular]To conclude, the format you choose depends on the image and the situation - there is no magic, catch all, format.[/FONT]
- Join Date
- Dec 2008
- Blog Entries
25 Apr 2012 @ 10.46
You wouldn't mix them. Photos tend to be used once. Logos, banners, what have you are more likely to be used several times, so would benefit (possibly) from being composited and cached.
If you have something specific, show it to us.
- By sudhakararaog in forum HTML & CSSReplies: 3Last Post: 15 May 2010, @ 17.44
- By cew in forum Imagery, Graphics & TypographyReplies: 12Last Post: 17 Apr 2010, @ 10.10
- By bocaj in forum PHP, ASP & JavaReplies: 3Last Post: 1 Mar 2009, @ 02.28