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

Question

У меня есть маленький книжный сайт. У меня это есть, поэтому я загружаю изображение (страницу), размер около 1500x1948, но оно уменьшено с помощью css, чтобы лучше поместиться на ipad (оно становится около 946x728). Тогда у меня это так, если дважды щелкнуть изображение, оно масштабируется до исходного размера (1500x1948), и вы можете прокручивать страницу.

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

Кроме того, когда вы переходите в ландшафтный режим, он меняет свой размер на 475x366.

... Я также слышал, что лучше использовать большие изображения в качестве фона вместо реального изображения. Должен ли я сделать это? Будет ли это действительно иметь значение? Потому что у меня есть около 30-50 изображений ..

Спасибо!

Answer 1

Полагаю, это зависит от того, каков наиболее распространенный вариант использования.

Если ваши пользователи, вероятно, всегда будут дважды нажимать на изображение, то будет быстрее, просто подать им большое изображение и масштабировать с помощью CSS. Таким образом вы будете передавать меньше данных, что должно быть быстрее.

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

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

Answer 2

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