Name pictures wisely

Each HTML coder has to cut the .psd images from the layouts of the future site, and this task is so ordinary that an experienced layout designer does it on the machine. Without overloading the brain, it simply cuts the picture, selects the appropriate format and optimization settings, names how God will put it in his heart and puts it in the picture folder.

But each HTML coder encountered a situation when opening the / img / folder to add a snow-covered logo and Christmas tree toys or another “light restyling” of a long-forgotten project, he realized that he already didn’t understand anything. The names hueta.jpg and smallpic.gif don't say anything about anything, the purpose of the 3x3px pictures and the barely noticeable translucent .pngs of shadows remains a mystery, and you have to spend some time digging the code and restoring order. Common situation?

We tried to systematize the issue of image naming for web projects and offer you the following scheme for the names of pictures:

destination [_name] [_ nesting] [_ background] [_ position] [_ size] [_ activity]. extension
')
Alternative for developers who are used to hyphens as delimiters:

destination [-name] [- nesting] [- background] [- position] [- size] [- activity] .extension

As can be seen from the diagram, only the designation of the destination image and its extension are mandatory. The remaining parameters are clarifying in nature.

Here you can use a small tool that demonstrates the principle of image naming.

We describe all parameters and accepted values:

Purpose

Answers the question "for which element is the picture intended?". It is a required parameter and in the general case can replace the function of the name.

General Purpose Items

• logo (logo) - logo
• icon (icon) - icon
• li (list item) - list item marker
• title (title) - graphic title
• header (header) - graphic header
• footer (footer) - graphic basement
• hz (=)) is an element whose purpose is difficult to determine

Navigation

• button (button) - button
• link (link) - link
• prev (previous page) - link to the previous page
• next (next page) - link to the next page

Delimiters

• hr (horizontal rule) - horizontal delimiter
• vr (vertical rule) - vertical delimiter

Title

The name should reflect the main essence of the picture. In general, it may not be, then the role of the primary identification of the image will take over the appointment.

Nesting

Determines whether an item is nested. It is used, for example, for menus deeper than 1st level or for 2nd level list items.

• _sub (sub) - the item is nested

Background

Determines whether the image is a background image.

• _bg (background) - element is a background image

Position

The position of the image in the parent (logical) element. Good for marking rounding elements. For example: area_tl.gif is a great name for the upper left round.

• _t (top) - top
• _r (right) - right
• _b (bottom) - below
• _l (left) - left
• _c (center) - in the center
• _tl (top left) - top left
• _tr (top right) - top right
• _bl (bottom left) - bottom left
• _br (bottom right) - bottom right

The size

The size of the picture. It is assumed that at least 2 variants will be used, i.e. If there are _s, then it should be _m or _l. Suitable, for example, to designate a preview and full-size image.

• _s (small) - small
• _m (medium) - medium
• _la (large) - large

Activity

The designation of the activity element. It is mainly used for links, menu items and buttons.

• _hov (hover) - the element that received focus
• _cur (current) - current element
• _vis (visited) - visited element
• _dis (disabled) - not active element

Expansion

Any valid image extension in web applications.

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

We hope our article will help HTML coders, programmers, content managers, make it easier for them to work with the support of long-forgotten their own or for the first time seen foreign projects. Be happy and use the time saved with benefit!