Что лучше для производительности? несколько изображений с их размером приспосабливаются к их местам или только одному?

Question

У меня есть веб-страница, в которой я использую картинку в качестве фона на нескольких разделах. Это большой (около 1200x1200). Но, каждое место, где я ставлю его, имеет несколько размеров, например, нижний колонтитул имеет размер около 1000x1000, один раздел в середине веб-страницы имеет размер 200x300 и заголовок около 1100x1100.

Итак, мой вопрос: что лучше для работы? Должен ли я создавать несколько снимков с соответствующим измерением, насколько это возможно в их соответствующих местах, просто нужно ли сделать тяжелую работу в браузере?

Answer 1

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

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

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

Answer 2

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

Но ваше изображение относительно большое и близкое - одно изображение на 1200, 1100 и 1000 квадратных, а также небольшое. В этом случае я думаю, что лучше использовать одно большое изображение и позволить браузеру повторно использовать этот кеш, возможно, поддерживаемый отдельным 200x300.

Хотя скорость декомпрессии изображения иногда является фактором, она часто затмевается из-за времени передачи и ошибок страницы.

Но это тоже помогает. Большинство времени рендеринга тратится на декомпрессию изображения. Масштабирование относительно быстрое. Совместное изображение может повторно использовать одни и те же несжатые данные («необработанное изображение»). Детали довольно сложны и выходят из вашего контроля, как обычно, но это не повредит, если вы попробуете. Даже если он не может сохранить время рендеринга, по крайней мере, вы уменьшите вероятность заполнения кеша памяти.

Имейте в виду, что разные браузеры могут масштабировать изображение differently, и у вас есть few control над ним. Если результат недопустим, у вас мало выбора, но, по крайней мере, вы пробовали.

Если вы в конечном итоге используете одно или несколько изображений, попробуйте использовать mozjpeg, чтобы оптимизировать его/их. Вы получите гораздо меньший размер для того же качества (и наоборот), чем из Photoshop или других обычных инструментов.

Answer 3

Одно большое изображение всегда лучше.
Если есть много небольших изображений, браузер должен сделать так много запросов. Это может создать много сетевых издержек. Таким образом, вы можете использовать одно большое изображение, содержащее все изображения &, вы можете показать его часть, используя Image Sprites. А так как @Sheepy предлагает оптимизировать изображения, используя Tinypng.com.