Some .gifs, .pngs and .jpgs show pixelated

[jcrewe]

Hi there,

I am wondering if anyone knows why some of the pictures I have added to my site are pixlated? Here's a little more detail:

I have created a 'sell sheet' that I would like to add to one of my ez pages. I have saved the document in jpg, png and gif format and saved it at 300 dpi. I upload it onto my ez page in the html content section using the image button and then resize it a little smaller so it fits on the page and it appears pixelated...the edges and text are not smooth. I have tried using all three formats but I have the same results. I dont have this problem when using a photograph or in the product image section for each product...only when I add a non-photography image to a product description or html content section.

I removed the sell sheet from the ez page and kept the original one there, however, even the original picture I have on there is pixelated. Here's a link to the page: http://funwrappers.ca/index.php?main_page=page&id=1

Crossing my fingers someone can help me out with this one as I'd really like to use my sell sheet to spruce up that section of my site.

Thanks in advance

[stevesh]

The image in your example doesn't look pixilated to me. Can you use the sell sheet instead ?

[jcrewe]

Thanks Stevesh for talking a look. Weird that the image you saw didnt look pixelated to you because it does on my computer. I have changed the image to the one that I actually want which is my sell sheet. It's still looking pixelated on my end

Thanks,

Jenn

[stevesh]

Could be we mean different things by 'pixilated'.

How does this image made from a screenshot of your page look there?

http: //www.stevesh.org/demo/sheet.jpg

[gjh42]

Two points:

Since you are using a 300dpi image and displaying at 72dpi. the browser has to resize it every time someone views it, which is generally quick & dirty, and less effective/graceful than Photoshop's rendering.

You have a huge image file (1196 kb) which takes a long time to download on slower connections. This is bad.

What you should do is make a copy of the image in Photoshop or whatever that is the exact pixel size you want it to display at. This will load faster and look better.

[jcrewe]

Stevesh, we might be meaning two different things. What I am referring to is that the lines dont look smooth almost as if it is a low resolution image. I tried the link you posted but it doesnt seem to be working

gjh42, you make some very good points! I have to get out of the mindset that just because it loads quickly on my computer doesnt necessarily mean that it is for everyone else. I am assuming that if the image is displaying at 72dpi then saving at 300 dpi is actually causing more problems. I will resize my image so it doesnt take so long to load. I am wondering if you happen to know of a way to know what size the image should be? Is there some kind of calculation or formula to determine the size an image should be on a webpage?

Thank you both so very much for taking the time to help me out with this...it is very much appreciated

[gjh42]

If you know how big the page dimensions are (in pixels), you can set that directly in Photoshop's Image sizing tool. You just need to select the right units.

[jcrewe]

Thanks gjh42....I will look into how to determine the size of the page and resize the image. I am wondering, though, if the picture appears low resolution on your monitor? It does on mine but I got the impression that it looked okay to Stevesh.

Thanks

Jenn

[jcrewe]

Okay, I resized the image and I think it looks a little better, still not exactly what I was hoping for but it's a little better

[gjh42]

Any gif/png with indexed colors (i.e. only certain colors allowed) cannot smoothly scale down, as you can't get blended tones to approximate the mixed edge areas.

What you have now is definitely better; you could probably improve it more by allowing a greater range of colors in the image when saving it.