Announcement

Collapse
No announcement yet.

Argh... Should I use JPEG, GIF, Tiff or PNG in my site?

Collapse
This topic is closed.
X
This is a sticky topic.
X
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Argh... Should I use JPEG, GIF, Tiff or PNG in my site?

    Two quick questions for you my little freeeends.

    1. Which of the these formats (JPEG, GIFF, TIFF, or PNG) should I use on my portfolio webpage. It's graphic intensive, but not in the cluttered way, and I don't want it to take forever to load but want it to show my true colors and sharpness. So, the question is, which one offers the best size/quality ratio?

    2. I'm new to webdesign and I was wondering how used PNG's are in the website world? Do most browsers read and support PNGs? Thanks so much!

  • #2
    Well, to answer your question as simply as possible...

    If you're just posting pictures that are graphic intensive, .jpg's are the way to go. They have the best compression and look good while keeping the file size down.
    .Gif's work well too, but are better for making things like buttons and other graphics that you might want a transparent background on. .Gif's are also good if you have a file that doesn't have many colors.

    Png's are good if you want a graphic that is very 'filtered', or color intensive with a transparent background.
    The problem with a .png over a .gif is that the file size will be much larger, so you should use then sparingly.

    I do a majority of my web design in flash, so I always find myself using a combination of the three.
    If I have a graphic that I made in photoshop that has things like a drop shadow or other blended options, but also needs a transparent background, .png is the way to go. Sometimes I can get away with a .gif, but the edges are never what you want them to be.

    Overall, there's is no best all around format to use. It's always better to find the best combination of the three to make your site the best it can be.
    As far as .tiff's go... I've never used on on a web site since there's no need for them. Perhaps someone else can give you a reason as to why you should, or shouldn't use them.


    <embed src="http://www.akewz.com/gdforumbanner.swf" height="150" width="300" quality="high" loop="infinite" TYPE="application/x-shockwave-flash" PLUGINSPAGE="www.macromedia.com/shockwave/download/index.cgiP1_Prod_Version=Shockwaveflash">

    Comment


    • #3
      Tiff is not a Web format, neither is BMP. Both of those should not be used on a Web site. Browsers are not made to display them. And thier file size is far too big.

      PNG is not always a bigger file than GIF. A PNG is like a JPG in that it supports the full spectrum of color. But it's like a GIF in that it supports transparency. PNG also supports alpha transparency to you can have semi-opaque images. However, IE doesn't support alpha transparency.

      The bottom line is that you should make good use of Photshop's Save for Web dialog and see how the different formats affect the image until you have a good ratio of quality to file size.

      Personally, I only use JPGs for photographs. Anything else that has a large amount of colors I use PNG and everthing else is GIF.



      ProudPenguin
      P r o d u c t i o n s


      Comment


      • #4
        What ^^he said


        Hunt for trophy black bear, cougar, deer, mountain goat or forest trolls at bracewell's hunting lodge. http://bracewell.com

        Comment


        • #5
          ^DOuble that^
          Transparencies use gif
          otherwise use jpeg

          'Saying I'm Happy when I'm not'

          Comment


          • #6
            Ryan said...
            Tiff is not a Web format, neither is BMP. Both of those should not be used on a Web site. Browsers are not made to display them. And thier file size is far too big.

            PNG is not always a bigger file than GIF. A PNG is like a JPG in that it supports the full spectrum of color. But it's like a GIF in that it supports transparency. PNG also supports alpha transparency to you can have semi-opaque images. However, IE doesn't support alpha transparency.

            The bottom line is that you should make good use of Photshop's Save for Web dialog and see how the different formats affect the image until you have a good ratio of quality to file size.

            Personally, I only use JPGs for photographs. Anything else that has a large amount of colors I use PNG and everthing else is GIF.
            I guess It's my fault for being lazy, or perhaps I didn't realize that I had to be so specific, but basically you said pretty much what I said, but with a heavy dose of your own opinion.
            Unfortunately you were wrong about a few things ...allow me to elaborate.

            BMP, or bitmap as it's commonly known, is actually a web format. Although with the introduction of better compressed file types such as .jpeg's and .gif's, bitmaps are still used in web design. The most notable program being Flash. When an image is imported into the Flash working environment, it is referred to as a bitmap image.
            BMP files were originated for Windows 3.0 and later, which means that indeed it was a web based image file from the start. I do understand that the output files from flash are vector based, although the images while still in Flash are considered bitmaps.

            The TIFF is a bitmap file format for images, created by Aldus for use with PostScript printing and now controlled by Adobe. TIFF became the de facto standard graphics format for high bit-depth (32-bit) graphics, and is widely used in image manipulation programs like Photoshop, DTP, scanners, and can be directly manipulated by PostScript.
            TIFF includes a number of options that can be used to include all sorts of image formats in the file; this is the purpose of the 'tags' that are included in the header. Many of these tags indicate the simple geometry of the image, like its size, but others define how the data is arranged and various compression options. For instance, TIFF can be used as a container for JPEG or RLE (Run-length encoding) compressed images, and in this respect is completely universal.
            TIFF's are also used in the transferring of images between 3-D programs and image editing programs.

            So, to say that a TIFF or BMP are not web based formats and browsers are not made to display them is in fact wrong. Perhaps what you meant to say was that these file types are fairly obsolete in the web design field since the introduction of better compression and display formats.

            Thirdly, While you are somewhat right about IE not displaying alpha transparencies properly, you're wrong to say that it doesn't at all.
            For this function to work, you will need to be able to capture the web page's browser output into a PHP variable. To accomplish this, simply follow the steps below, and everything should work as expected.

            Save the function into a file named 'replacePngTags.php'
            At the top of the files that you want to use this function with, paste the following code:

            <?php ob_start(); ?>

            Now, at the bottom of this file, paste the following lines of code:

            <?php
            include_once 'replacePngTags.php';
            echo replacePngTags(ob_get_clean());
            ?>

            You should also realize that if the replacePngTags.php is not found within your server's include path for PHP, you will have to adjust the include line.
            If the file in question is not a file that is already being parsed as PHP, you will have to make an adjustment. For this code to work, the web server needs to see this as a PHP file, or the code will simply display on the page. To do this, you have a couple options:

            * Change the file's extension from .html (or other) to .php or something that your web server will parse. This will depend on your server's configuration.
            * Another option is to tell the server to parse the file extension as PHP. There are drawbacks to this, but I won't get into that here. For the Apache Web Server, this can be accomplished by adding a file called '.htaccess' in the directory with the following line in it:

            AddType application/x-httpd-php .html

            Not all Apache web servers will have the option of using .htaccess files.

            Now, I'm not usually one to get into a pissing contest over such things, but I feel that if someone is going to start dropping 'the bottom line', one should be informed as to what one is talking about.
            I think in most cases people post their answers with the assumption that the person asking the question has some idea about what they're doing. in most cases the question tends to not be very specific, so in my case, I tend not to get bogged down in details, which is why I left most of the other stuff out, however, when someone comes along with that air of righteousness, but a lack of information, that's when I have to step in and be more specific, as I was here.

            I'm in no way trying to say I'm better than you or anything like that, but as I said, if you're going to start dropping 'bottom lines' you should know what you're talking about.
            I certainly don't know everything there is to know about design and formats, but I am sure that if I'm going to answer a question, I wont start saying things that I'm not sure of.
            If you find anything wrong with what I said, please let me know. I'm always open to learning new things.

            Comment


            • #7
              Akewz...wow...but hold up...I don't think Ryan was having an 'air of righteousness'...just stating what he knew. It's ok to disagree with someone or even correct them because we are always learning on this forum, but I think you could have left out the 'righteousness, etc.' part.

              Boobie Island or Bust!
              I blog, you blog, we all blog!

              Comment


              • #8
                You're probably right... Chalk it up to a bad day I guess.
                I really wasn't trying to be mean, but after re reading it, I guess it does come off a little sour.

                There was just something about the 'matter of factness' to his post that made me feel like
                he thought he was stepping in to clean up my mess.
                I guess I might have read his post and projected some ill feeling onto it based on a few client interactions I had today.

                Believe me, I definitely did NOT join this forum to argue with anyone.

                I apologize Ryan, if I came off the wrong way... sincerely

                I'll be sure to edit out the uglyness.

                Comment


                • #9
                  Akewz said...
                  So, to say that a TIFF or BMP are not web based formats and browsers are not made to display them is in fact wrong. Perhaps what you meant to say was that these file types are fairly obsolete in the web design field since the introduction of better compression and display formats.
                  That is what I meant. Although I have never seen a tiff used on the Web. And I hate to see BMPs used so I usually just say they aren't Web formats for simplicity.

                  Akewz said...
                  Thirdly, While you are somewhat right about IE not displaying alpha transparencies properly, you're wrong to say that it doesn't at all.
                  For this function to work, you will need to be able to capture the web page's browser output into a PHP variable. To accomplish this, simply follow the steps below, and everything should work as expected.
                  I am aware that PHP can be used to correct the problem in IE. I guess I meant that IE doesn't support alpha transparency without help.

                  I didn't mean to come off as a smartass or to 'clean up your mess'. I actually meant to refer back to post with at one point, but then I got lazy.

                  I do think my 'bottom line' was practical advice though.



                  ProudPenguin
                  P r o d u c t i o n s


                  Comment


                  • #10
                    Just a word of caution LimedDesign ... be sure that your image creation software has legal rights to export/create gif files, if you plan to use gif that is. Adobe and Macromedia software is fine ... but not all software has applied for the legal right to use the gif format, under it's new owners. It is much safer to go with png if you can, so to avoid any legal headaches.

                    Anyways, my 2 cents worth is: generally, jpg creates closer-to-original photo images (realistic and busy images, ie; trees, floral landscapes - pictures with a wide rangs of colours, and generally lacking much high-contrast). High-contrast images such as line drawings and scans of letterheads etc, work best using png. You generally don't need to consider anything else (particularly for ccompliance sake). And as Ryan said ... Photoshop's Web Export facility is the 'creme de la creme' (if you have access to it that is).

                    Comment


                    • #11
                      The GIF patent expired sometime in 2002 or 2003, at least in the USA. Its still in effect in other countries for a year or two. Just an FYI.

                      Unfortunately IE will not correctly display all PNG files. If you are using PNG them you need to test it on IE.

                      - Bill

                      Comment


                      • #12
                        Geez, maybe you guys didn't join this forum to argue archane things like format standards, but I sure did.

                        See, you're both wrong.

                        >>these file types are fairly obsolete in the web design field since the introduction of better compression and display formats.<<
                        >>Although I have never seen a tiff used on the Web<<

                        TIFFs are viewed daily on the web--probably by just about everyone. Or at least everyone with the Acrobat plugin installed. Adobe uses the CCITT compression format for single bit images in PDF, and for a very good reason-- the compression is absolutely astounding compared to anything else (pixel per pixel). Which ofen has made me WISH that browsers would add TIFF CCITT compression compability to the list of supported image formats.

                        As to TIFF obsolescence-- ever since Photoshop 6, Adobe has cranked open the TIFF 'open architecture' wide, wide open, which means that a Photoshop Layered TIFF now can contain virtually everything that a grayscale, RGB, or CMYK Photoshop PSD file can AND maintain compatability with applications as old as PageMaker 6.5. This virtually adds multi-layer, and correction support to apps that were previously limited to 'flattened' placed images. Not only that, but if you shut off all the layer previews of a layered TIFF file prior to shipping, it'll still be about half as big as an equivalent PSD. Interesting.

                        Comment


                        • #13
                          Well Broacher, perhaps you should go back and actually READ what I wrote. I know, I know... it's hard when you're just dying to make a point, but really, I think if you read AND comprehend using context clues, you'll notice that I never said what you're implying I said... you've taken a small piece of what I said and pulled it out of context in an attempt to make your point.
                          If you go back and look at what I said, you'll notice that I stated that MAYBE that's what Ryan was trying to say. NO?
                          Because I also see that I said TIFF's were completely UNIVERSAL.
                          Don't jump the gun and half quote me if my full quote doesn't fit your needs. It's lazy.
                          I'll show you how it works:

                          You said:
                          'TIFFs are viewed daily on the web--probably by just about everyone. Or at least everyone with the Acrobat plugin installed. Adobe uses the CCITT compression format for single bit images in PDF, and for a very good reason-- the compression is absolutely astounding compared to anything else (pixel per pixel). Which ofen has made me WISH that browsers would add TIFF CCITT compression compability to the list of supported image formats.'

                          Now, while I'm not going to disagree with you, your statement shows just how much you DIDN'T actually read the whole thread.
                          From the start the question was about WEB DESIGN and file formats for WEB DESIGN, not PDFs, or WHERE the said files were useful.
                          While PDF's are most frequently used to display documents online, they are not a form of WEB DESIGN. There is a pretty big difference between the two, or at least as far as the original question goes.
                          Go try to put a plain HTML document in a PDF and tell me what happens.
                          And please, minus the semantics, explain to all of us how the two are the same, ESPECIALLY in the context of this thread.

                          You also said:
                          'As to TIFF obsolescence-- ever since Photoshop 6, Adobe has cranked open the TIFF 'open architecture' wide, wide open, which means that a Photoshop Layered TIFF now can contain virtually everything that a grayscale, RGB, or CMYK Photoshop PSD file can AND maintain compatability with applications as old as PageMaker 6.5. This virtually adds multi-layer, and correction support to apps that were previously limited to 'flattened' placed images. Not only that, but if you shut off all the layer previews of a layered TIFF file prior to shipping, it'll still be about half as big as an equivalent PSD. Interesting.'


                          Ok, again I'm going to have to ask you to refer back to my full statement, and not the small portion you extracted in an attempt to make a point... wait, I'll just paste it here for you in its entirety, since you can't be trusted with such a nominal task.

                          'The TIFF is a bitmap file format for images, created by Aldus for use with PostScript printing and now controlled by Adobe. TIFF became the de facto standard graphics format for high bit-depth (32-bit) graphics, and is widely used in image manipulation programs like Photoshop, DTP, scanners, and can be directly manipulated by PostScript.
                          TIFF includes a number of options that can be used to include all sorts of image formats in the file; this is the purpose of the 'tags' that are included in the header. Many of these tags indicate the simple geometry of the image, like its size, but others define how the data is arranged and various compression options. For instance, TIFF can be used as a container for JPEG or RLE (Run-length encoding) compressed images, and in this respect is completely universal.
                          TIFF's are also used in the transferring of images between 3-D programs and image editing programs.'

                          Wow, that kinda looks like I said what you resaid, doesn't it? I'm sorry though, I apparently had no clue that I would have to write a thesis about file formats whenever I tried to answer a simple question.

                          If you go all the way back to my very fist post in this thread, you'll see that I started out with the phrase:
                          'Well, to answer your question as simply as possible...'
                          And I'm pretty sure that's what I did, however like I said, at the time I was completely unaware that I would have to spend a few hours making sure I satisfied EVERYONE here who knew a little something about the topic. I was laboring under the impression that I was answering a question for LimeDesign... who by the way I hope has benefited greatly from this. If anything LimeDesign should now be a master when it comes to formatting graphics for web design

                          I digress, I guess I learned something here as well, and the lesson is; stop posting answers to questions if you're not going to write an e-book about the subject.


                          You also said:
                          'Geez, maybe you guys didn't join this forum to argue archane things like format standards, but I sure did.'

                          Well, maybe in your haste to argue the arcane, you forgot to take the time to actually READ the posts you're arguing against. If you actually did that, it would probably save you a lot of the embarrassment you face by looking foolish in your attempt to prove everyone wrong.

                          Now, my task for you is to quickly scurry off and Google some answers as to why you had such a hard time understanding the thread and the answers given based on the context.
                          And be spry about it, Im interested in knowing if Google can supply you with an argument for that one.

                          Comment


                          • #14
                            WOW - I have a great idea...the way I see it, there are 2 choices in this thread bc this isn't about having a pi$$ing contest, its about learning and helping people. So....

                            1. You battle out your differences in PM and leave the harshness off the board or....

                            2. You keep going and being childish and I lock the thread, therefor making it where the original poster has really learned nothing.

                            Seems like an easy decision to me.

                            Boobie Island or Bust!
                            I blog, you blog, we all blog!

                            Comment


                            • #15
                              >>Wow, that kinda looks like I said what you resaid, doesn't it?<< Well, I was referring more to the part you said about 'better compression and display' and noting the absence of CCITT TIFF compression supoprt in browsers. If it works so well in the Acrobat viewer, wouldn't it be nice to have that as part of the web format stable? (As Mr. Potato Head once said, 'A guy can dream, can't he?')

                              As for the other part about TIFFs in print production, that was just a general note to the assembled maasses (all 4 of them, I'd guess).

                              And no, in my haste to arcania, I didn't forget to read all that stuff. Maybe I didn't clarify the exchange as formally as you'd like, but hey... a big part of why I jumped in is because I'm into tweaking the billyrubin flux when things get too heavy (emotionally, not technically).

                              Sorry, but I'm gonna say no to the Google safari request. I'll take my chances and wait for the movie.

                              Cheers!

                              Comment

                              Search

                              Collapse

                              Sponsor

                              Collapse

                              Incredible Stock

                              Latest Topics

                              Collapse

                              GDF A division of Mediabistro Holdings Adweek | Mediabistro | Clio | Film Expo Group Contact Us | Terms of Use | Privacy Policy Copyright 2016 Mediabistro Holdings
                              Working...
                              X