Каждому HTML кодеру приходится нарезать картинки .psd из макетов будущего сайта, и эта задача настолько обыденна, что опытный верстальщик делает её на автомате. Не перегружая головной мозг, просто вырезает картинку, выбирает подходящий формат и настройки оптимизации, называет как бог на душу положит и кладёт в папку с картинками.
Но каждый HTML кодер сталкивался с ситуацией, когда открывая папку /img/ для добавления запорошенного снегом логотипа и ёлочных игрушек или другого «лёгкого рестайлинга» давно забытого проекта, он осознавал, что уже ничего не понимает. Названия hueta.jpg и smallpic.gif ни о чём не говорят, назначение картинок размером 3х3 пикселя и еле заметных полупрозрачных .png'шных тенюшек остаётся загадкой, и придётся потратить некоторое время на рытьё кода и восстановления порядка вещей. Знакомая ситуация?
Мы попробовали систематизировать вопрос именования изображений для веб-проектов и предлагаем вам следующую схему для названий картинок:
назначение[_название][_вложенность][_фон][_позиция][_размер][_активность].расширение
Альтернативный вариант для разработчиков, привыкших к дефисам в качестве разделителей:
назначение[-название][-вложенность][-фон][-позиция][-размер][-активность].расширение
Как видно из схемы, обязательными являются только обозначения назначения картинки и её расширение. Остальные же параметры носят уточняющий характер.
Опишем все параметры и принимаемые значения:
Отвечает на вопрос «для какого элемента предназначена картинка?». Является обязательным параметром и в общем случае может заменять функцию названия.
Элементы общего назначения
Навигация
Разделители
Название должно отображать основную суть картинки. В общем случае его может и не быть, тогда роль первичной идентификации изображения возьмёт на себя назначение.
Определяет, является ли элемент вложенным. Применяется, например, для меню глубже 1го уровня или для элементов списка 2го уровня.
Определяет, является ли картинка фоновым изображением
Позиция изображения в родительском (логически) элементе. Хорошо подходит для обозначения скругляющихся элементов. Например: area_tl.gif — отличное название для верхнего левого скругления.
Размер картинки. Предполагается, что будет использовано минимум 2 варианта, т.е. Если есть _s, то должен быть _m или _l. Подходит, например, для обозначения превью и полноразмерного изображения.
Обозначение активности элемента. Применяется в основном для ссылок, пунктов меню и кнопок.
Любое допустимое в веб-приложениях расширение картинки.
Надеемся наша статья поможет HTML кодерам, программистам, контент-менеджерам, облегчит им труд при поддержке давно забытых собственных или в первый раз увиденных чужих проектов. Будьте счастливы и распоряжайтесь сэкономленным временем с пользой!
Но каждый 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 или _l. Подходит, например, для обозначения превью и полноразмерного изображения.
- _s (small) — маленький
- _m (medium) — средний
- _la (large) — большой
Активность
Обозначение активности элемента. Применяется в основном для ссылок, пунктов меню и кнопок.
- _hov (hover) — элемент, получивший фокус
- _cur (current) — текущий элемент
- _vis(visited) — посещённый элемент
- _dis (disabled) — не активный элемент
Расширение
Любое допустимое в веб-приложениях расширение картинки.
- .jpg
- .gif
- .png
- .bmp
Надеемся наша статья поможет HTML кодерам, программистам, контент-менеджерам, облегчит им труд при поддержке давно забытых собственных или в первый раз увиденных чужих проектов. Будьте счастливы и распоряжайтесь сэкономленным временем с пользой!
