Каждому HTML кодеру приходится нарезать картинки .psd из макетов будущего сайта, и эта задача настолько обыденна, что опытный верстальщик делает её на автомате. Не перегружая головной мозг, просто вырезает картинку, выбирает подходящий формат и настройки оптимизации, называет как бог на душу положит и кладёт в папку с картинками.

Но каждый HTML кодер сталкивался с ситуацией, когда открывая папку /img/ для добавления запорошенного снегом логотипа и ёлочных игрушек или другого «лёгкого рестайлинга» давно забытого проекта, он осознавал, что уже ничего не понимает. Названия hueta.jpg и smallpic.gif ни о чём не говорят, назначение картинок размером 3х3 пикселя и еле заметных полупрозрачных .png’шных тенюшек остаётся загадкой, и придётся потратить некоторое время на рытьё кода и восстановления порядка вещей. Знакомая ситуация?

Мы попробовали систематизировать вопрос именования изображений для веб-проектов и предлагаем вам следующую схему для названий картинок:

назначение[_название][_вложенность][_фон][_позиция][_размер][_активность].расширение

Альтернативный вариант для разработчиков, привыкших к дефисам в качестве разделителей:

назначение[-название][-вложенность][-фон][-позиция][-размер][-активность].расширение

Как видно из схемы, обязательными являются только обозначения назначения картинки и её расширение. Остальные же параметры носят уточняющий характер.

Назначение

Отвечает на вопрос «для какого элемента предназначена картинка?». Является обязательным параметром и в общем случае может заменять функцию названия.

Элементы общего назначения

• logo (logo) — логотип
• icon (icon) — иконка
• li (list item) — маркер элемента списка
• title (title) — графический заголовок
• header (header) — графическая шапка
• footer (footer) — графический подвал
• hz ( =) ) — элемент, назначение которого определить проблематично

Навигация

• button (button) — кнопка
• link (link) — ссылка
• prev (previous page) — ссылка на предыдущую страницу
• next (next page) — ссылка на следующую страницу

Разделители

• hr (horizontal rule) — горизонтальный разделитель
• vr (vertical rule) — вертикальный разделитель

Название

Название должно отображать основную суть картинки. В общем случае его может и не быть, тогда роль первичной идентификации изображения возьмёт на себя назначение.

Вложенность

Определяет, является ли элемент вложенным. Применяется, например, для меню глубже 1го уровня или для элементов списка 2го уровня.

• _sub (sub) — элемент является вложенным

Фон

Определяет, является ли картинка фоновым изображением

• _bg (background) — элемент является фоновым изображением

Позиция

Позиция изображения в родительском (логически) элементе. Хорошо подходит для обозначения скругляющихся элементов. Например: area_tl.gif — отличное название для верхнего левого скругления.

• _t (top) — вверху
• _r (right) — справа
• _b (bottom) — внизу
• _l (left) — слева
• _c (center) — по центру
• _tl (top left) — вверху слева
• _tr (top right) — вверху справа
• _bl (bottom left) — внизу слева
• _br (bottom right)— внизу справа

Размер

Размер картинки. Предполагается, что будет использовано минимум 2 варианта, т.е. Если есть _s, то должен быть _m или _b. Подходит, например, для обозначения превью и полноразмерного изображения.

• _s (small) — маленький
• _m (medium) — средний
• _la (large) — большой

Активность

Обозначение активности элемента. Применяется в основном для ссылок, пунктов меню и кнопок.

• _hov (hover) — элемент, получивший фокус
• _cur (current) — текущий элемент
• _vis(visited) — посещённый элемент
• _dis (disabled) — не активный элемент

Расширение

Любое допустимое в веб-приложениях расширение картинки.

• .jpg
• .gif
• .png
• .bmp

Мы сделали небольшой скрипт, который поможет вам разобраться с этой схемой:

Надеемся наша статья поможет HTML кодерам, программистам, контент-менеджерам, облегчит им труд при поддержке давно забытых собственных или в первый раз увиденных чужих проектов. Будьте счастливы и распоряжайтесь сэкономленным временем с пользой!