| Home | Register | FAQ | Members List | Search | Today's Posts | Mark Forums Read |
|
|
24-10-2009, 11:53
|
#163 (permalink) |
|
AKA Aurora Design
Join Date: Aug 2005
Location: In the remote highlands
Posts: 1,230
|
This is perhaps the most useful thread that exists on the interweb. I'm going to quickly outline the pros and cons of what file formats are used for publishing graphics / images to the internet, the pros and cons of each and when they should be used. It's basic stuff but you see mistakes still being made all the time so perhaps worth going over it. There are three main file types used to build websites and to display images. The JPEG, the GIF and the PNG. Each has it's pros and cons. Knowing which type to use and when is vital in creating a professional looking web site. The traditional advice is to use JPEG for photos and GIF files for graphics. This is true in most cases: Flat Graphics  The above GIF weighs in at a paulty 7K and is clear as a bell.  This JPEG verion on the other hand is nearly 3 x the file size at 19K and, as you can see, is displaying obvious artefacts due to the JPEG's lossy compression.  The PNG matches the GIF for clarity but at 14K is double the file size. The winner here is clearly the GIF. Photographic image  Again we start with the GIF. This time the file size is fairly significant at 80K. The image quality is poor, pay particular attention to the beak. The GIF file format is restricted to displaying only 256 colours in any given image which is causing problems here.  At a fraction of the file size (30K) this JPEG looks fine. There's no point in me showing a PNG here given that the source image was a JPEG. Although the PNG may offer a very slight advantage over the JPEG for quality when displaying photos, this slight advantage is more than negated by the much larger file size - a massive 176K in this instance. Enter the PNG! There are occasions when both the GIF and the JPEG fall short. Generally this is when we encounter a graphic image that has gradients or multiple blended colours.  The GIF. File size: 24.8K. 256 colours simply isn't enough here. Notice the banding within the gradients and the noise around the text.  The JPEG. File size: 26.1K. Artefacts let the jpeg down again. Particularly in areas of high contrast such as around the text. The result is perhaps acceptable in a one off situation but would look amateurish if used as part of a web template  The solution is to use a PNG image in occasions such as these. PNGs support 16 Million colours with lossless compression (no artefacts), and at only 22.8K the png is also the most lightweight solution to this problem. Conclusion GIF Files Use for flat graphics or graphics with a limited colour palette JPEG Files Use only for displaying photographs PNG Files Use for displaying graphics with a broad spectrum of colours or for graphics that feature a long gradient. A Word of Caution Be careful to account for Internet Explorer 6 when deploying PNG files to a web layout. Aside from not being able to handle transparency in PNGs, IE6 also renders them in a slightly different shade. Weird, I know, but it can cause problems if you're looking to use both PNG and GIF files to contruct your page. |
|
|
24-10-2009, 12:34
|
#164 (permalink) |
|
Something
Join Date: Jan 2008
Posts: 7,175
|
Im gonna do some more on this thread soon. have been having some philosophical musings about design lately that i like to bring up for air. I have decided that design is basically like master chef i will explain later |
|
|
|
29-10-2009, 01:50
|
#165 (permalink) |
|
illustrator/designer/dev
Join Date: Oct 2009
Location: Los Angeles, CA
Posts: 130
|
CharmingMan, your efforts are much appreciated! I have gained a lot from this thread, especially the lengthy explanation on grids. Also, I'm going to take a good thorough look at the "Grids Are Good" pdf file. Thanks again and I'll be checking back here often! |
|
|
|
03-11-2009, 01:40
|
#170 (permalink) | |
|
illustrator/designer/dev
Join Date: Oct 2009
Location: Los Angeles, CA
Posts: 130
|
Quote:
|
|
|
|
|
13-11-2009, 06:19
|
#171 (permalink) |
|
Registered User
Join Date: Sep 2009
Location: Edinburgh
Posts: 16
|
"Stop stealing sheep" is an excellent book on type in my opinion. Its NOT a textbook or exhaustive guide but rather a primer to get you thinking, inspire you, get you using more appropriate fonts and stop you making silly mistakes. Its also BOOTIFULLY designed and well written and cheap as chips! I couldn't stop reading it, and want to read it again. Now. ilovetypography.com is a fun site with lots of interesting articles. Others will be able to say if its any good but it seems to contain plently of good advice. papress.com/thinkingwithtype/index.htm is a site that goes with the book of the same name. I havn't work through it yet but It seems useful at first glace. I think i'm developing a strange obsession with type. Its everywhere I go and I can't keep it out of my mind. Right now I'm reading "Making and Breaking the Grid" which is much much tougher to get my head round because it contains lots of difficult concepts. I'm so damn confused with Hierarchical grids! I will need to read this book two three times just to understand it. The small history leason at the beginning was very interesting. |
|
|
|
30-11-2009, 18:16
|
#175 (permalink) | |
|
tired
Join Date: Nov 2009
Location: Stoke - shoot me
Posts: 65
|
Quote:
I'd always used 1001 Free Fonts but cheers for posting that link, some really useful fonts in there! Last edited by cresolve : 30-11-2009 at 18:39. |
|
|
|
|
17-02-2010, 21:25
|
#177 (permalink) | |
|
Registered User
Join Date: Aug 2009
Posts: 67
|
Quote:
hey, thanks for the awesome link. I read the short ebook and had a question since I'm a design noob. On page 100 of the pdf (it's mostly graphics with explanations so only took me 20 minutes to finish reading the book) it said of text boxes: "Every box should be laid out using the same principles as used in framing. Padding for all sides should be visually equal. But only the top, right and left padding should be mathematically equal. The bottom should be taller." and in pages 101,102,103, and 104 it shows pictures of the demonstration just as an example. I'm just wondering, do you professionals use this design principle as well? |
|
|
|
 |
|
