Как оптимизировать загрузку изображений?

Имеется страница с большим количеством текста и картинок, грузится ужасно долго и жрет кучу траффика. Есть смысл может написать какой-то скрипт, который будет превьюшки возвращать вместо целого изображения? Я так понимаю, если контейнер 100х100, а картинка 3000х3000, то она всё равно грузится целиком? Может есть для этого какие-то стандартные решения, чтобы не изобретать колесо? В идеале хотелось бы, чтобы грузилось под размер контейнера автоматом (в данном примере 100х100), а при клике грузился полный размер, при повторном клике сворачивалось назад...


Ответы (1 шт):

Автор решения: Yaroslav

Картинки можно обрезать на php +

как вариант можно в атрибут src вставлять обрезаную картинку 100*100

Дальше добавить ко всем тегам img какой нибудь дата атрибут(data-image-origin) в который записывать пук к оригинальной картинке. На js при клике на картинку подменять значение атрибута src на значение data-image-origin

→ Ссылка