Thread: Jpeg, Jpg, Gif

    #1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    2
    Rep Power
    0

    Question Jpeg, Jpg, Gif


    What's the difference between them? And how do I convert images to one of them? I have no idea what to do
  2. #2
  3. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    Montreal
    Posts
    15
    Rep Power
    0
    From what I know, Jpg and jpeg is the same. One is just an abreviation of the other.
    It is a destructive compression format for pictures, widely used on the internet. It offers a fairly good quality with a relatively small file size. But, it flatten images and it cannot save layers like a .tif

    Compuserve Gif is another widely used format on the internet. It is popular because you can create small animations and apply transparancy to your pictures. Although, it has some problem when dealing with gradients colorings because of its 256 color limitation. Plus, it is "copyrighted" by compuserve, that means that they "could" get angry at people using gif without paying them, in theory....

    In photoshop, to convert a picture to one of those format is easy:
    File> Save for web
    Then select your format in the menu to your right.
    (You will also notice that there is the png filetype, which I personnaly prefer over jpgs and gifs)

    I hope it answers your question
    Last edited by TuxMan; November 19th, 2003 at 09:08 PM.
  4. #3
  5. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    2
    Rep Power
    0
    Thanks
  6. #4
  7. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2003
    Location
    city of sin, state of the art
    Posts
    421
    Rep Power
    0
    Originally posted by TuxMan
    ...it is "copyrighted" by compuserve, that means that they "could" get angry at people using gif without paying them, in theory...

    in theory indeed. dont let that worry you. hahahaha...its probably the most widely used image formats on the net...

    good lucky and ROCK ON!!
    "I hate quotations."
    -ralph waldo emerson-
  8. #5
  9. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2000
    Location
    Leuven, Belgium
    Posts
    39
    Rep Power
    14
    Good explanation by TuxMan, but it's a little more complicated.

    Anyone up for an indepth explanation?
    (It's a little work to explain, but if you want to know ...)
  10. #6
  11. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    Montreal
    Posts
    15
    Rep Power
    0
    Sure, I'm always ready to learn
  12. #7
  13. Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2000
    Location
    Leuven, Belgium
    Posts
    39
    Rep Power
    14
    OK, here I go! You asked for it! I'll keep it a little practical and leave some technical info to the real techies

    The basis of images on a computer is understanding that all images on computers are made up of pixels, little dots. Every pixel can have one color. So, ideally, when you save an image, you actually save the information of every pixel (what color, what effect, tranparency etc...). For larger images, this would result in enormous files. That's why different compression techniques have been designed which result in different file formats. Let's take a look at the most common on the web.

    TIFF & BMP
    First of all, you have formats that do save the information of pixels seperately. The TIFF and BMP (Windows) are the most common filetypes using this system.
    This means that these files can be extremely big because there is no compression whatsoever. But this also entails that there is no quality loss. When compressing an image, there is always some loss.
    BMP is rarely used on the internet and should be avoided. Non-Microsoft programs can often not read these files. TIFF-files should also not be used on the web, but this is a very common format for high-quality photographs or images, especially used in printing.

    JPEG
    JPEG compresses images. Instead of remembering all information of all pixels, only the exact information of some pixels is saved (I believe every 8 pixels, but I could be mistaken). From the pixels in between, only the variation to this one pixel is saved. That's why you sometimes see little squares of 8 (?) pixels in badly made JPEG's.
    This compression has several consequences. First of all, and this is the major reason for inventing this technolgy, you have a significantly smaller file. A JPEG-file is in average 10 times smaller than the same image in TIFF. On the other hand, you always have some loss. In most images, this isn't noticable on a screen by the naked eye. But depending on how much compression you are using (mostly expressed by the 'quality' of the JPEG), you can get some bluring.
    JPEG, together with GIF, is probably the mostly used format on the web. The small size is of course the reason for this. But, understanding the compression technique a little, you might understand that a JPEG-compression is not ideal for all kinds of images. JPEG is ideal for images with a great variety in colors and shades. A photgraph is ideal. An image with big spaces in the same color are not so good. You often get bluring. So logo's should be saved in JPEG, but in GIF.

    GIF & PNG
    GIF and PNG also use a compression technique, but different from JPEG. Where JPEG saves pixels and variations to these pixesl, GIF saves spaces with the same color. So, as we said before, GIF is ideal for saving an image where you have less shades of colors but rather big spaces of the same color, like buttons, logo's or backgrounds. GIF-files are also used very much on the internet because you can make a certain color transparant. This is something that you cannot do with a JPEG.
    PNG is a rather new format to compete against GIF because there is still a patent on GIF. There are some small differences between them, but the main advice is not to use PNG because it is not so widely supported.

    There is a lot more to say about image formats (animated GIFs, transparancy, printing, colors, ...), but this might get you started in the right direction. A good understanding of these things should be the basis for graphical designers or amateurs on the web. You can easily make you site twice as fast using the correct formats.

    There must be numerous sites out there explaining this a lot better and more in detail. I can't remember all the ones I read, but there was a comprehensive article about it on SitePoint not so long ago: http://www.sitepoint.com/article/601 .

    Well, that's it for now. But, as I sais in other posts, I'm not 'all-knowing'. So if someone can correct or add something, please feel free!
  14. #8
  15. HTML/CSS/Photoshop maven
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Location
    CA
    Posts
    184
    Rep Power
    12
    Another thing about GIF's: they are limited to 256 colors. These colors can be anything you want them to be, they can be any palette, but that's the maximum you can have. You can also animate GIF's, though I haven't seen that many of late in favor of stuff like Flash. (You have probably seen large animated images that looked really poor; that is because they are limited to 256 colors, for all frames.)

    PNG's make better images than either GIF's or JPG's, including transparent images, but some browsers (including, oddly, IE 6) don't display the transparent part of the PNG correctly. (Case in point: the logo on my site.)

    The best way to save images for the web in Photoshop is to go File > Save for Web. Here, you can see a preview of your image and manipulate all sorts of controls to change the way your image will turn out.

    Also, in general, it's not a great idea to convert between GIF and JPG. Both are lossy in some way (JPG is compressed, GIF is limited to 256 colors), and converting one to the other will just add the one's faults on to the other. You will get a logo with JPG artifacts, for example, or a photo with color banding (large sections, like streams almost, of the same color) or dithering (like newsprint, where small dots of a few colors are placed next to each other to simulate a different shade).

IMN logo majestic logo threadwatch logo seochat tools logo