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 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts

    Image file type - best for web?

    Hi!

    I think I have read somewhere that .gif images should be the best to use for websites (layout like header, footer, buttons etc).

    Is that correct? I'm asking because I would like to have a fair balance between loading time and quality of the image.

    Any thoughts and comments are appriciated!

    (I know that .png images can be used for transparent pixels in SOME browsers)

  • #2
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yes thats correct though pngs seems to be better quality. I think if you don't require any transparency then use a png because it can handle gradients better. My site uses all pngs. The only downside is the color of the pngs may be a little darker in IE. If the image contains only one or two colors then sure a gif will suffice. Its when it contains more than that, it gets tricky to get all of the colors you want.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    CaptainB (09-29-2007)

  • #3
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Thanks Aerospace. So I guess I should use .png instead of .jpg (or jpeg) ?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    .jpg would be useful for images that a lot of colors. .png would be useful if you want a glossy type effect. Use jpg only for personal photos like for a photo gallery.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #5
    Regular Coder
    Join Date
    Jun 2007
    Posts
    805
    Thanks
    123
    Thanked 23 Times in 23 Posts
    Nice to know, thx!

  • #6
    New Coder
    Join Date
    Mar 2006
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    .jpg CAN look really good if you change the compression setting when saving it in GIMP or photoshop, and it's usually a very small file.

    But .gif is good if you have an image with simple colors, otherwise PNG is great. I use it for almost everything though.
    Personality is deeper than skin;
    Character is deeper than flesh;
    Love is deeper than heart...
    ...it comes from above.

  • #7
    New Coder
    Join Date
    Sep 2007
    Posts
    24
    Thanks
    4
    Thanked 1 Time in 1 Post
    I use .png's for all of my design elements. However, IE 6 doesn't do transparency in .png's.

  • #8
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    IE can handle transparency in PNG8 with no problem, it just has a tramsparency issue with PNG32. If you only need 256 colours of fewer then PNG with transparency is a suitable alternative to GIF across all browsers and is the only one that gives partial transparent options. It is only when you need more than 256 colours that IE decides that it will not accept transparent colours.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #9
    Regular Coder
    Join Date
    Sep 2007
    Location
    AZ, USA
    Posts
    685
    Thanks
    6
    Thanked 46 Times in 46 Posts
    jpegs get nearly the same quality, but no transparency support and smaller file sizes. I used all pngs on all of the big images on my site (http://www.excalo.com) and the file size of my whole web page was 70 mb. I converted them all to pngs and it went down to 15 or so mb. So use pngs for transparent images and maybe small ones, but you should use jpg for big ones.

  • #10
    New to the CF scene
    Join Date
    Oct 2007
    Location
    Texas
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    If your image is black and white, defently gif. Photos are best jpg. High quality images and personal artwork that isn't black and white should be in png.

    As for banners and such, it really depends on the image. Gifs are horrible with gradients. Size may be important, but blotchy banners don't offer much in the way of professionalism.

    Also, file compression. Kinda pointless to be saving a black and white image as a gif if your saving all 256 (think i might be wrong on the number) colors with the image. Make sure you tell your program to only save the colors needed. Makes a BIG difference in file size.


    If you need help, pm me or send me a msg thru aim. This stuff is a fun hobby for me.
    =^0\./0^= What?

  • #11
    Regular Coder
    Join Date
    May 2006
    Posts
    290
    Thanks
    6
    Thanked 14 Times in 14 Posts
    Just a good piece of advice try to be fluid with your choice of formats to save under. It can greatly affect your webpage.

    For instance if you have a banner image saved as a background .png and then you decide to place another image on top of it with similar colors and/or gradients but use .gif or .jpg instead. There will be a noticeable difference between them especially on images with gradients.

    So my advice is that if you choose 1 format to build the background of your site be consistent and use the same format throughout, it will reduce gaudy difference between images.

    -trigger


  •  

    Posting Permissions

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