CODEWITHSUNDEEP
htmlcsstwitter-bootstrapresponsive-designtwitter-bootstrap-2
PHPLover
PHPLover

Reputation: 12957

How to show the same logo image with proper dimensions on all devices and browsers?

I'm designing a website using Bootstrap framework 2.0.1.

But I'm having one issue with the image logo I used on my website. The logo image looks fine on PC and laptops but when I see this logo image on devices like iPhone and iPad it loses it's quality, the image logo looks blur and stretched.

So my question to you is how should I overcome this issue?

Do I need to create three different copies of same logo image with different dimensions and use them respectively for laptop/PC, iPhone and iPad? If yes how?

If there is any other better solution for this problem please let me know.

Thanks in advance.

Upvotes: 0

Views: 172

Answers (2)

MintWelsh
MintWelsh

Reputation: 1259

have you considered converting the image to an SVG? because it uses vectors rather than pixel data it won't distort regardless how far it gets stretched/squashed. and i believe it's cross-browser compatible back to ie8

http://caniuse.com/#feat=svg

you can download inkscape for free (or use illustrator if you have it) and try converting the image to SVG to try it out

Upvotes: 0

Topr
Topr

Reputation: 882

One option regarding different image copies based on resolution, would be the srcset attribute. It specifies sources for an image based on the pixel density of the user’s display.

For example:

<img src="small.jpg" srcset="medium.jpg 1000w, large.jpg 2000w">

"In the simple example above, all we're doing is telling the browser about some images that we have available and what size they are. The browser then does all the work figuring out which one will be best."

Read more here.

Upvotes: 2

Related Questions