Хороший тип и размер фонового изображения по умолчанию

Я использую это, чтобы установить фоновое изображение.

body{
  background: url('path_to_image');
  background-size: 100%;
}

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

Я создаю фоновое изображение в GIMP, чтобы оно было синим абстрактным изображением. Какой размер подходит для наиболее распространенных размеров экрана (в пикселях по ширине и высоте) и какой формат изображения подходит для его экспорта?

Вот пример одного фонового изображения, которое я тестировал:

http://dooid.me/images/uploads/1334771136brentreader.gif

Наиболее распространенный размер экрана, сообщаемый браузерами ( ссылка ), выглядит следующим образом:

1366x768

person Community    schedule 18.05.2013    source источник


Ответы (1)


1366x768 звучит хорошо, если это самое распространенное разрешение экрана в наши дни. Тип файла должен быть .jpg, если ваше изображение имеет много градиентов и тонких деталей, или .png (или .gif), если ваше изображение в основном представляет собой сплошные формы без сглаживания, например пиксель-арт. Всегда помните о качестве и размере файла при экспорте изображения!

Также хорошо, что вы используете абстрактное изображение для фона, так как использование background-size:100% может привести к растяжению в непредусмотренном разрешении (что выглядело бы глупо с более образными изображениями!).

person Orteil    schedule 18.05.2013