Как создать вторую рамку позади изображения, смещённую влево и вниз?

Лучше всего — нарисовать «вторую» рамку псевдоэлементом у родительского контейнера и положить её позади самого <img>. Это не требует правки HTML, только CSS.

Пример (если картинка внутри контейнера, например <div class="pic">…</div>):

.pic {
  position: relative;            /* требуется, чтобы абсолютный псевдоэлемент привязался к контейнеру */
  display: inline-block;         /* или нужный вам display */
}

.pic img {
  display: block;
  border: 4px solid red;         /* красная рамка у изображения */
  position: relative;
  z-index: 2;                    /* поверх псевдоэлемента */
}

/* вторая рамка позади, смещена влево и вниз */
.pic::before {
  content: "";
  position: absolute;
  left: -12px;                   /* смещение влево */
  top: 12px;                     /* смещение вниз */
  width: calc(100% + 24px);      /* ширина учитывает смещение слева и справа при необходимости */
  height: calc(100% + 0px);      /* при необходимости можно корректировать */
  border: 4px solid red;         /* только рамка, без background */
  background: transparent;
  z-index: 1;
  pointer-events: none;          /* чтобы клики попадали на картинку */
}

Подправьте left/top/width/height и толщину border под вашу задачу. Если рамка должна иметь ту же толщину и «обрамлять» точно так же, то можно задать width/height как 100% и использовать отрицательные значения left/top с учётом толщины рамки.

Если у вас нет отдельного контейнера вокруг <img> (и вы действительно не можете изменить разметку), можно:
- либо применить псевдоэлемент к ближайшему родителю (на который можно повесить position: relative);
- либо (как грубая замена) воспользоваться box-shadow с нулевым размытием и смещением, например:
  img {
    border: 4px solid red;
    box-shadow: -12px 12px 0 0 red; /* создаст «вторую» рамку, но это — заполненный прямоугольник, не идеальная пустая рамка */
  }

Если пришлёте фактическую HTML-разметку вокруг изображения (какой у него родитель — <a>, <div>, <figure> и т.д.), подскажу точный CSS под ваш случай.

Для однородного фона просто рамка + двойная тень <br/> <br/> <pre><code class="css">picture, source {
  display: contents;
}

img {
  border: 2px solid red;
  box-shadow: -10px 10px 0 -2px white, -10px 10px 0 0 red;
}</code></pre> <br/> Преимущество в том, что всё задается одному элементу, прямо картинке.  Нет ни сдвигов ни зависимостей от других элементов. <br/> <br/> Если фон неоднородный, то либо бордеры разным элементам либо псевдику. <br/> Предпочтение псевдику, чтобы сдвигался именно он, а не сам элемент. <br/> <br/> Ещё один вариант: небольшая svg и border-image. <br/> <br/> p.s.  picture и source удобно убирать с помощью display contents, чтобы не тревожится, будут у клиента эти теги или удалит и что там вообще с ними происходит. Просто делаем их "прозрачными".

у меня такое через ::after на враппере делается: <br/> <br/> <pre><code>.field__item { position: relative; display: inline-block; z-index: 0; }
.field__item::after { content: '\; position: absolute; inset: 0; border: 2px solid red; transform: translate(-12px, 12px); z-index: -1; }
.field__item img { border: 2px solid red; display: block; }</code></pre> <br/> <br/> translate(-12px, 12px) — смещение влево и вниз, подбери под свой дизайн.

<a href="https://codepen.io/FragsterAt/pen/MYbEELJ" rel="nofollow">https://codepen.io/FragsterAt/pen/MYbEELJ</a>

Для создания эффекта двойной рамки, где вторая рамка смещена влево и вниз относительно изображения, вы можете использовать следующий CSS, не изменяя HTML-разметку: <br/> <br/> <pre><code class="css">.field__item {
    position: relative;
    display: inline-block;   /* Чтобы размер контейнера соответствовал изображению */
}

/* Убираем лишние отступы у picture и img */
.field__item picture,
.field__item img {
    display: block;
}

/* Основная рамка изображения – красная */
.field__item img {
    border: 2px solid red;
    position: relative;
    z-index: 1;
}

/* Смещённая рамка (вторая) – псевдоэлемент */
.field__item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid red;       /* Тот же цвет, что у основной рамки */
    background: transparent;
    transform: translate(-10px, 10px);  /* Смещение влево и вниз */
    z-index: 0;
    pointer-events: none;         /* Чтобы рамка не мешала кликам по изображению */
}</code></pre>