Как скрыть долгое подгружение картинок?

Question

[Worddoc]

Здравствуйте. На сайте долго прогружаются картинки, сверху вниз и длится и это секунд 8. В чем могут быть проблемы и как скрыть этот недостаток? Возможно кто-то знает, как уменьшить вес картинок? Картинки в Png.

Comments

[crescent]

есть еще lazyload
те такой же механиз загрузки вконтакте к примеру
(грузит дополнительные когда пользователь скролит до них)

Answer 1

[mletov]

1) сохранить картинки как jpg и поискать компромисс между размером и качеством.
2) Картинки отображаются в реальном размере или уменьшаются средствами html/css ?
Если второе, то сделать так, чтобы отображаемый размер картинки совпадал с реальным

Comments

[Worddoc]

1) Попробовал изменить формат вручную, картинки теперь вообще не грузить, нужно переформатировать их.
2) Да. Но картинок поменьше для подгрузки в случае маленького или большого экрана нету...

[mletov]

Фотошоп эту задачу решает на раз, что-то не так делали.
Т е сайт резиновый/адаптивный, что они все время разных размеров?

[Worddoc]

mletov: Да, сайт адаптивный. Достаточно ли в фотошопе просто сохранить картинку в jpeg\jpg(кстати, что лучше?) и все?

[Максим Тимофеев]

1) сохранить картинки как jpg и поискать компромисс между размером и качеством.

Это далеко не всегда уменьшает вес.

[mletov]

Да, просто сохраните в jpg и качество установите 0.7-0.8. Про тянущиеся фотки самому интересно, т к ИЕ достаточно сильно поганит при сжатии.

[Worddoc]

mletov: Изменил разрешение, качество сделал 50% и в jpg. Размеры уменьшились в сотни раз. Спасибо

Answer 2

[zooks]

Если это полноцветные фотографии, то сжать в Jpeg со степенью сжатия 75%.
PNG всегда много весит, если нет одноцветных заливок.

Answer 3

[Максим Тимофеев]

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

Прислушайтесь к zooks и примите к сведению:
полноцветные фотографии - jpg
графика, элементы дизайна, картинки с прозрачностью - png
есть еще svg, но там в две строчки не опишешь где стоит применять, так что пока не думайте об этом

Answer 4

[yurchik25]

надо уменьшить вес картинок. У меня была похожая проблема, потом я решил резать их с помощью фотошопа, но это долго. Ну я не сильно дружу с ним)))
потом один знакомый программист порекомендовал програмку, она простенькая и ее даже устанавливать не надо. Называется fotosizer, я без изменения размера уменьшал jpg почти в 3 раза.