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

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

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

Что лучше?

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

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

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

ОТВЕТЫ

Ответ 1

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

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

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

Ответ 2

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

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

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

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

enter image description here

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

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

Ответ 3

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

Ответ 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;
}

Ответ 5

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

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

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

Ответ 6

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

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

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

изменить

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

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

Ответ 7

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

Ответ 8

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

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

Ответ 9

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

Изменить: Задайте себе этот вопрос: ваш логотип - то, что вы хотите подчеркнуть; или это просто еще одно украшение. Ответьте и выполните соответствующие действия.

Ответ 10

Ситуация: ваша компания решает обновить/изменить логотип, но подождите своего логотипа в спрайте. Итак, вы снова создали спрайт. Мое предложение, сохраняйте логотип в теге img.

Ответ 11

Когда в Риме делайте то, что делают римляне.

О логотипе в теге IMG, официальные слова от Google. http://www.youtube.com/watch?v=fBLvn_WkDJ4

Причина сохранения тега: Чтобы иметь хорошую видимость в поисковых системах, и когда кто-то из Google на имя компании ur, логотип должен появиться в результатах изображения.

Причина сохранения в css-спрайтах [background image]: Более быстрое время загрузки

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

Ответ 12

Спрайты позволяют сократить количество запросов. Это будет работать, только если все это в одной таблице стилей.

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

Маленькая статья: http://webmasterformat.com/blog/css-sprites

Ответ 13

вы можете использовать спрайт в элементе img с помощью свойства css clip:. правильное использование спрайтов всегда полезно для оптимизации. иногда это не практично. это призыв к суждению, который вы должны сделать для каждого различного обстоятельства (сайта), с которым вы сталкиваетесь.

Ответ 14

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

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

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