Использование тега логотипа в спрайтах - это хорошо или плохо?

Question

При создании веб-страниц один из моих коллег отображает любой логотип с помощью свойства background-image CSS, а не встраивает изображение с помощью тега HTML <img>. Коллега сообщил, что это должно было уменьшить количество HTTP-запросов. Он также показал мне спрайт изображения и сказал, что Google отображает свой логотип со спрайт-изображениями.

Я не согласен с его подходом и показал ему, что главная страница Google.com загружает их логотип в тег <img>.

Какая практика лучше?

EDIT: Facebook также делает то же самое на своей домашней странице , загружая логотип в тег img, в то время как на страницах своего профиля они отображают свой логотип, используя CSS-спрайт .

Исходя из этого, я пришел к выводу, что, возможно, вам следует загрузить свой основной логотип в тег img, тогда как для других логотипов, таких как нижний колонтитул или подстраница, вы можете загрузить их в фоновом режиме, используя CSS-спрайты.

ОБНОВЛЕНО : Я регулярно загружаю логотипы с тегами img, а также знаю, почему мы можем использовать спрайты. Мой главный вопрос: если у вас есть три или более логотипов на странице, как лучше их загрузить?

Answer 1

Если изображение имеет семантическое значение , поэтому оно считается содержимым, используйте тег IMG , без спрайтов и правильно настроенный ALT.

Когда изображение является просто украшением , например фон окна, фон кнопки, фон пункта меню и т. Д., Оно не имеет семантического значения, поэтому вы можете просто используйте его как фон SPAN, DIV и т. д. из CSS. В этом случае вы можете использовать спрайты.

Причина, по которой Image Sprite является наилучшей практикой, заключается в том, как работает HTTP-протокол , и потому, что мы хотим минимизировать время, необходимое для загрузки веб-страницы (есть много причин почему вы хотите, чтобы ваш сайт загружался быстрее, одна из них заключается в том, что Google недавно включил скорость сайта в свой алгоритм ранжирования ) HTTP - это протокол без установления соединения, это означает, что для каждого запроса браузер устанавливает новое соединение должно быть сделано, и маршрут к серверу должен быть пересчитан. Таким образом, если каждое изображение было в одном файле, браузер сохраняет несколько запросов.

Каждый запрос браузера делится на этапы: поиск DNS, подключение, отправка, ожидание, получение. Мы можем использовать firebug , чтобы увидеть все запросы, выполненные во время загрузки веб-страницы.

Я взял тему WordPress и измерил время, затрачиваемое на каждый ресурс изображения на каждом шаге (хорошо, это сделал Firebug, а не я) и рассчитал, что 38,8% времени соответствует задержке (в данном случае задержка = поиск DNS + подключение + отправка), в то время как только 14,4% соответствует загрузке данных (оставшиеся 46,7% соответствуют ожиданию ответа сервера). Время задержки должно быть сведено к минимуму, поскольку не нужно тратить время на фактическую загрузку ресурсов, которые должен показывать браузер.

Этапы поиска, подключения и отправки DNS избыточны для каждого запроса статического изображения на одном и том же сервере. Итак, как мы можем их отрезать? Угадай, что? Использование изображений спрайтов! Каждый запрос изображения будет сгруппирован только в один, в результате чего только один набор времени ожидания для всех килобайт изображений, которые браузер собирается загрузить.

Answer 2

Логотип является содержимым и поэтому должен быть представлен элементом <img> (несмотря на тенденцию оптимизации производительности за счет семантики).

Answer 3

Логотип является частью содержимого вашего сайта, поэтому он должен быть в теге img, а не в качестве фонового изображения. Это поможет увеличить SEO (добавят также заголовок и атрибут alt) и причина, по которой компании, такие как Google, Facebook и др., Помещают свое изображение в спрайт, - это время загрузки, а не улучшение SEO.

Ваша компания имеет такой же рейтинг SE, ​​как Google или Facebook? Нет. До этого продолжайте помещать логотип в тег img, где он находится. Когда ваш сайт неизменно является самым посещаемым сайтом в Интернете, вы можете думать о производительности больше, чем о SEO.

Кроме того, в качестве отступления, если логотип когда-либо имел настройки (размер, цвет и т. Д.), Спрайт пришлось бы воссоздать так же, как и CSS. Если бы это был просто тег img, эта проблема не существует.

Answer 4

Логотип это контент - это правильно. И вы, вероятно, были бы счастливы, когда поисковый робот его схватил.

Но некоторым веб-сайтам нравится применять стиль :hover к своим логотипам. Теперь вы в ловушке.

Но вы можете сделать следующее, что семантически правильно. Если вы хотите узнать больше об этом, вы можете прочитать замечательную статью об этой проблеме Гарри Робертса.

HTML

<body>
    <div id="head">
        <a id="header-logo" href="http://www.example.com/" title="Example Inc. - Your slogan">
            <img src="/img/assets/header-logo.png" alt="Example Inc. - Your slogan"/>
        </a>
        <h1>Welcome to Example Inc.</h1>
    </div>
</body>

CSS

body > #head a#header-logo {
    background-image: url(/img/assets/logo-header-sprite.png);
    background-position: left top;
}
body > #head a#header-logo:hover {
    background-position: left -50%;
}
body > #head a#header-logo img {
    visibility: hidden;
}

Answer 5

Я хочу, чтобы люди могли загружать / связывать мой логотип. Поэтому я не буду включать его в карту спрайтов.

Answer 6

Нет причин не использовать спрайты для оптимизации, даже если логотип изображения является семантической информацией. Общее значение (sēmantikós) страницы не теряется, если использование спрайтов выполняется правильно, а именно путем использования изображения в правильно идентифицированном контейнере. Не существует единого мнения о семантической паутине - семантика - это философское искусство, открытое для тяжелой интерпретации.

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

Есть аргументы для обеих сторон, по крайней мере, с точки зрения SEO - каждое изображение является объектом поиска и возможностью для входящего трафика; но каждый http-запрос занимает полосу пропускания и замедляет время загрузки страницы, делая его менее оптимизированным и, следовательно, более ранжированным.

редактирование:

Если у вас есть 3 или более логотипов, точка запросов HTTP является спорной; последующие логотипы, вероятно, будут такими же изображениями, даже если их размер будет изменен. Если нет, пересмотрите, почему вы используете логотип таким образом.

Если это 3 разных логотипа для одной и той же компании, они больше не являются семантическими и больше не влияют на смысл страницы. Это похоже на то, что на странице о ABC Company также есть сведения об их администраторе баз данных (зарегистрированное фирменное наименование "Doing Business As") XYZ Corporation , что является плохой практикой. В этой ситуации лучше всего иметь страницу для компании, а затем еще одну для администратора. Либо страница предназначена для основной компании, либо для ее дочернего ООО. Даже если вы говорите: « ABC Company is:», а затем перечислите каждого администратора базы данных с соответствующими логотипами, смыслом страницы является описание ABC Company , которое должно иметь h1 или h2 с логотипом ABC Company , с заголовками нижнего уровня с другими логотипами; на этом этапе сокращение времени загрузки является приоритетом, а не придание смысла другим логотипам. Создание контента для поиска для администраторов баз данных должно быть отправлено на h3 и более низкие заголовки.

Answer 7

Я бы рискнул предположить, хотя это равно просто предположение, что если изображение логотипа вашего сайта содержится внутри элемента заголовка, такого как h1, то оноКажется вероятным, что между этим изображением и идентичностью сайта будут установлены смысловые отношения.Кроме того, обычно логотип считается значимым контентом для целей бренда, являющегося визуальной идентификацией компании или бренда.

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

Если пропускная способность так важна, то я 'd предложил бы объединить все остальные изображения в спрайт, но сохранить независимость / идентичность логотипа.

Answer 8

Я думаю, что вы должны придерживаться тега <img>, пока Google не изобрел «Поиск фоновых изображений» - сервис, который ищет фоновые изображения, разбивает спрайты на отдельные изображения и разумно различает декоративный и Значимые изображения с помощью анализа CSS.

Редактировать: Задайте себе вопрос: хотите ли вы подчеркнуть свой логотип;или это просто очередное украшение.Ответь и реализуй соответственно.

Answer 9

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

Просмотр сайта с отключенным CSS полезен при принятии решений.как это.Это дает вам хорошее представление о самом низком общем знаменателе опыта просмотра вашего сайта.Если ваш сайт имеет смысл в этих обстоятельствах, это все равно что строить свой дом на камне.

Answer 10

Я бы порекомендовал использовать тег IMG для логотипа с альтернативным текстом и объединять все другие изображения в качестве таблицы спрайтов. Я считаю, что использование spritesheets действительно полезно, когда у вас есть более 3 изображений. Прочитайте ответ Рохана Патила выше, чтобы узнать, почему это так.

Мой главный вопрос: есть ли у вас 3 или более логотипов, таких как LOGO в нижнем колонтитуле, на подстранице и т. Д. Итак, что лучше?

В таком случае, добавьте основной логотип с тегом IMG и используйте спрайты для остальных.