Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Feb 2010
    Location
    New Zealand
    Posts
    76
    Thanks
    7
    Thanked 10 Times in 9 Posts

    Website's Image Sizes and Formats

    Hi, I'm quite new with web development and was wondering about keeping the speed up on a website loaded with images.

    What varies formats should be used for what? Like gif, png, jpg or tif, etc? Like is one better over another or does it depend on if theres tranparency or something.

    Also what is the best way of reducing image size without the lose of quality?

    Thanks for helping out a noob

  • #2
    Regular Coder
    Join Date
    Jan 2010
    Posts
    137
    Thanks
    3
    Thanked 10 Times in 10 Posts
    Hey Azzaboi -

    My general rule is as follows:

    - When you have any transparency (background showing through) anywhere in your image, use PNG
    - When you do not, use jpg exported at "very high quality" - this retains quality but compressed the file size a lot.
    - Always use "export for web and devices" on photoshop.

    Pretty simple, but it works! Other tips - don't use super large images, alternatively try to find a way to tile images in the x or y direction. In addition, it often helps to use CSS sprites for your buttons - google this for more info

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I disagree.

    When you have a graphic with solid colors (under 256 colors) use PNG-8
    If you have a complex graphic (256+ colors), use PNG-24 (PNG-32 without transparency in Photoshop)
    If you have a complex graphic with transparency, use PNG-32.
    If you have a photograph, use JPEG with an appropriate quality setting.

  • #4
    New Coder
    Join Date
    Feb 2010
    Location
    New Zealand
    Posts
    76
    Thanks
    7
    Thanked 10 Times in 9 Posts
    Thx for the replies, I guess it's different depending on what your doing but jpg are best for photos and I'm using png format mostly for the graphics and transparency.

    I'm losing a lot of quality in my logo (semi-transparent) if I compress for the web, the size I got it down to is 35kb keeping quality as a png, is that okay, it's the largest image? The others are all 10kb or under now

    http://azzaboi.weebly.com/
    http://azzaboi.weebly.com/files/theme/logo.png

  • #5
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Try saving as a PNG-8 with transparency and see whether it gives a good-quality file.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,801
    Thanks
    160
    Thanked 2,216 Times in 2,203 Posts
    Blog Entries
    1
    Make use of fireworks to save an image as png8 with alpha transparency, see http://www.sitepoint.com/blogs/2007/...-clear-winner/
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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