.gif (Graphic Interchange Format) and .jpeg (Joint Photographic Experts Group) are two different types of formatting to translate images to the web. While there are other graphic file formats available, these two file formats, along with .png are responsible for the pixel-based images that you see on the web. While neither is necessarily better than the other, there are certain differences that make it wiser to choose one file format over another when developing your website. So let's begin with the .gif file format. This was the first image format supported by web browsers, and it is still quite popular around the web today. It is idea for images with limited colors and color palettes. This makes it ideal for logos, line art, icons and other graphically rendered objects. You might ask yourself why not use a .gif for a photo? The answer lies in the fact that .gif files have an 8-bit color file, meaning that it can only support up to 256 colors. Any color that isn't within it's range will be blended into a color that is. Thus if you have a very color rich photograph, you may not be pleased with the quality of the image when it is saved as a .gif. The .gif file format is perfect for vector artwork because of it's 8-bit color file. A .jpeg file on the other hand IS ideal for photography. It compresses images by reducing sections of an image down to a tile-like image. Zoom in on a photograph online and you will see what I am talking about. However this does not make the .jpeg perfect. Unlike the .gif format, the lossy compression of a .jpeg will sometimes cause hard lines to disappear, or an image with sharp geometric components to look a little fuzzy. This makes it not an ideal choice for typographical elements or hard graphic lines. Therefore, in short, .gif files are better suited for typography and vector based artwork, and .jpeg files are better suited for photographs.
.
.
.
It is important to remember when designing for the web that larger files sizes don't mean longer print time, it means longer load time. This has implications for your viewers in that, if a website takes too long to load (and "too long" on the web is actually a very short time) we will visit a different site for the information we need, and disgard the other site. This means that there are tradeoffs in the world of web design. Richer images with less compression will take longer to load, but will be graphically eye-catching and draw your users in, on the other hand It may take too long to load. A poorer quality Image may load faster, but does it send off the professional message that you want your "about me" site to send? Probably not. Therefore, we need to somehow strike a balance. As I am thinking about how I want To handle my website, I am thinking about the ways that I can optimize my site for both users and visuals using CSS and images. I want to use a large background Image to draw my users in, and I want this to be a sharp visual, no blurriness. I also want to use an image for a logo that I design for myself. After reading the two chapters for this week, I think that limiting my image use to these two elements and perhaps a footer and header produced in Photoshop and letting CSS handle the rest will allow me to create a professional site that still loads in a timely manner. My limited knowledge of CSS might affect this plan further down the road, however I don't want to just resort to a bunch of images on my website because I don't want it to run too slowly, I would rather try to use CSS for all that I can.
No comments:
Post a Comment