CODEWITHSUNDEEP
htmlcss
Soheil
Soheil

Reputation: 627

html-choose proper size for images to avoid quality loss

I'm new to the world of html and css. I have been reading the html docs in w3schools and it is mentioned that:

Pixels (px) are relative to the viewing device. For low-dpi devices, 1px is one device pixel (dot) of the display. For printers and high resolution screens 1px implies multiple device pixels.

and it confuses me! imagine I want to define an img element with width=400 px. now is it enough for my image to have exactly 400 pixels as width? or for a high resolution screen it must have more (in order to be shown without quality loss)?

Upvotes: 0

Views: 336

Answers (1)

Love2Code
Love2Code

Reputation: 470

If you define your width as 400px the width of the image WILL be 400 px. Images tend to lose quality the more you zoom in. If you use really high quality images then it could affect load time. If you need high quality I would recommend using SVGs, scalable vector graphics. These are graphics made with XML markup and they don't lose quality when you zoom in. By the way, 400px will be fine for any screen time, unless the screen is too small to fit the image. In that case you would use percents of VW instead.

Upvotes: 1

Related Questions