Роман Ямчук

https://html5up.net/

Можете использовать любой lazy-load плагин, которому можно запретить подгрузку изображений при определённой ширине экрана. Также не подгружаются изображения установленные через background у блоков с display: none

*, *:before, *:after {
  box-sizing: inherit;
}

html {
  font-size: 62.5%; /* 10px */
}

body {
  font-size: 200%; /* 20px */
}

Итак, поехали: теперь у нас есть 2 типа относительных единиц REM (10px) и EM (20px). REM - будет фиксирован во всём документе. EM - можно переопределить для конкретного блока. После того как весь макет будет свёрстан при помощи относительных единиц - достаточно просто будет адаптировать его под другие разрешения:

@media all and (min-width: 1200px) {
  html {font-size: 39.0625%} /* 1200/1920 * 62.5 */
}

@media all and (min-width: 1440px) {
  html {font-size: 46.875%}
}

@media all and (min-width: 1600px) {
  html {font-size: 52.0833333333%}
}

@media all and (min-width: 1920px) {
  html {font-size: 62.5%}
}

Осталось только переопределить нужные блоки макета под разрешение

Через хэш и псевдоэлемент :target