which picture format is better? gif, jpg or png?

30 replies
  • WEB DESIGN
  • |
hello,

i`m going to have a pictures site and i wonder in which format should i save them in order for them to be load fast on my site.

gif, jpg or png?

thanks!
#format #gif #jpg #picture #png
  • {{ DiscussionBoard.errors[9685932].message }}
  • Profile picture of the author Ron Killian
    Depends on the image, or what's in the image, and you want to preserve the quality.

    Save your images in the format that has the best quality with lowest file size.

    I agree though, "usually" PNG is the best. That or JPG.
    Signature
    PLR Affiliate Program Has Launched! Easily Promote Over 5,000 PLR and MRR Products.

    Largest Selection of PLR Articles on the Planet! PLR Ebooks, PLR Video, PLR Websites and more with Private Label Rights
    {{ DiscussionBoard.errors[9685963].message }}
  • Profile picture of the author erikathomson
    Png is the best format for image.
    {{ DiscussionBoard.errors[9685990].message }}
  • Profile picture of the author UMS
    JPEG is the best format if you want the smallest sized image, however the quality won't be quite as good a PNG.

    If you want a transparent background, then you'll need to use a PNG instead of JPEG.
    {{ DiscussionBoard.errors[9687163].message }}
  • Profile picture of the author stealthtargeting
    I personally like Png format. But it's totally depends on where you are going to use this picture.
    Signature

    Wanna See how the BIG BOYS made their first $ online? guess what, now u can! go there and watch: http://www.nice1marketing.com
    Check out "Launch Cam" as well! wanna be in the next show? go! catch me if you can! ;)

    {{ DiscussionBoard.errors[9688778].message }}
  • Profile picture of the author samovitch
    it depends what you need ! ,but you say a condition you want it load fast so in this case we use vector images load fast and a very good quality ,so if have'nt vector image use PNG
    {{ DiscussionBoard.errors[9689577].message }}
  • Profile picture of the author ForumGuru
    Banned
    Originally Posted by mobile989 View Post

    hello,

    i`m going to have a pictures site and i wonder in which format should i save them in order for them to be load fast on my site.

    gif, jpg or png?

    thanks!
    For regular full color pictures compressed JPG is usually the best format. For line art, line drawings and text heavy images PNG is usually the best format. For transparent images PNG is a must and GIF is not the format to use unless you of course you are using an animated image.

    Cheers

    -don
    {{ DiscussionBoard.errors[9689594].message }}
  • Profile picture of the author saha
    png is best..
    {{ DiscussionBoard.errors[9690220].message }}
  • Profile picture of the author hpasha
    Portable Network Graphics (PNG) is the Best
    {{ DiscussionBoard.errors[9690234].message }}
  • Profile picture of the author falconlink
    I prefer png for thumbnails/ logos, but jpg for large images. If compare, png is better between them.
    {{ DiscussionBoard.errors[9690779].message }}
  • Profile picture of the author Vin Venture
    As should be apparent by the trend in this thread, .png is best .
    {{ DiscussionBoard.errors[9693809].message }}
  • Profile picture of the author furqan
    PNG only best if you are using transparent background and focus on object - But if you have a complete image with solid/gradient background then go with JPG format -

    Also for more fast loading your all web images whether it would be in PNG, JPG or GIF format must be optimized

    Any question please feel free to ask

    Thanks
    Signature
    {{ DiscussionBoard.errors[9695827].message }}
  • Profile picture of the author georgeweb13
    I disagree with the most people here.
    For WEB use jpg of course is the best!
    Png is good for web ONLY if there is transparency.
    If your pic doesnt have anything transparent you better use jpg.

    It takes a lot much smaller size than the same quality in png.
    {{ DiscussionBoard.errors[9696583].message }}
  • Profile picture of the author juangarciamtl
    With png you can use transparencies
    which is awensome
    Signature

    More than 105 modules , scrapes, post and make money.
    http://autopostingtools.com/

    {{ DiscussionBoard.errors[9696617].message }}
  • Profile picture of the author ParthInnovator
    The size of the PNG is very higher in comparison with JPG and same for GIF. So according to the size JPG is Better. But if you require a transparent background in the image than PNG must be used and if animation is required then GIF must be used as it is the only format which can give animation in the image.

    What you can Do is : You can use thumbnail of the image on page and only use the original image when it is required to be loaded.
    {{ DiscussionBoard.errors[9696633].message }}
  • Profile picture of the author Ron Killian
    PNG is not higher in file size. Come on people. Really?

    I use alot of images, larger and lengthy images, 98% of the time PNG is MUCH smaller in file size.

    And PNG is not only for transparency.

    Better ways to get your sig displayed
    Signature
    PLR Affiliate Program Has Launched! Easily Promote Over 5,000 PLR and MRR Products.

    Largest Selection of PLR Articles on the Planet! PLR Ebooks, PLR Video, PLR Websites and more with Private Label Rights
    {{ DiscussionBoard.errors[9697197].message }}
    • Profile picture of the author ForumGuru
      Banned
      Originally Posted by Ron Killian View Post

      PNG is not higher in file size. Come on people. Really?

      I use alot of images, larger and lengthy images, 98% of the time PNG is MUCH smaller in file size.
      Yes, compared to a properly compressed JPG full color photograph a PNG-24 file *can* be significantly larger. Images are my business... I have been shooting, creating and editing images professionally for 13 years and have a personal library of 1 million of my own images. In-fact I have owned hundreds of image related domains and have tens of thousands of my own images online.

      It's not a guess, it's a fact. Most of the time you can compress a typical photo without a significant loss of quality and end up with a JPG file that is quite usable for web display that is much smaller than a standard PNG-24.

      That said, and as I mentioned above in post #9, PNG is a more suitable format for some types of images and graphics.

      Below is a decent article that explains when a PNG is suitable, and when it's not.

      http://code.tutsplus.com/tutorials/e...g--mobile-5154

      It is a known fact that most photographers almost never use the PNG format, if you can even find a camera that supports PNG. We shoot in RAW and convert to JPG for the web, or we shoot straight JPG. When editing we will sometimes save edits as a PSD or TIF (lossless formats for further editing and printing) and then convert to JPG when uploading to the web for display. Generally speaking, photographers do not use the PNG format at all....unless they are removing the background of a photo and saving it with a transparent background. In that case a PNG is used because JPG does not support transparency.

      Icons, graphics, text , drawings and line art is another story altogether. For these types of images PNG is often times a more suitable format.

      Want to get a bit deeper into it? Ok...

      JPEG PROS

      24-bit color w/ up to 16M colors
      Great for photographs
      Great for images w/ more than 256 colors
      Great for making smaller file sizes (usually)
      WHICH FORMAT IS BEST?

      Unfortunately, there is no right answer. You need to determine which file format is most appropriate for the content of that image. If you’re looking to include animation, the GIF format is the obvious choice. Need your photographs to retain their detail and color? Go with a JPEG. To recap:
      JPEG FILE FORMAT

      Great for images when you need to keep the size small
      Good option for photographs
      Bad for logos, line art, and wide areas of flat color
      GIF FILE FORMAT

      Great for animated effects
      Nice option for clip art, flat graphics, and images that use minimal colors and precise lines
      Good option for simple logos with blocks of colors
      PNG

      Lossless
      Excellent choice when transparency is a must
      Good option for logos and line art
      Not supported everywhere
      Major Con (and the reason photographers do not use PNG for full color image display)

      Not great for large images (large file sizes compared to JPEG)
      https://litmus.com/blog/png-gif-or-j...u-use-in-email

      JPGs is a lossy format and has it's disadvantages for certain applications, but posting standard color photographs to the web is not one of them. A properly compressed JPG can look great on the web and and can be quite small in overall file size, comparatively speaking.

      This is common knowledge in the photography and editing communities, and that's why 99% or more of the color photographs you find on the web are JPGs.

      Cheers

      -don
      {{ DiscussionBoard.errors[9697701].message }}
  • Profile picture of the author Ron Killian
    Like you said, photography and web can be quite different. The OP was asking for web, that's all I was trying to say.

    I don't doubt your facts and experience, just was saying from my experience. And I also use PNG-8, which can produce suitable images for the web, which as I am sure you know makes for a much smaller file size compared to JPG.

    JPG is not always smaller, and not always the perfect solution
    Signature
    PLR Affiliate Program Has Launched! Easily Promote Over 5,000 PLR and MRR Products.

    Largest Selection of PLR Articles on the Planet! PLR Ebooks, PLR Video, PLR Websites and more with Private Label Rights
    {{ DiscussionBoard.errors[9697760].message }}
    • Profile picture of the author ForumGuru
      Banned
      Originally Posted by Ron Killian View Post

      Like you said, photography and web can be quite different. The OP was asking for web, that's all I was trying to say.

      I don't doubt your facts and experience, just was saying from my experience. And I also use PNG-8, which can produce suitable images for the web, which as I am sure you know makes for a much smaller file size compared to JPG.

      JPG is not always smaller, and not always the perfect solution
      #1 PNG-8 only supports 256 colors and most color photographs contain millions of colors.
      #2 Computer generated artwork often contains millions of colors.
      #3 The OP stated he wants to create a picture site and have the images load fast.

      Originally Posted by mobile989 View Post

      hello,

      i`m going to have a pictures site and i wonder in which format should i save them in order for them to be load fast on my site.

      gif, jpg or png?

      thanks!
      So if he is creating a "picture site" that contains photos and/or computer generated art then JPG is most certainly the way to go. Especially if he wants it to load fast.

      If he is creating a "picture site" that contains icons, line art, images that are mostly text, and graphical drawings containing less than 256 colors then PNG would be the way to go as long as the images are not too large. Even if he does create a "picture site" with these types of images then he may still want to go JPG.

      This is why we do not use PNG-8 for full color images....it can/will creating banding and other nasties similar to what I have shown below. PNG is the WRONG format to use for full color images. Here is an example I just whipped up...note the image quality and file sizes.


      JPG 12.9 KB (55 Comp PS)


      PNG-8 31.3 KB


      JPG 23.6 KB (85 Comp PS)


      PNG-24 82.7 KB


      JPG 41.3 KB (100 Comp PS)

      As demonstrated, the PNG-8 can't compete with the JPG on full color images for web display and the PNG-24 is much larger than the JPGs. The JPG (55) is almost 7 times smaller then the PNG-24. The PNG-8 is twice as large as the JPG (55) and it's all messed up. The JPG (85) is almost identical in quality to the PNG-24 and it's about 3.5 times smaller.

      Again, for text, line art, icons, and graphical drawings etc. PNG should be considered. But even then, a PNG is not always going to win the day...especially when file size is considered.

      Cheers

      -don
      {{ DiscussionBoard.errors[9697788].message }}
  • Profile picture of the author Ron Killian
    I stand corrected
    Signature
    PLR Affiliate Program Has Launched! Easily Promote Over 5,000 PLR and MRR Products.

    Largest Selection of PLR Articles on the Planet! PLR Ebooks, PLR Video, PLR Websites and more with Private Label Rights
    {{ DiscussionBoard.errors[9697842].message }}
  • Profile picture of the author ForumGuru
    Banned
    Here is a real world example instead of a pure gradient. The color pallete is not super wide in this picture giving the PNG-8 a shot, but still no cigar.



    JPG (75) 83.4KB



    PNG-8 161 KB



    PNG-24 448 KB

    The bottom line is JPG can handle color AND compression quite well.

    Cheers

    -don
    {{ DiscussionBoard.errors[9697916].message }}
  • Profile picture of the author anynewsbd
    [DELETED]
    {{ DiscussionBoard.errors[9697932].message }}
  • Profile picture of the author MeAlaister
    GIF

    PROS

    Supports transparency

    Can be animated

    Great for images with limited colors

    Great for line drawings & clip art

    Great for text images

    "Lossless"
    CONS

    Only supports 256 colors

    File sizes can be quite large

    Not good for photographs

    Not good for images w/ more than 256 colors


    JPEG
    PROS

    24-bit color w/ up to 16M colors

    Great for photographs

    Great for images w/ more than 256 colors

    Great for making smaller file sizes (usually)
    CONS

    Discard a lot of data

    After compression, JPEGs tend to create artifacts

    Cannot be animated

    Doesn't support transparency

    Not good for text images

    Not good for images with sharp edges

    "Lossy"
    Signature
    ACCA BANGALORE BEST FINANCIAL INSTITUTE IN KERALA

    Enjoy your Holidays with Maximum .. we offers best Software development company in dubai and Qatar,
    {{ DiscussionBoard.errors[9708634].message }}
  • {{ DiscussionBoard.errors[9714942].message }}
  • Profile picture of the author colorexpert4
    It depends on where you want to use that image. To me jpg is best.
    {{ DiscussionBoard.errors[9948849].message }}
  • Profile picture of the author alias2002
    I always use jpg format. It's easy to use and convertible with any sizes.
    {{ DiscussionBoard.errors[9948952].message }}
  • {{ DiscussionBoard.errors[9950657].message }}
  • Profile picture of the author jiteshjk
    JPG is to view them best, You can have GIF Format for less size.
    Signature

    Premium WordPress Themes, Plugins and HTML Templates
    http://NavThemes.com/

    {{ DiscussionBoard.errors[9950688].message }}
  • Profile picture of the author EmilyMace
    Most browsers have no trouble displaying any of these three image types, some are better suited for certain uses than others. For instance, while JPGs are most commonly used for displaying photo-realistic images that look fine while maintaining a low file size, GIF files are a widely-supported format for animated images. Then there are PNGs, which have the ability to maintain full quality in nearly all instances.
    {{ DiscussionBoard.errors[9954475].message }}
  • Profile picture of the author ShreyaSharma
    I think each picture format have there own importances. Which format is better it depends on our requirement:
    1. gif:Graphics Interchange Format is a graphics format supported by the web, it is a lossless compression technique and support 256 colors.And GIF image allow us to preserve transparency.

    2.jpg:Joint Photographic Expert group is another image file format supported by web.It is a lossy compression technique that is designed to compress colors.Jpg images doesnot preserve transparency.

    3.png: Portable network graphics is another standard graphics supported by web.And an images in a lossless png format is 5% to 25% more compressed than a jpg images.Png images also preserve transparency.
    {{ DiscussionBoard.errors[10107526].message }}

Trending Topics