Page 2 of 2 FirstFirst 12
Results 11 to 13 of 13

Thread: Reducing Images file size for web

  1. #11
    Senior Member Mike Hopley's Avatar
    Join Date
    Jul 2009
    Posts
    712

    Default 27 Feb 2012 @ 08.45

    quote
    What would the format be for CSS sprites that contain photos and graphics - or should you not combine?
    Originally Posted by Jacob View Post
    For a start, you should not combine content images into a sprite -- especially images that change frequently. These images should live in your HTML, not your CSS, and should usually have alt text (e.g. <img alt="A young couple arguing in bed" ... >).

    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.
      Reply With Quote

  2. #12
    Member Jacob's Avatar
    Join Date
    Feb 2009
    Posts
    248

    Default 25 Apr 2012 @ 10.04

    quote
    [FONT=FontinSansRegular]To conclude, the format you choose depends on the image and the situation - there is no magic, catch all, format.[/FONT]
    With this and what has already been mentioned in mind, what format would one use for a file that contained both photo and graphic such as a banner?

    Thanks
      Reply With Quote

  3. #13
    Trusted Guru Frinkky's Avatar
    Join Date
    Dec 2008
    Posts
    1,678
    Blog Entries
    1

    Default 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.
      Reply With Quote

Page 2 of 2 FirstFirst 12

Similar Threads

  1. Can I include an XML file within another XML file?
    By Poirot in forum Javascript Libraries
    Replies: 6
    Last Post: 13 May 2011, @ 09.01
  2. screen size
    By sudhakararaog in forum HTML & CSS
    Replies: 3
    Last Post: 15 May 2010, @ 17.44
  3. Reducing the size of my images
    By cew in forum Imagery, Graphics & Typography
    Replies: 12
    Last Post: 17 Apr 2010, @ 10.10
  4. Replies: 3
    Last Post: 1 Mar 2009, @ 02.28

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •