<img> или фоновые картинки в меню

[psywalker]

Собственно вопрос простой. Картинки внутри пунктов меню (каждый пункт имеет свою картинку) вы бы вставляли в html с помощью <img> или в CSS фоном? И так же было бы важно услышать обоснования, почему вы выбрали именно такой ответ, а не иной.

Имеются ввиду картинки, которые слева внутри пунктов*

[Catherine]

Думаю, ответ очевиден Если речь идет о фотографии с изображением блюда, то однозначно img, так как, подозреваю, для каждого пункта меню будет своя картинка.

Более того, если фотография будет фоном, то смена картинки может вызвать затруднения у того, кто будет заниматься сопровождением и наполнением данной страницы.

[s0rr0w]

Фон.

Ибо это меню. В меню главное текст, картинка носит чисто вспомагательный характер.

[SelenIT]

Для меня ответ был совершенно не очевиден .

Да, у каждого пункта — своя картинка. Но это явно не конкретные блюда, а скорее подразделы сайта (типы блюд), картинки явно старательно подобраны дизайнером, адаптированы под общую тему оформления и явно не предназначены для вставки с бухты-барахты секретаршей. А если ресторан настолько серьезный, что это меню будет меняться регулярно и новые пункты будет добавлять, скажем, директор , то им вполне по силам заплатить программистам, чтобы сделать для этого меню отдельную админку, с автоматической обрезкой картинки, подгонкой ее гаммы и т.п. — которая будет генерировать на выходе тот HTML+CSS, который удобнее пользователям и поисковикам, строгий и лаконичный. А в наш век адаптивности всего и вся для отображения этого же меню на мобильнике, например, явно будет удобнее обнулить фон, чем грузить десятки картинок с display: none...

[Catherine]

Фон.

Ибо это меню. В меню главное текст, картинка носит чисто вспомагательный характер.

Насколько я понимаю, в меню каждый пункт может иметь уникальный текст и уникальную картинку, как в таком случае менять картинки и добавлять новые пункты? Через внутренние стили? Разве картинка не логичнее?

[SelenIT]

Если всё-таки картинка, то как быть с ее alt?

[Catherine]

Но это явно не конкретные блюда, а скорее подразделы сайта (типы блюд), картинки явно старательно подобраны дизайнером, адаптированы под общую тему оформления и явно не предназначены для вставки с бухты-барахты секретаршей.

А если ресторан настолько серьезный, что это меню будет меняться регулярно и новые пункты будет добавлять, скажем, директор , то им вполне по силам заплатить программистам, чтобы сделать для этого меню отдельную админку, с автоматической обрезкой картинки, подгонкой ее гаммы и т.п. — которая будет генерировать на выходе тот HTML+CSS, который удобнее пользователям и поисковикам, строгий и лаконичный.

Не сильно ли дорогое и трудоемкое удовольствие? Кроме того, картинки в данном случае — всего лишь "рыба", а реальные фотографии может предоставлять и заказчик.

P.S. Я всего лишь хочу понять, действительно ли фон в данном случае удобнее и практичнее. Оправдывает ли цель средства?

[Svatov]

Я бы сделал спрайтом и зафигачил бы в фон. Меньше запросов, добавлять новые достаточно просто редактируя один спрайт, очень гибко управлять.

[SelenIT]

Не сильно ли дорогое и трудоемкое удовольствие?

Ужимать/обрезать картинки при закачке всё равно ведь заставят, даже в варианте «под секретаршу» . А если всё равно подключать imageMagik и ему подобных, то уж сгенерить на основе результата еще и CSS-строчку — и вовсе пустяк, как мне кажется (по крайней мере, для работника в духе пушкинского Балды, этакого универсала=).

Что на картинке «рыба» (в прямом и переносном смысле), понятно, но, имхо, всё равно эти картинки гораздо ближе к дизайнерскому оформлению, чем, например, к картинкам товара в каталоге. Нужны ли они в контенте?

Я пока взвешиваю «за» и «против». Вариант с фонами, имхо, подкупает легкостью прикручивания адаптивности. На другом полюсе шепчется малодушная мысль «а не сделать ли, раз пошла такая пьянка, вообще всё картинками, включая текст — так заодно и проблема кроссбраузерности отпадет», но я давлю эту мысль в зародыше

[Catherine]

Я бы сделал спрайтом и зафигачил бы в фон. Меньше запросов, добавлять новые достаточно просто редактируя один спрайт, очень гибко управлять.

Это если самому редактировать. А если эти же картинки используются как фотографии блюда на других страницах? А если будет добавляться новый пункт, или, того хуже, изменяться картинка существующего?

[lexxcode]

Если это меню, то вряд ли при каждом обновлении страницы под пунктом, например "суши", каждый раз будет новая картинка, посему я бы фоном сделал. А если даже они и будут меняться, то накрайняк фон вставлять через style прямо в html, в итоге получится неплохой компромис, в css может быть вариант по-умолчанию, а в style уже движком ставить каждый раз новые. Это будет в 100500 раз проще чем городить сложные системы для обработки картинок "на лету" и генерирования css с html. Закинул себе пачку уже подготовленных фоток, и крути на php как хош.

[SelenIT]

А если эти же картинки используются как фотографии блюда на других страницах?

Имхо, это мегаврядли. По-моему, к иконке раздела и фотографии блюда явно требования разные.

накрайняк фон вставлять через style прямо в html, в итоге получится неплохой компромис, в css может быть вариант по-умолчанию, а в style уже движком ставить каждый раз новые. Это будет в 100500 раз проще чем городить сложные системы для обработки картинок "на лету" и генерирования css с html

Про такой компромисс я подумал первым делом. Единственная проблема навскидку, если понадобится этот фон переопределить (напр. для той же моб. версии), придется юзать !important... хотя что это за проблема

Ну и сложность, имхо, различается всё-таки не на 5 порядков, а на 1-2 (с учетом кучи готовых/полуготовых решений). Просто вариант, когда у нас полный контроль над графикой (напрямую или через дизайнера) я как-то упустил как тривиальный — интересно было решение в общем случае, даже для секретарши...

[ShumNo]

Все что является частью дизайна/шаблона, то идет фоном и объединяется в спрайт

Все что есть контент идет тегом img

Графика и уж тем более ссылки меню часто реагируют на мышку, а значит не исключено, что при наведении, картинки могут измениться это еще один + в сторону фона и спрайта

[s0rr0w]

Насколько я понимаю, в меню каждый пункт может иметь уникальный текст и уникальную картинку, как в таком случае менять картинки и добавлять новые пункты? Через внутренние стили? Разве картинка не логичнее?

<a href="#" style="background-image: url(menuItem01.jpg)" class="menuItem">Роллы</a>

Да, так и есть, каждый пункт имеет уникальную картинку и уникальный текст. И что?

Если стоит CMS, то это вообще не проблема

[psywalker]

Хорошо, раз это фоны, тогда объясните мне плз грань, когда заканчивается фон в меню и начинается <img>? Т.е. что это должно быть за меню? может какой список товаров или ещё чё? И желательно с примерами)

p.s. кстати, программист попросил делать <img>, обосновывая это тем, что:

причина - картинки будут браться из базы, предоставляемой заказчиком

Имхо, в этом случае я бы сделал картинками <img>. Я лошара?

Все что является частью дизайна/шаблона, то идет фоном и объединяется в спрайт

Все что есть контент идет тегом img

А приведи плз пару примеров одного и другого случае.

[lexxcode]

p.s. кстати, программист попросил делать <img>...

ИМХО, программист с тем же успехом может брать те же картинки с той же БД и вставлять их не в <img>, а в style

[sigma77]

ИМХО, программист с тем же успехом может брать те же картинки с той же БД и вставлять их не в <img>, а в style

Если картинки разные, я бы делала именно так - bg + инлайн стиль.

В данном случае картинка у меню не является значащим элементом дизайна.

Т.е. если она не отобразится, катастрофы не будет.

Edited November 6, 2012 by sigma77

[Softlink]

По мне, так, img должен использоваться для контента, т.к. это все-таки информация, за которой пришел пользователь. Все, что связано с оформлением - в css, в этом случае в background.

[psywalker]

p.s. кстати, программист попросил делать <img>...

ИМХО, программист с тем же успехом может брать те же картинки с той же БД и вставлять их не в <img>, а в style

Ну, а если вот ему так надо, мне-то чё? может ему так удобнее именно <img>, раз просит?

[sigma77]

Ну, а если вот ему так надо, мне-то чё? может ему так удобнее именно <img>, раз просит?

Можно же у него и уточнить?

Я лично разницы не вижу, куда вставлять url - в адрес картинки или в bg

Но может он картинки в БД хранит, или у него в массиве идут уже готовые <img> - в любом случае спрашивать надо у программиста.

[mishka]

Просит img -- делай img.

Надо давать заказчику то что он просит.

Конечно, скажи ему про то что это можно сделать фоном. (скажи программеру, а не конечному заказчику, иначе будет выглядеть это так что ты учишь прогера как ему надо делать, да еще и через "испорченный телефон").

Но так как картинки будут не спрайтом, то не вижу смысла это делать фоном. Толку то?