Да вы совершено правильно размышляете, но есть маленький нюанс, объем данных, которые вы сэкономите сократив пару десятков строк HTML, с включенным сжатием - это чистой воды экономия на спичках.
Если заморачиваться на подобном уровне оптимизацией, то имеет смысл совсем отказаться от бутстрапа, так как он может весить лишних 400-500кб, и написать свой микрофреймворк адаптивных элементов, либо иные @media стили.
Если вы паритесь касательно того что в display:none никто не мешает использовать LazyLoad.
И еще есть интересный момент, для mobile и для desktop полезноотдавать разного размера изображения. Но реализация через чур громоздка в силу нескольких моментов. Во первых надо пережать сразу изображения в кеш в несколько размеров, во вторых в верстке или отказаться от <img> и выводить изображения через css {background-img} формируя для каждого товара в списке свой айди и после этого генерируя уникальный контейнер с @media стилями под разные разрешения. Либо используя <img>, возвращаемся к lazy и грузим файлы через js, в зависимости от разрешения.