CODEWITHSUNDEEP
cssretina-display
Alok Jain
Alok Jain

Reputation: 3518

retina display image dimentions

I have created icons of 2 sized 40px X 40px and 80px X 80px for normal display and retina display respectively.

what is the proper way to use these 2 sizes of icons?

I mean should i change the dimensions of element for retina version to 80px X 80px or use background-size property to fit the large icons in 40px X 40px size?

Upvotes: 1

Views: 257

Answers (3)

Alok Jain
Alok Jain

Reputation: 3518

I found that i need to keep the dimensions in CSS same for both normal and ratina versions, and fit the large image in normal dimension using background-size property.

Upvotes: 0

Colin Bacon
Colin Bacon

Reputation: 15619

It depends on how you are using these 'icons'. Are they web app icons, images within the web page or background images?

Firstly retina images should be named with @x2.e.g.

Standard

sample.png

Retina

[email protected]

For web app icons see the previous answer from cpattersonv1

Background Images

This can be achieved with the use of media queries. A media query to target retina capable devices would look like this.

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
}

From within the media query you can then specify your retina image for the background-image.

Upvotes: 0

AbsoluteƵERØ
AbsoluteƵERØ

Reputation: 7880

You should follow the Safari Web Content Guide from Apple.

Specifying a Webpage icon

Upvotes: 1

Related Questions