Картинки верстка: 4 лучших способа по вёрстке изображений

Содержание

Именуем картинки с умом / Хабр

Каждому 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 или _l. Подходит, например, для обозначения превью и полноразмерного изображения.

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

Активность

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

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

Расширение

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

.jpg
.gif
.png
.bmp

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

Будьте счастливы и распоряжайтесь сэкономленным временем с пользой!

%d0%b2%d0%b5%d1%80%d1%81%d1%82%d0%ba%d0%b0 PNG рисунок, картинки и пнг прозрачный для бесплатной загрузки

Мемфис дизайн геометрические фигуры узоры мода 80 90 х годов
поп арт 80 х патч стикер
80 основных форм силуэта
поп арт 80 х патч стикер
80 е брызги краски дизайн текста
Мемфис бесшовные модели 80 х 90 х стилей
Мемфис шаблон 80 х 90 х годов стилей фона векторные иллюстрации
Элементы рок н ролла 80 х
ценю хорошо как плоская цвет значок векторная icon замечания
80 летний юбилей дизайн шаблона векторные иллюстрации
Мемфис шаблон 80 х 90 х годов на белом фоне векторная иллюстрация
аудиокассета изолированные вектор старая музыка ретро плеер ретро музыка аудиокассета 80 х пустой микс
сердце сердцебиение любовь свадьба в квартире цвет значок векторная icon
поп арт 80 х патч стикер
мемфис бесшовной схеме 80s 90 все стили
диско дизайн в стиле ретро 80 х неон
Модный стиль ретро 80 х годов дискотека тема искусства слово
80 летие векторный дизайн шаблона иллюстрация
happy singing mai ba sing self indulgence happy singing
набор ретро 80 х 90 х эстетический компьютерный пользовательский интерфейс
номер 80 3d рендеринг
80 лет юбилей красный шар вектор шаблон дизайн иллюстрация
поп арт 80 х патч стикер
Диско вечеринка в стиле ретро 80 х art word design
поп арт 80 х патч стикер
скидки до 80 предписанию» векторный дизайн шаблона иллюстрация
Ретро трехмерный цветной градиент 80 х арт дизайн
старая телевизионная рамка 80 х подходящая для вставки картинок
Крутая музыка вечеринка певца креативный постер музыка Я Май Ба концерт вечер К
80 3d текст
3d золотые числа 80 с галочкой на прозрачном фоне
поп арт 80 х патч стикер
Ретро вечеринка 80 х годов цвет градиент искусства слово
поп арт 80 х патч стикер
красочная ретро аркада из 80 х
80 летию векторный дизайн шаблона иллюстрация
Номер 80 процентов от 3d золотой
вход в 80 е
фильм 80 х
Головной мозг гипноз психология синий значок на абстрактное облако ба
Ретро ТВ игра 80 х годов в стиле арт дизайн
Скидка 80 процентов на 3d золото
Ретро мода 80 х градиент цвета художественного слова
Скидка 80 на желтый градиент
Модель буквы м в стиле 80 х
81 год вектор дизайн шаблона примером передового опыта
Золотая мега распродажа 80 дисконтная этикетка
80 летнего юбилея векторный дизайн шаблона иллюстрация
скидки до 80 векторный дизайн шаблона иллюстрация
надпись laa ba sa thohurun insya allah

Более 30 000 макетов изображений | Скачать бесплатные изображения на Unsplash

30 000+ макетов изображений | Скачать Free Images на Unsplash

ФотоФотографии 710
Стопка фотографийКоллекции 6. 5k
Группа людейПользователи 75

дизайн

сайт

постер 900 11

компьютер

шаблон

Логотип Unsplash

Unsplash+

В сотрудничестве с Камраном Абдуллаевым

Unsplash+

Разблокировать

mockupHd 3d wallpapersrender

Хэл Гейтвуд

макет веб-сайтаwebsite Designerword

–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– – – –––– – –. Хэл Гейтвуд

текстHd синие обоикомпьютерное оборудование

Логотип Unsplash

Unsplash+

В сотрудничестве с Фаруком Токлуоглу

Unsplash+

Разблокировать

Fruit images & picturekiwiin studio

Sven Mieke

Penciljobruler

Nick Adams

Hd design wallpapersApple images & photosoffice

Kelly Sikkema

Hq фон фотоБумажные фоныHd арт обои

Sigmund

rivière -du-loupqccanada

Krisztian Tabori

Hd оранжевый wallpaperstech

Логотип Unsplash

Unsplash+

В сотрудничестве с Даниэлем Хорватом

Unsplash+

Разблокировать

salmonsaladFood images & images

John Cameron

United Kingdomlondonuk

Kelly Sikkema

HD черные обоиopencraft

Pankaj Patel

berlingermanyHd обои на экран

Kelly Sikkema

WorkshopsworkCreative images

Kelly Sikkema

Blanklaymock

Логотип Unsplash

Unsplash+

В сотрудничестве с Гантасом Вайчуленасом

Unsplash+

Разблокировать

tableCelebration imagesfestivities

Toa Heftiba

fashionstylenewcastle on tyne

mock upHd 3d обоиrender

Фоны для сайтовмаркетинговое агентство

uiuxwebsite designux

Fruit images & imageskiwiin studio

Hq background imagesБумага фоныHd арт обои

Hd оранжевые обоиtech

Hd черные обоиopencraft

мастерскиеработытворческие образы

столпраздничные образыпраздники

–––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –. Компьютерное железо qccanada

salmonsaladFood images & images

United Kingdomlondonuk

berlingermanyHd обои на экран

Просматривайте изображения премиум-класса на iStock | Скидка 20% на iStock

Логотип Unsplash

Сделайте что-нибудь потрясающее

Макет Дизайн Картинки | Скачать бесплатные изображения на Unsplash

Layout Design Pictures | Скачать Free Images на Unsplash

ФотоФотографии 10k
Стопка фотографийКоллекции 10k
Группа людейПользователи 0

дизайн

фон

компьютер

Веб-сайт

Электронный

Логотип Unsplash

Unsplash+

В сотрудничестве с Mushaboom Studio

Unsplash+

Разблокировка

Принадлежности для рисования pensArtCreative images

Хэл Гейтвуд

Фон веб-сайтамаркетинговое агентство

–––– –––– ––– – – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

Леоне Вентер

рабочий столрабочее пространство

Николь Ангелова

fashionmagazineprague

NordWood Themes

Hd желтые обоиprintreading

Илья Павлов

codetechnologycoding

Unsplash logo

Unsplash+

В сотрудничестве с Mushaboom Studio

Unsplash+ 9 0011

Разблокировать

расходные материалыпланердневник

Krisztian Tabori

HD обои дизайнHd оранжевые обоиtech

officeHq фон фотоHd белые обои

Vinicius «amnx» Amano

Hd узор картинкиТекстура фоныпродукт

Arnel Hasanovic

блогHd обои компьютердом

Sigmund

Hd серые обоиФон клавиатурыклавиатура компьютера

Логотип Unsplash

Unsplash+

В сотрудничестве с Mushaboom Studio

Unsplash+

Разблокировать

кошелекгубная помадаHd обои для телефона

Sigmund

electronicshardwareMouse images & изображения

Зигмунд

webtextdocument

Сара Дорвейлер

Книжные изображения и фотографииминимализммакет

Kelly Sikkema

Бумажные фоныblanklay

Kelly Sikkema

Коричневые фоныЛистьяфоныклен

Логотип Unsplash

Unsplash+

In сотрудничество с Камраном Абдуллаевым

Unsplash+

Разблокировка

mockuprenderhome decor

Unseen Studio

бизнесписьмостудент

ручкапринадлежности для творчестваCreative images

рабочий столрабочее пространство

Hd желтые обоипечатьчтение

расходные материалыпландневник

офисHq фоновые изображенияHd белые обои

Hd узор обоиТекстура фоныпродукт

Hd серые обоиФон клавиатурыклавиатура компьютера

электроникаоборудованиеМышь фото 9001 1

Книжные изображения и фотографииминимализмнасмешка

Коричневый фонЛистьяфоныклен

Бизнесписьмостудент

– ––– –––– –––– – –––– – –––– –– – –– –––– – – –– ––– –– –––– – –.

Фоны сайтамаркетинговое агентство

журнал модыПрага

кодтехнологиикодирование

HD обои дизайнHd оранжевые обоиtech

блогHd обои компьютердом

кошелекпомадаHd обои для телефона

9001 0 webtextdocument

Paper backgroundsblanklay

mockuprenderhome decor

Именуем картинки с умом / Хабр

Здесь вы можете воспользоваться небольшим инструментом, демонстрирующим принцип именования картинок

Назначение

Название

Вложенность

Фон

Позиция

Размер

Активность

Расширение

%d0%b2%d0%b5%d1%80%d1%81%d1%82%d0%ba%d0%b0 PNG рисунок, картинки и пнг прозрачный для бесплатной загрузки

Более 30 000 макетов изображений | Скачать бесплатные изображения на Unsplash

Похожие коллекции

LAYOUT

Layout

layout

Похожие коллекции

МАКЕТ 90 168 411 фото · Куратор Дина Ясин

Макет

layout

Просматривайте изображения премиум-класса на iStock | Скидка 20% на iStock

Макет Дизайн Картинки | Скачать бесплатные изображения на Unsplash

Похожие коллекции

Макет и дизайн

Дизайн Макет

Принципы компоновки и дизайна

Добавить комментарий Отменить ответ