When I was previewing my site on Firefox and IE, I noticed the quality of the pictures that are on my site were much different from each other. (the pictures themselves are not very good quality to begin with) Firefox displayed the pictures beautifully with no visible distortion, while IE displayed the pictures with a pixelated view. Also, in my code I separated the pictures (vertically) with a break; this shows up in Firefox, but in IE there is no space between the pictures.
Can someone shed some light on why this is? And if it is not apparent already in someway, I am a beginner at all things HTML/CSS/Dreamweaver, but slowly learning.
It's not very easy without seeing it. If you have a link to the page then please post that here.
One thing that I can think of is that the image is resizing somehow and/or not being rendered with the original width: height ratio. When you put images on the web they should be optimised. They need to be the smallest possible file size without compromising quality and usually, the right pixel dimension to fit.
Crucially, it would help to post a link to the page.
Thanks for the reply Martin.
Unfortunately I'm not up on the web yet, so I'm unable to show you exactly what I mean. But I do understand that I should optimize the pictures beforehand. Are there any general guidelines to ensure the 'right fit'?
Here's a sitepoint article about using photoshop's save for web. If you have photoshop or fireworks they will do the hard work: http://www.sitepoint.com/optimizing-images-for-the-web-with-photoshop/
If you Google it there is plenty out there and yo can even find on line optimiser.