Оптимизация изображения под разный размер изображения

Question

Мне нужно использовать картинку с оригинальным размером 375 x 375 пикселей в 4 разных размерах (375 x 375, 200 x 200, 160 x 160 и 90 x 90 пикселей) на моем собственном веб-сайте.

Если я хочу оптимизировать изображение на моем веб-сайте, я должен создать четыре разные папки для каждого размера и поместить изображение с их собственным размером в эту папку!? Или есть лучший способ?

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

$(this).data({'image': thumbImage, 'zoom-image': zoomImage}).find('img').css({'width': '90px', 'height': 'auto'});

Answer 1

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

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

• /images/375/myimage.jpg
• /images/200/myimage.jpg
• /images/90/myimage.jpg

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

• <img src="/images/myimage.jpg" width="375">
• <img src="/images/myimage.jpg" width="200">
• <img src="/images/myimage.jpg" width="90">

изображение нужно будет загрузить только один раз, а остальные два раза будут доступны из кэша браузера.

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