Please help!

Hi, I'm designing some graphics for a website. When I added those graphics to the html files, they become slightly blurred (sharpness is reduced). I don't know how to solve that problem. Do you have any idea why that happens? your help is greatly appreciated. Thanks.

P.S- I use photoshop 7.

What format are you saving them in? Make sure that if you're saving as .jpg that you're not setting a blur. What quality are you saving the images as?

Hi elkehinze!, thanks for the reply. I save them as png, i also tried with gif format. I have set blur to 0 and quality is 100. The problem occurs when the images are published in the html files.

That shouldn't make a difference really. How are you putting them in your html?

I'm new to web designing. I put them in img tags in div tags. I also set width and height to them. I link to the image files i have in my local disk since i haven't yet bought space to host the site. Thanks

Okay I'm going to assume that you're testing everything locally then?

What browser are you using? Really linking to the file shouldn't change the quality. Are you sure they saved as you expected they would?

Yes. I'm testing my site locally and I'm using firefox. When i save images from photoshop to the local folder, the images have the same appearance as they do in photoshop. But everthing changes when i add it to the page and view it in the browser.

Paste your code here.

are you changing the resolution of your pics when saving?

<div id="left">

<img class="left" src="file://E:/images/small.gif" height="193px" width="292px">
</div>

<div id="center">
<img class="center" src="file://E:/images/c.gif" height="193px" width="292px">
</div>

<div id="right">
<img class="right" src="file://E:/images/map.gif" height="193px" width="292px">
</div>

Hi thanks for the reply. I never change resolution when saving image files.

When using the height and width attributes in an image tag the proper way is to do it like this:

<img src="myimage.jpg" height="197" width="200">

Do not put px in there.

Thanks so much. Do you think that it's the reason for that issue?

Yes I think it could be. The browser may not have been properly sizing the images. Let me know what happens.

Hi, finally I was able to solve the problem. I removed the height and width properties from the img tags and the images look really good.

Also I have another question, If I use a lot of divs in my page layout, will it badly affect the download speed of my site?

Thank you very much for helping me solve the problems.