сохранение нескольких эскизов против css

Question

Я работаю над сайтом, который в настоящее время хранит миниатюры размером 100x100. Дизайнер работает с нами и создал дизайн, который требует эскизов 100x100, 32x32, 22x22 и 16x16.

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

Мой вопрос: должны ли мы создавать и хранить миниатюры каждого размера? Или достаточно ли сохранить миниатюру как 100x100 и просто использовать CSS для достижения меньших размеров миниатюр?

Моя теория заключается в том, что использование эскиза 100x100 по всей доске и использование CSS для получения желаемого размера будут работать лучше (то есть: быстрее загружать страницы), чем хранить каждый отдельный размер.

Почему я так думаю?

Поскольку в первый раз, когда загружается 100x100, он будет кэшироваться, и CSS будет «изменять размер» на всей странице, где используется одно и то же изображение. Если мы будем хранить и ссылаться на разные файлы изображений явно, нам нужно будет захватить 4 файла вместо одного и не сможет также использовать кеш браузера.

Мысли?

Answer 1

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

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

Одна вещь, которую вы могли бы сделать для сокращения запросов, - использовать скрипт на стороне сервера, чтобы поместить все миниатюры каждого размера в сортировку по сортировке (отсортированную по размеру ... вы также можете сделать это вручную, если бы это было для статического page) и используйте CSS для настройки границ представления. Так JQuery делает свои кнопки. Это сделало бы это так, что вам нужно было бы запросить только одно изображение для загрузки всех миниатюр для заданного набора. Когда ваш конечный пользователь попросит увеличить размер миниатюр, ваша страница может затем динамически запрашивать большие размеры. Недостатком этого является то, что если у вас много изображений на каждой странице, у вас будет одно большое изображение для загрузки, и я считаю, что со многими браузерами пользователи не будут видеть изображение до полной загрузки. Используя отдельные миниатюры, они могли видеть, как они прогрессируют.