Есть ли идеальный размер для фоновых изображений?

Question

Например, будет ли изображение 1x1 загружаться быстрее, чем 2x2? Размер был бы меньше, но браузер должен был бы работать вдвое больше, верно?

Итак, есть ли идеальный размер и форма (квадрат или прямоугольник) для фоновых изображений?

Я знаю, что это, вероятно, не так уж важно, но мне интересно знать.

Спасибо

Answer 1

Я не думаю, что есть "идеальный" размер для вашего изображения.

Хотя качество изображения будет влиять на время загрузки. Изображение со встроенными насыщенными цветами будет тяжелым по сравнению с другим с таким же размером.

Наконец, выбор фонового изображения целиком зависит от ваших потребностей . Если вам нужно изображение 2 * 2, вы должны включить его.

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

CSS-спрайты

и некоторые инструменты для оптимизации изображений

12 действительно полезных инструментов оптимизации изображений для веб-дизайнеров

Answer 2

Я заметил, что разбиение очень маленьких изображений (например, 1 × 1 или 2 × 2) очень медленно во многих браузерах. Поскольку с большинством форматов сжатых изображений почти нет недостатков в увеличении с повторениями, я думаю, по крайней мере для мозаичных изображений вы должны выбрать изображения размером не менее 50 × 50 пикселей, чтобы уменьшить сложность рисования в UA.

Answer 3

Просто обратите внимание: если вы пытаетесь ускорить загрузку, затраты на загрузку изображения 1x1 против, скажем, 10x10, незначительны, особенно для прилично сжатых изображений - как для клиента, так и для сервера.

Поэтому, поскольку рендеринг определенно быстрее / лучше с 10х10, выберите больший размер изображения.

Answer 4

Идеальный размер будет отличаться от одного браузера к другому, от одной системы к другой.

Не делайте его слишком маленьким или слишком большим. Фоновое изображение размером 1x1 может иметь проблемы с рендерингом в некоторых браузерах. Вы должны по крайней мере сделать несколько пикселей в каждом измерении.

Я помню, что Netscape 4 отказывался повторять изображения, если их ширина составляла менее десяти пикселей. Браузеры сегодня менее чувствительны, но все же имеет смысл не делать изображения слишком маленькими.

Сжатие изображений (по крайней мере, для изображений GIF и PNG) основано на повторении, поэтому если вы увеличите изображение, повторяя его, дополнительный размер изображения очень мало увеличит размер файла.

Answer 5

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

Но на самом деле, игнорируя время загрузки, любая разница во времени рендеринга будет незначительной, поэтому имеет смысл просто использовать изображение меньшего размера, если вы можете.

Я также укажу на очевидное, что если вы используете повторяющееся изображение 1x1, вам следует вместо этого использовать цвет фона.