Images are too granular

Question

What is the reason for the granularity of images in HTML documents?

I have scanned some documents and created corresponding JPEG images with the following properties: image size: 2452 x 3508 pixels
resolution: 300x300 ppi
JPEG, RGB

and included them into an HTML document with: <img src="image.jpg" height="100%" />
I have opened the web page on a big monitor and on a notebook.

In both cases the quality of the images is very bad. They are too granular so that the text is difficult to read. Although if you open them in the standard Windows image viewer you can see every small detail.

How to include an image into an HTML document without losing the quality?

Answer 1

You are scanning an image at print quality and displaying it on a screen that usually cannot handle more than 96 DPI at max.

Re-scan the image using a lower DPI setting and don't try to display an 8 Megapixel image in a browser window.

This may seem counter-intuitive to what you wish to accomplish, but its not. You will never get a scanned image to display on a computer screen as if it where print quality. (Until we all have retina quality displays for monitors)

Answer 2

Try removing height="100%" from image tag.

<img src="image.jpg" />