1 person found this helpful
I tried several of the GIF presets -- 128, 64, 32, with dithering and without dithering. They all look good, but I'm not sure which will give me that absolute highest quality, sharpest looking characters.
Depends on the number of colors in your image. GIFs can range from 2 to 256 colors. Don't use dithering. Use the smallest filesize needed for the job.
That said, I can't remember the last time I used a GIF. I use JPEGs for photos, PNGs for backgrounds or images that require transparency, and real HTML text for menus and content. Pictures of text are not recognizable to Screen readers, Translators, or Search Engines. And people who need to increase text size to make it readable will have a devil of a time with pictures of text - especially on super wide displays.
Thank you for your reply.
I am using an image for my navigation text precisely because it can't be enlarged or reduced. Here is what I'm doing:
http://www.johnblaustein.com/web2/ (the links don't work yet)
Screen readers, Translators and Search Engines don't need to read my links. I tried using text for the links but as you know, each browser displays the text differently depending on the magnifications settings for the page and/or text, and my designer and I want to keep the look consistent. So, that's why I am using GIFs.
Thank you for the advice on colors and dithering.
1 person found this helpful
I think I have to agree with Nancy - when I began web site development several years ago, I built all of my buttons as graphics and it became an incredible nightmare over the years when the client added or changed the names on the link... I had to find my original photoshop files, and hope I still had the fonts, etc...
If you use pixel sizes for your fonts (instead of points, percentages, or the generic 1,2,3 sizes) the font size remains pretty consistent, and is m-u-u-ch easier to edit and add links down the road... Your fonts look like around 10-11 pixels...
With that said - if you prefer to use graphics, here are a few tips I keep in mind. First, if you're optimizing them through photoshop - use the "optimize for web setting", so you have control over the final output. I think PS4 calls it something else now like "save for web"... or something. If using fireworks or anoither program to save it out, you still want to compare settings. The goal is to use the fewest number of colors in your .gif without losing quality (and it becomes a balance). Your site just has basically two colors - the dark grey and the lighter tan, but I would use more than just two colors for the "anti-aliasing" around the text... say maybe 8 or 16 colors to be safe. As you adjust the settings, you should be able to see the file size adjust in the bottom of the panel - yours are very simple colors, so likely will only be aroun 5kb at the most... extremely small, and should be no problem with loading at all...
Hope that helps - for what it's worth - I've found that .gifs work best for text - but not so good for photos, or gradients... you'll get some banding for those, so a .jpg or .png works best for photos... Gif format works best for text because it's generally "crisper" - jpgs blend the colors in a photo better, but generall make smaller text appear fuzzy. But the same rules apply to .jpg/.png settings - try to adjust the setting when you're saving a .jpg to get the best quality at the lowest setting. I generally don't go below 30 on a .jpg - and sometimes as much as 60 on the quality setting depending on how soft it begins to look. Compare that to a .png - and no matter what the settings, a .jpg will always be a smaller file size for download - .pngs are only used if you need the alpha channel (so that the background is has transparency for being placed over a background color)...
With all of that said - your site looks very cool - great photography... Hope my long-winded answer didn't make you fall asleep - good luck,
I tried using text links and setting the size in pixels, but the sizing changed depending on the browser settings. Sizing in pixels is better than in points or generic sizes, but still subject to changes. I'm on a PC and my designer-friend who is helping me with this is on a Mac. We've done some tests and anything other than making the links with images is not consistent from browser to browser, Mac to PC. We want to guarantee that all the text on the page will not change -- size, spacing, leading, etc. My clients are graphic designers and art directors who will notice this kind of thing.
As for the client changing, adding or subtracting links... well, I'm the client and I'm doing the site myself, so that's not going to be an issue. In addition, as you see, the site is super-simple so there aren't likely to be a whole lot of major changes. That's not to say it could not happen, but saving all my Photoshop work files is not a problem.
Please understand, I am not arguing with you or Nancy. If I were doing a complicated corporate or business site, I would use text links for all the reasons you lay out... no question about that.
Thank you for the tips on saving GIFs. I'm using Photoshop CS4 and Save For Web. I think I now understand what settings to use. I am using GIFs only for the text. All of the images will be JPGs, but those are all generated automatically by Lightroom and a web gallery plug-in called SlideShowPro which not only generates the images but assembles the galleries and does all the Flash stuff. All I do is embed the Flash galleries into my pages. For a non-web person like me, that's nothing short of a miracle.
Your comments were not long-winded. In fact, I'm so eager to learn more about this stuff that I really appreciate your detailed explanations. Thanks for the comment about my work -- I'm excited about this new website which hopefully will make it look better than ever!
We want to guarantee that all the text on the page will not change -- size, spacing, leading, etc. My clients are graphic designers and art directors who will notice this kind of thing.
If your clients wear glasses or contacts, they may find your site unconformtable to use. I don't have an especially huge display, yet I find your graphic links way too tiny to pay attention to.
Just my 5 cents.
Best of luck with your new site!!!! Very Nice Photos, BTW.
I came here to get some information on saving GIFs, and I am grateful to you and Jesse for your help on that.
As is often the case online, the discussion has broadened. In this case, we are now talking design and aesthetics, and that by nature is very subjective. I don't think we are going to agree on this one, but the various points of view are interesting. (And we can all be grateful that the discussion remains civil, which is not always the case in user forums!)