Адекватного качества PNG-файлы будут всегда весить больше JPEG аналогичного качества при визуально соотносимом количестве цветов. Ни один крупный магазин не использует PNG как по причине сложности постоянного удаления фона у фотографий, так и по причине большого веса PNG. Плюс, PNG сложнее декодируется, что повышает нагрузку на устройства и замедляет рендеринг, что в ряде случаев может быть заметно.
Вышесказанное релевантно, даже если прогонять PNG через TinyPNG, а точнее через алгоритм, который этот сервис использует: https://pngquant.org
До момента активной пробы различных методологий, я советую просто практиковаться, чтобы понимать, как решать те или иные задачи с точки зрения самой технологии. CSS-методологии помогают держать код в однородном виде, помогают писать код быстрее, позволяют делать код поддерживаемым. Но знание CSS, механизмов их работы — они не дают.
Я тоже в самом начале забил себе голову этим всем, но практического толка это мне не дало, т. к. я плохо знал самое главное — принципы работы HTML/CSS на практике. Именно с практики советую начать, а не с методологий и подходов как таковых. Только тогда сможете оценить, какие проблемы они решают.
Я недавно для прикола посмотрел несколько лекций HTML академии, но, честно, особого смысла в них не увидел, несмотря на то, что положительные стороны у них тоже есть. Главная проблема — они не дают практического опыта разных проектов и моментов (на мой взгляд).
Такая же песня с сохранением нативных механизмов прокрутки, но без лишнего функционала. Но он иногда нехорошо работает с механизмами а-ля .slideToggle().
