Question

Здравствуйте. Стараюсь оптимизировать скорость загрузки сайта для мобильных устройств. Идея такая: что если каждый элемент с картинкой на сайте продублировать и на полной версии показывать блок div с высоким качеством изображений, при итом у div с низким качеством изображений прописать display:none, а в мобильной наоборот - блок div с качественными картинками display:none, а с плохими - показывать. Пойдёт такой вариант? Может есть какой-то более цивилизованный способ оптимизировать изображения чтобы и на компьютере красиво и чтобы на мобильном быстро? Если блок div display:none, то браузер его не будет загружать? Поисковики не накажут за скрытые блоки?

Answer 1

Пробуйте с помощью условий Media вида:

@media screen and (min-width: 340px) and (max-width: 650px) { 
   .eMessage img,.eText img {width:200px!important;height:auto!important;}
}

в данном примере я задал разрешение начиная с 340 пикселей до 650 далее прописывайте под себя, а далее надеюсь поймете, что классы с стилями которые внутри условия, к ним применяем изменения при заданном разрешении. В нашем случае это класс отвечающий за фото вида материалов и страцы комментариев модулей(каталогов).

Более детально об использовании условий Media - http://htmlbook.ru/css/media

Comments

А разве есть разница какое разрешение картинки выставить? если она весит 500 кб, то поставь хоть 1200 px, хоть 50 px, всё равно браузер будет загружать 500 кб и на скорость это не повлияет. Или я ошибаюсь?

---

Andrey Filimonov,

Чтобы не нагружало, нужно превью использовать, в вашем случае этого не получится так как вы загружаете фото на фтп не используя для этого доп поле Изображения.