Как правильно работать с изображениями при создании адаптивного сайта

Корректно добавить изображения в адаптивный дизайн немного сложнее, чем в фиксированный макет.
Самый простой вариант — это определиться с каким-то средним разрешением для изображений и подготавливать картинки в соответствии с ним.
Для того чтобы изображение не превышало размер блока, в котором оно должно находится, в CSS можно добавить правило:

img {
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Это правило задаст изображению максимальную ширину, таким образом, оно не будет превышать ширину контейнера. Свойство height со значением auto обеспечит сохранение пропорций изображению при его уменьшении. Три последних CSS свойства (если необходимо) позволят отцентрировать изображение по горизонтали (когда ширина изображения меньше ширины контейнера).

Кроме этого, изображения на меленьких экранах желательно отображать так, чтобы они занимали всю ширину viewport. Если у вас имеется отступ для контента страницы, то его для изображения можно убрать, например, так (с помощью CSS):

@media screen and (max-width: 768px) {
  img {
    /* значение необходимо установить в зависимости от поля */
    margin-left: -15px;
    margin-right: -15px;
  }
}

Более сложный вариант заключается в том, чтобы подготовить различные версии одного и того же исходного изображения для различных классов устройств. Тут тоже необходимо определиться с форматами изображений. Например, можно выбрать следующие значения ширины: 375px, 750px и 1500px. В соответствии с значениями ширины именовать и файлы. Например, image1-375w.jpg (имеет ширину 375px), image2-750w.jpg (имеет ширину 750px), image1-1500w.jpg (имеет ширину 1500px).
При выводе изображения (img) использовать атрибуты srcset и size.
В srcset указать ширину изображения в пикселях:

srcset = "image1-375w.jpg 375w, image1-750w.jpg 750w, image1-1500w.jpg 1500w"

В атрибуте sizes ширину, которую должна иметь изображение на том или ином устройстве.

sizes = "(min-width: 768px) 60vw, (min-width: 992px) 50vw, 100vw"

vw — задаёт ширину картинки в зависимости от ширины viewport. 1vw = 1% от ширины viewport.

В итоге вставка изображения на страницу адаптивного сайта будет осуществляться так (HTML код):

<img src="image1-750w.jpg"  srcset = "image1-375w.jpg 375w, image1-750w.jpg 750w, image1-1500w.jpg 1500w" sizes = "(min-width: 768px) 60vw, (min-width: 992px) 50vw, 100vw" alt="Текст о том, что изображено">

Теперь браузер будем загружать именно то изображение, которое будет более точно соответствовать устройству (на основании ширины viewport и количеству физических пикселей формирующих один CSS пиксель).

Если можно с помощью html, css,js с ними я хоть немного знаком, по php не знаю вообще ничего(кроме того что такой существует).Интересует какие основные ошибки допущены и варианты их решения на примере верстки по данному адресу.Много начинающих делают однотипные ошибки и на примере вашего ответа будет значительно легче разобраться со своими ошибками.Пробовал в зависимости от ситуации использовать width,max-width(особенно интересует мобильные в альбомной ориентации) Ну и в общем ошибки я думаю их там много.Можно даже статью по принципу «так делать не правильно а так правильно» или что-то в этом духе.

Это необходимо решить с применением серверного языка PHP или нет?