Retina Display и PPI

Question

Могу ли я использовать такое же разрешение (ppi) и просто удвоить размер изображения для экрана Retina Display? Например, использовать изображение с разрешением 72 пикселя 400x800 для изображения с разрешением 72 пикселя 200x400? Будет ли это выглядеть точно так же? Как насчет размеров шрифта?

Answer 1

Я экспериментировал с этим сам. Кажется странным, что вы не можете использовать изображение с высоким разрешением, а не изображение в два раза больше.

Таким образом, в ответ на ваш вопрос, да, вы должны сделать изображение в размерах. Я прочитал, что размер изображения должен соответствовать глубине 4x пикселей, например, изображение размером 200px x 300px должно быть размером 400px x 600px, а затем в вашем css сделать изображение 50%.

Вы можете столкнуться с трудностями при создании фреймворка, в котором размер изображения изменяется в соответствии с размером окна.

Я экспериментировал с некоторыми CSS для отображения изображения сетчатки в столбце div, размер которого изменяется в зависимости от ширины экрана. Кажется, что это работает, и divs удерживает изображение с отображением изображения сетчатки на уровне 50%.

CSS:

.columnLeft{
float: left;
width: 30%
max-width: 200px;
min-width: 100px;

}
.imageHolder{
float: left;
width: 100%

}
.imageHolder img{
width: 50%
}

Дивы:

<div class="columnLeft">
    <div class="imageHolder">
       <img src="images/airline.jpg"/>
</div>

Answer 2

Проверить ответ Скоттс - https://graphicdesign.stackexchange.com/questions/13777/is-it-mandatory-to-keep-72-dpi-for-web-design-what-if-i-create-in-200dpi

В основном DPI не имеет значения. Веб отображает ширину и высоту пикселя, поэтому ваше изображение должно быть ровно вдвое больше при соотношении пикселей устройства 2 (Apple называет эту сетчатку).

Если вы используете текст вне изображения, сам браузер создаст необходимые пиксели.

Если текст находится в графическом файле, он должен быть в два раза больше