Как сократить время загрузки длинных изображений в высоком разрешении?

Question

[Ринат Хайсман]

Добрый час. На моем сайте есть портфолио, в котором по клику на превьюшку открывается страница с изображением работы (лендинга) в виде изображения. Весят такие файлы в среднем 5-7mb. Как можно уменьшить время подгрузки путем последовательной отрисовки? Чтобы подгружалась та часть картинки, которую человек видит.

PS: Не советуйте пожалуйста заменить картинки html сайтами или разбивать изображения на части.

Answer 1

[Олег]

Как вариант canvas, но опять таки все зависит от условий

Answer 2

[ThunderCat]

photoshop - > ctrl+shift+alt+s

Answer 3

[twobomb]

Даже не знаю, возможно как вариант яксом кидать на сервер координаты области на которую смотрит юзер, а на сервере будет скрипт на пхп который будет резать эту картинку и посылать вам именно эту часть ну это бред юзер то не будет долго смотреть на одно место, крч никак. Просто выдавайте картинку в плохом качестве и значок загрузки, когда загрузится меняйте на качественную. Либо заморочайтесь потратьте месяц на изучение принципов работы с изображениями и их передачей и т.п. и создайте свою супер библиотеку которая будет заниматься такими делами.
P.S. Еще вараинт держать ваши большие изображения на сервере в виде мозайки, тоесть изображение нарезано на много малых частей. Ну и грузить определенную область и складывать эту мозайку на лету, ну тут знания нужны. А раз вы сюда обращаетесь, значит с этим у вас проблемы.

Answer 4

[Combat7]

Создаете копию изображения низкого качества, и при загрузке страницы сразу загружаете эту копию, допустим она весит 100-200кб, и накладываете сверху прелоадер. И как основная картинка загрузится, скрываете низкокачественную и прелоадер.