Стиль «сломанных» изображений

Размещенные на сайте картинки, при загрузке которых происходит ошибка, могут нарушить композицию дизайна и негативно повлиять на расположение прочих элементов на условной сетке. Оставляет желать лучшего и стандартное браузерное оформление «сломанных» изображений. Вниманию читателя представляется простая CSS-техника, позволяющая добавить стили для «битых» картинок посредством псевдоэлементов.

Как браузеры работают с «битыми» картинками

Изображение, которое по каким бы то ни было причинам не загрузилось у пользователя, оставляет на своём месте стандартный браузерный шаблон. Как правило, это происходит из-за ошибки при загрузке источника элемента <img>, указанного в атрибуте src, или по причине отключения картинок самим пользователем в настройках браузера. Такие картинки можно условно называть сломанными или битыми. В англоязычной среде этот феномен называется broken image.

Стандартное оформление картинки с ошибкой в различных браузерах Стандартное оформление картинки с ошибкой в различных браузерах
Так по умолчанию выглядит «битая» картинка, для которой установлен альтернативный текст, а также атрибуты ширины и высоты, в браузерах Firefox, Chrome, Opera Presto, Edge, Android Browser, Internet Explorer 11.

То, что в стандартном виде появляется на месте «сломанного» изображения, выглядит крайне непрезентабельно и может принести с собой ряд других проблем: например, на странице может нарушиться вертикальный ритм или произойдет смещение всего макета, если картинка играет роль «несущего» блока, от которого зависит позиционирование других. Это объясняется тем, что в большинстве браузеров атрибуты width и height или соответствующие им аналоги в CSS по умолчанию никак влияют на блоковую модель «битой» картинки: если у неё присутвует атрибут alt и установлен стандартный display: inline, габариты элемента будут вычисляться исходя из размеров альтернативного текста. Это поведение можно изменить, сменив для <img> значение display на отличное от строчного.

К области содержимого с альтернативным текстом, которая появляется на месте не загрузившегося элемента <img>, можно применить CSS. Аналогичным образом для «сломанной» картинки могут быть добавлены псевдоэлементы ::before и ::after, т.к. её отображение уже не зависит от внешнего ресурса. Таким образом, стили будут автоматически применены тогда, когда произошла ошибка загрузки. Это существенная особенность элемента <img>, благодаря которой можно манипулировать его внешним видом, не прибегая к JavaScript.

Хотя JS и обеспечивает более продвинутую работу над ошибками при загрузке картинок (для этих целей применяется событие onerror, с помощью которого можно сделать практически всё что угодно: добавить к «битому» изображению класс, заменить его источник на другой и т. д.), часть подразумеваемых в итоге «косметических» результатов этих действий можно реализовать средствами обычного CSS. Например, если требуется изменить путь src на другой, где содержится изображение, информирующее посетителя об ошибке загрузки, то в CSS для этого достаточно добавить background-image к самому элементу <img> (или псевдоэлементу внутри него).

CSS для «сломанной» картинки

Используя псевдоэлементы ::before и ::after, а также функцию attr(), которая выводит альтернативный текст и путь к источнику, можно создать собственное красивое и практичное оформление для «битых» изображений, соответствующее стилистике сайта. Данная техника работает только в современных браузерах.

В представленном коде у псевдоэлемента ::before есть правило font-size: 0, т.к. по непонятным причинам Firefox отображает в нём исключительно альтернативный текст вне зависимости от того, что указано в свойстве content разработчиком даже вместе с добавлением !important. Таким образом скрывается нежелательное дублирование alt.

В заключение

Стиль «сломанным» изображениям рекомендуется добавлять на сайтах, где используется большое количество картинок и есть риск, что они могут стать недоступны для загрузки, особенно если их источником служит внешний ресурс. При желании можно не ограничиваться одним лишь CSS: так, например, JavaScript позволяет создать форму для отправки сообщений, с помощью которой пользователь смог бы оперативно проинформировать администратора сайта о произошедшем недоразумении.