resolution, web image display issues

[matt1776]

Ive created an image in photoshop that looks real nice.

i use the save for web option and save it as a jpg.

However when displayed on the internet the 'red' on the right side of the logo in the header... its all fuzzy, why is that?

How can i get the image to look crisp like the way it looked when i was in PS?

[matt1776]

and the website would have helped no?

http://www.nevertap.com/event.php

[TiGGi]

it's probably your quality settings.
First of all you need to figure out if you want to save it as jpg or gif.
Usualy when you photos or gradients you would use jpg format since gif has only 256 colors. But when it comes to lines and object where there are only few different colors then gif is perfect.
Another way you can figure this out is when you go to save for web window
down on the bottom left corner there is file size that you need to watch for.
When saving as jpg file format you quality should be about 60% or High compression quality, anything less will be fuzzy and colors will start to bleed.
So changing file format jpg/gif watch the size of the optimized file and see which one is smaller, this way you know which format is better to use!

Hope this helps

[matt1776]

cool. ill give gif's a shot. i use jpg by default because as a result of an argument between a coworker and i, turns out jpgs load faster most of the time.

but i did not consider the color aspect.

[TiGGi]

just saw ur page;
All images needs to be in gif format except http://www.nevertap.com/i/cover.gif
Another problem with this one is that the actual image size is bigger then it's on the page
so you need to resize the image in photosho to be exact size as it it's on the page. Also make it jpg since there are quite few colors.

[matt1776]

is there a general sense about web images, display, load times etc? ie. is there a place where all of these considerations are specked out so i can see the pros and cons of each?

the reason i used jpg was for the aforementioned reasons, i am under the impression that they load faster. but again your right they dont look as good for lower color images.

[Robert Wellock]

Use PNG-8 over GIF, as PNG usually has a smaller file size when correctly compressed. I assume you know JPG is lossy and loses data every time you save the file not just when you edit the image.

[dogznbonz]

Take this from someone that has been developing graphics for many years now for companies that spend millions of dollars a quarter on web and print ads.

A good rule to go by is to never ever stick to one format. You'll want to experiment on a case by case basis. Soon you will get to where you can look at a graphic and tell whether or not you should save in gif or jpg.

It is a myth that jpgs load faster than gifs. It depends on the the size in reference to Kilobytes.

Some easy things to remeber are:
Always use 72dpi resolution for web graphics.
Photographs are usually saved in jgp.
Graphics with fewer colors, fades, and other varients are usually saved as gif.

If you use Photoshop you can use the "save for web" feature to preview the image using gif vs. jpg. You can see the quality and kilobyte size in real time so that you can make the best decision. Once you flip back and fourth a couple of times you will want to stick with the one that looks the best while keeping the kilobyte size to a minimum.

in regard to one resource that will give you all the guideline you need. I'm not sure one exists, but a good rule of thumb to live by is to never let your page exceed 100 Kilobytes in size including menu items, banners, and all other graphics.

There are still massive numbers of people who do not have high-speed Internet access and if you build a site that exceeds the limits I mentioned above you rule out just about all of the dial-up users.

[matt1776]

cool, that helps thank you :)

[slaughters]

is there a general sense about web images, display, load times etc? ie. is there a place where all of these considerations are specked out so i can see the pros and cons of each?

the reason i used jpg was for the aforementioned reasons, i am under the impression that they load faster. but again your right they dont look as good for lower color images.You can go here for a speed report on your site:
http://www.websiteoptimization.com/services/analyze/wso.php?url=http://www.nevertap.com/event.php

[Robert Wellock]

It's actually a myth about 72dpi and web graphics via VDU. The 72dpi is actually a FONT SIZE but still it's a good general rule as typically the browser usu. won't show much above 72dpi anyway. Plus there is hardly any reason to save as *.gif for the final image unless it's animated or a early version 4.xx browser (and some rare cases).

[slaughters]

It's actually a myth about 72dpi...True - DPI is meaningless for the web. What has meaning is the number of pixels in an image.

The standard screen resolution for people web surfing seems to be 1024x768 pixels (WidthxHeight). But some of that is taken up by browser window components such as Navigation tool bars, menu items, scroll bars, etc..

In practical terms you have about 1000x560 pixels to work with when a browser window is maximized to its full size. More like 980x540 if you want to leave comfortable margins on all sides.