Как правильно отдавать статику?

Question

[Руслан Ежгуров]

Подскажите пожалуйста как правильно(профессионально) подгружать статику на страницу? Часто вижу, что вместо тега img используют div, фоном которого служит картинка т.е. подгружают её через css, а не html тегом. Как нужно делать правильно и почему?

Answer 1

[Денис Инешин]

Тот пример что вы привели, никак не относится к понятию "правильно подргужать статику". Для загрузки статических файлов существуют некоторые общепринятые правила, которые существенно эту загрузку облегчают.
Вот они:

• Объединение JS и CSS файлов в 1 - уменьшение количества запросов к серверу
  
• Объединение нескольких изображений в спрайт - опять уменьшение кол-ва запросов
  
• Преобразование изображений в Base64 - опять уменьшение кол-ва запросов, так как картинка теперь находится в теле CSS файла
  
• Использование кэширования
  
• Использования отдельного сервера для загрузки статики - уменьшает нагрузку на основной сервер, преодолевает правила браузеров по количеству возможных параллельных загрузок
  
• Использование Gzip на сервере, чтобы максимально уменьшить вес статики
  

Да и много чего еще.

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

Answer 2

[Андрей Буров]

я делаю div с background-image когда картинка нужна только для декора.
если картинка это часть контента, то img

Answer 3

[xmoonlight]

Когда необходимо контролировать поведение объекта посредством JS или картинка - это часть контента - img, иначе - div background