Какое средство для обеспечения отзывчивых картинок следует вам использовать?

Статья хорошая и обстоятельная.
По существу вопроса: в голове одна мысль — «дело ясное, что дело темное».
В том смысле, что до появления нового поколения стандартов и браузеров все эти костылики кривоваты. И я скорее даже хочу, чтобы они не получили большого распространения.

Responsive Images (первоначальная версия от Filament Group) также пользуется .htaccess. Так что если в качестве сервера у вас нечто вроде Nginx, то придётся либо отказаться от этого технического средства, либо портировать код .htaccess на подобный ему, но отличающийся синтаксис конфигурации Nginx

Очень долго портировал, аж секунд пять. В следующий раз просто откажусь.

location /assets/ { }
location /ai-cache/ { }
location ~* \.(?:jpe?g|gif|png)$ {
  # php settings
}

Всё можно очень упростить, ведь совершенно не нужны десяток картинок под разные разрешения, а достаточно минимум два дополнительных.

Например, имеем обычную (среднюю) картинку в 500 точек для статьи, предположим под среднее разрешение экрана в 1024.

Остальные картинки уже подыскивает под нужное разрешение сам браузер, под которым будем смотреть статью. А как он это сделает? Очень просто — используя Media Queries в стилях.

То есть, для роботов и поисковых систем всегда будет выдаваться картинка одного размера — средняя.

Правило же именования файлов можно как-то стандартизировать. Например, так:

<img src=«pic.jpg» /> — это средняя картинка для поисковиков.

Дальше, используем css:

@media (min-width:320px) { img {max-width:320px;} } — то есть, показываем, что все картинки (ну или можно использовать какой-то класс для ограничения) имеют размер по горизонтали не больше 320 точек. При этом где браузер будет находить эти картинки? Например, можно договориться, что это будет такое наименование файлов: pic-width320.jpg, то есть, просто приставка к имени. Причём эти приставки можно использовать для автоматического резания картинок через nginx с раположением их в кеше.

Обычно нужно не более 3 вариантов размеров картинок — 150...320 для мобилок, 500...600 средняя для большинства компьютеров с экраном 1024 и поисковых роботов, и соотв. для больших экранов добавляем ещё один, например, 1024 точек.

@media (min-width:1024px) { img {max-width:1024px;} }

И всё. И никаких скриптов не нужно, не нужно никаких лишних атрибутов в html коде.
Оформление должно быть расположено там, где ему место — в CSS.