Сетка изображений на веб-сайте, можно ли уменьшить масштаб изображений с помощью CSS?
У меня много изображений с разрешением около 500x1500, и я хочу показать все эти изображения в виде сетки на моем веб-сайте. Каждое изображение в сетке должно быть 200x200px.
Если я уменьшу изображения с помощью CSS с 500x1500px до 200x200px и покажу на своем веб-сайте 10 изображений 200x200px, означает ли это, что посетитель должен сначала загрузить изображения размером 500x1500px, а затем браузер уменьшит их размер?
Если это так, то это плохое решение сделать это, верно? Вместо этого у меня должно быть две версии каждой картинки, одна версия 500x1500px и одна версия 200x200px. Я прав?
Тогда возникает вопрос: как проще всего уменьшить сотни изображений?
2 ответа
Вы правы. Вы можете установить высоту и ширину изображений, но 1) пользователь должен будет загрузить изображение большего размера, чем необходимо, и 2) соотношение высоты и ширины будет проблемой (большое 1x3, а маленькое 1x1). Я бы использовал http://www.imagemagick.org/, gimp или аналогичный инструмент для обрезки изображений, но проблема в том, что обрезанная область может быть не очень хорошей. Только человек может выбрать подходящую для обрезанной области:-(
Edit1: Возможно, хорошо обученная нейронная сеть могла бы выбрать наиболее "интересную" часть каждого изображения программно, но это довольно сложная задача. Тем не менее это может быть довольно интересно:-)
Да, я думаю, что в этом случае браузер загрузит увеличенное изображение, а затем масштабирует его. Вы можете проверить это самостоятельно, открыв инструменты dev в браузере (нажмите F12, если вы используете Chrome) и отслеживая сетевой трафик при перезагрузке сайта.
Самый простой способ уменьшить сотни изображений - найти или написать программу для этого.