Our weekly home-based business chats are done in cooperation with a networking email list called
(Home, Not Alone). This group is a support network for home-based business owners.
| ----- |
-- Log on HNA020299 started at Tue Feb 02 12:11:50 PST 1999
|
| Janet: | first off...I am nervous about the term 'expert', but we are going to talk basic graphic techniques for the web |
| Janet: | some of you who already do web graphics may be bored, but we have to start somewhere :) |
| Janet: | I have created some web pages so we can all follow along - www.baxsie.com/hna |
| Janet: | first - gif or jpg? when to use what... |
| Janet: | That is the first link on the page I just mentioned....basically, *general* rule of thumb is to use a jpg for photos (and graphics with many colors) and gifs for everything else |
| Janet: | there are exceptions, of course, but take a look at http://www.baxsie.com/hna/gif-jpg.html |
| Janet: | as a gif, the flower has splotchy colors, and it is a larger file than the jpg, which is smooth and full color |
| HerKeyboard: | I can see how the flower is more realistic as a jpg. |
| homeparentsADM: | interesting, Janet.. |
| Janet: | one exception would be animated gifs...if you use photos, they will need to be in gif format |
| Janet: | I am often surprised how many web sites have what *would* be nice photos shown as gifs - blotchy, and dotty...take forever to load, too |
| homeparentsADM: | I've seen that too, Janet! |
| nancee: | dithered? |
| HerKeyboard: | Do gifs take longer to load? |
| Janet: | yes, nancee - a gif can only have 256 colors MAX, a jpg is unlimited (millions) so the computer has to 'dither' or blend to the nearest color, and when it gets to 256, that is it |
| Janet: | no, the gifs do not take longer to load - sorry for being unclear...but as a photo, they are often *larger* than say, a better quality jpg, so in that case, they will take longer to load |
| HerKeyboard: | That makes sense. |
| Janet: | when we get to text graphics, you can see that a gif will be much better and a smaller file than a jpg |
| homeparentsADM: | oh, I get it now, thanks for claifying, Janet! |
| Julie: | wasn't jpg created as a superior compression utility over gif anyway? |
| Janet: | yes |
| homeparentsADM: | general rule: use jpgs for photos, gifs for others? |
| Janet: | I saved the flower graphic at 128 colors (vs the max of 256) because at 256K it was HUGE - 50 or 80K or something like that... |
| HerKeyboard: | You mean when you saved it as a gif? |
| Janet: | yes Barb - as a general rule |
| homeparentsADM: | 128 colors look ok on the web? |
| Janet: | yes - the top flower graphic is a gif in the example at: http://www.baxsie.com/hna/gif-jpg.html |
| Julie: | Barb, an image saved using 128 colors is very different than setting your resolution to 128 colors |
| homeparentsADM: | ahh..ok..I see.. |
| Janet: | thanks Julie |
| TriciaB: | Is there a general size limit you should strive for if you scan a photo for any use wether web or email? |
| Janet: | well, it is more of a courtesy thing...I like to keep images <30K, but you can always do a thumbnail (small version) and say click here for larger view, and it can be as large as you like (this would be for a web page) |
| Julie: | I prefer 20k for jpgs and 10k for gifs |
| nancee: | if it takes too long to load a page many people will be gone to another page |
| nancee: | yahoo has 8 total |
| homeparentsADM: | and a big file will crash a lot of email accounts..they do mine! |
| Julie: | well Yahoo is a directory.. a shopping site would need to have graphics.. or a graphics site |
| Janet: | Barb, for those of you still deciding what format would be best, at at what compression, I have an excellent tool that allows me to see the graphic |
| nancee: | doesnt matter people will still leave if they have to wait over 30 sec |
| homeparentsADM: | I read somewhere that most people will leave if your site takes over 30 seconds or so to load, so that's something to keep in mind, too |
| Janet: | as a gif or a jpg and what it would look like at different file sizes before I save it. it is a great way to learn |
| Janet: | It is called SmartSaver, and you can get it at: http://www.ulead.com (not affilitated with them) |
| GloriaD: | freeware? |
| homeparentsADM: | oh, that sounds neat, Janet! |
| GloriaD: | Shareware? |
| Janet: | they have a fully functional free trial - it used to be good for 2 weeks, not sure now |
| Janet: | definitely worth it!!! |
| Janet: | it saves time, and you can really see what you are doing, rather than saving a ton of 'versions' of a graphic to see what size/quality you like best. |
| Julie: | Beautiful job on the chat pages, Janet! |
| Janet: | thanks Julie |
| Janet: | speaking of the pages, let's move on to text: http://www.baxsie.com/hna/text.html |
| TriciaB: | yes, Janets chat pages are a great addition to this! She is definately prepared! |
| Janet: | I was nervous, Tricia! |
| Janet: | text - now this is very important....when people use a text graphic, they are wanting to enhance the dull HTML option (which is about nothing! haha no fun fonts). If you have bad text graphics, what is the purpose? - often more of a distraction :( |
| Janet: | Anti-aliasing is what makes text appear smooth - it adds in shades of the color for blending, as you can see on the zoomed in view |
| Julie: | That is such a common problem and a major pet peeve of mine.. glad you brought this up.. |
| Janet: | with anti-aliasing turned off (this would be in your graphic creation software, not your browser), you get the jaggies - the color is either 'on' or 'off' - no smooth edges |
| Janet: | http://www.baxsie.com/hna/text.html |
| Julie: | I have seen the jaggies on both web designer and graphic designer's sites and that scares me! |
| Janet: | now, back to how you would save this....a GIF! :) I saved these at 16 colors, and they are small, easy-to-read, quick loading files |
| GloriaD: | So, if I wanted to put text on a button, turn the anti-alias off? |
| homeparentsADM: | now, you typed these text gifs in your software, or how.. |
| Janet: | no, Gloria....anti-aliasing should be 'ON' in just about every circumstance |
| Julie: | I always use anti-alias... |
| GloriaD: | Okay, because I always leave it on. |
| Janet: | yea...leave anti-aliasing on. The only exception that I have come across is extremely small text may be more readable with anti-aliasing off (I was creating a desktop icon), but you have to ask yourself if it is TOO small! |
| Janet: | Barb, to answer your question....I typed these text gifs in photoshop and then saved them as gifs |
| homeparentsADM: | oh, ok, I see...then just have the anti-alias turned on...I've never tried a text gif.. |
| Janet: | I like small text gifs - they can add some color and 'excitement' to your pages, for not a very big increase in download time...especially if you keep them small, and with only one color |
| homeparentsADM: | how small do you keep them, Janet? |
| Julie: | back |
| Janet: | Barb...for my small subtitles (ie in an article) they are 1K each, usually 500 - 800 BYTES |
| homeparentsADM: | ah..so really small then..ok! |
| PattiMay: | do you find that using graphics for small text is more effective than text styles Janet? |
| PattiMay: | guess it would depend on the font that was desired .. now that i think of it |
| Julie: | Well the advantage to using a gif for text is that you have total control over the display.. it;s not dependant on the fonts the viewer has installed |
| Lisa: | One frustration for me as a user is that I can't highlight and copy the text if it's graphical... |
| PattiMay: | that is true Julie ... i've been experimenting with Style Sheets and getting a feel of the increased control I can have with them without adding a lot to load time |
| Julie: | Style sheets are awesome... |
| homeparentsADM: | that's a good point, Lisa..that bugs me on some pages I visit, as well.. |
| Julie: | if you have a browser that supports it.. |
| homeparentsADM: | patti, do you have your url...or urls? so I could check them out? |
| Lisa: | I want to tell everyone how many compliments I've received on the logo and the site Janet did for me. |
| PattiMay: | sure Barb http://www.applecountry.net/ my portfolio is there ... if you wish have a look at http://www.applecountry.net/client/dehumid for one in progress |
| Lisa: | http://www.wrdwrks.com |
| Julie: | I want Janet's opinion... |
| Lisa: | Also, Janet's various pages are one of my biggest referrers for my site... |
| PattiMay: | do you find that using graphics for small text is more effective than text styles Janet? |
| PattiMay: | was the question :) |
| Janet: | Well, text styles depend if the viewer has the fonts installed, and I want to know what the viewer is seeing, and make sure it is what I intend, so I use graphics |
| PattiMay: | i think Julie concurs :) |
| Julie: | I just have one wish.. and that would be for all old versions of all browsers would go away |
| homeparentsADM: | I found that out..I did a poem on at home moms..in a font that I couldn't see on my laptop..didn't realize different computer have different fonts till then |
| PattiMay: | oh do i agree on that Julie |
| Julie: | I found that I have a lot of visitors who use the aol browser and 256 colors :( |
| Julie: | that makes me sad.. |
| homeparentsADM: | like my old Netscape, julie? LOL |
| Julie: | Barb: well at least you can check my pages :) |
| homeparentsADM: | I have NS 3.01 Gold..i think it bugs Julie..haha! |
| PattiMay: | another peeve i have is when someone has a 17in monitor and runs it at 640x480 |
| Janet: | so Barb, why don't people upgrade? (hint, hint) ;-) |
| Janet: | well, I'll officially conclude the graphics chat.....! :) Thanks for coming, and Barb, I'll leave that URL (www.baxsie.com/hna) up there |
|
