- Что такое CSS-спрайты?
- Шаг 1: Сборка изображений, которые генерируют Sprite
- Шаг 2: программирование HTML и CSS спрайтов
- ФАЙЛ ИНДЕКСА
- CSS FILE
- Шаг 3: Дайте эффект движения с переходом
- Когда использовать CSS-спрайты?
- Альтернативы и дополнения к спрайтам
- Ссылки, чтобы узнать больше о спрайтах и скорости загрузки
Мы живем в обществе, в котором время высоко ценится. Все, что помогает нам экономить время или предлагает нам то, что мы ищем быстро, нам нравится, и мы предпочитаем это более медленным вариантам.
Интернет заполняется исследованиями того, как скорость отображения страницы напрямую связана с объемом получаемого трафика. Поэтому время загрузки сайта становится все более актуальным фактором SEO.
Есть много факторов, которые определяют скорость веб-страницы. В этой статье мы сосредоточимся на улучшении времени загрузки нашего веб-сайта за счет оптимизации загрузки изображений с помощью CSS-спрайтов .
Что такое CSS-спрайты?
С точки зрения веб-дизайна, спрайт - это изображение в формате PNG или GIF, состоящее из комбинации нескольких изображений в одном.
В следующем примере объясняется использование CSS-спрайтов на веб-сайте, на котором отображаются значки связанных социальных сетей.
Иконки используя img
Традиционное решение для создания предыдущей страницы - использовать два элемента <img> в коде HTML и иметь два изображения, соответствующие двум значкам. Код нашей индексной страницы будет:
<html> <body> <h1> СОЦИАЛЬНЫЕ МЕДИА </ h1> <a href="https://linkedin"> <img src = "img / in.png" /> </a> <a href = "https : // twitter "> <img src =" img / tw.png "/> </a> </ body> <html>
Хотя это простое решение и работает очень хорошо, оно неэффективно. Браузер должен загрузить два разных изображения, чтобы показать страницу, поэтому вы должны сделать два запроса к серверу.
Используя технику CSS sprite, мы повторим предыдущий пример, чтобы добиться того же эффекта с одним изображением и, следовательно, с одним запросом к серверу.
Чтобы сделать Интернет более привлекательным, используя тот факт, что мы можем добавить несколько изображений в спрайт, анимация в значках также будет добавлена в этом примере. Проходя над ними, они изменят свой внешний вид с привлекательным эффектом движения.
Поэтому в этом уроке мы увидим:
- Сборка изображений, которые генерируют Sprite
- HTML программирование и создание CSS Spritting
- Генерация перехода, который дает эффект движения
Шаг 1: Сборка изображений, которые генерируют Sprite
Первым шагом является создание большого изображения, которое включает четыре отдельных изображения.
Используя вашу обычную программу для редактирования изображений, создайте изображение в формате PNG с двумя значками вверху и чуть ниже, такими же значками, как у нас, когда мы поместим их поверх них с помощью мыши.
В нашем случае, когда пример будет закончен, когда мы разместим себя над значком, он будет более четким, поэтому изображения ниже такие же, как и выше, но с непрозрачностью 80%.
эльф
Мы решили, что размер иконки составляет 31 пиксель по высоте и ширине. И между каждым отдельным изображением мы оставили два пикселя разделения. Следовательно, результирующее изображение PNG составляет 64 × 64 пикселей. Мы назвали это rrss.png
Иконка ширины Иконка разделения Linkedin Twitter Всего 31 2 31 64
Высота Нормальный значок Значок разделения 80% непрозрачность Всего 31 2 31 64
Если вместо 2 иконок, они хотели бы 3
эльф
Ширина будет увеличена на 33 пикселя, а высота будет такой же
Значок ширины Значок разделения Linkedin Значок разделения Twitter Всего в Facebook 31 2 31 2 31 97
Шаг 2: программирование HTML и CSS спрайтов
Ключ к технике спрайта CSS заключается в отображении изображений с использованием свойства background-image вместо непосредственного их отображения с тегом img. Чтобы использовать это свойство, мы немного изменим HTML-код индекса. Мы собираемся удалить изображение HTML-кода, добавив его на место в таблице стилей CSS. Структура файлов и папок выглядит следующим образом:
структура
ФАЙЛ ИНДЕКСА
Код индексного файла будет следующим:
<html> <head> <link rel = "stylesheet" </ h1> div class = "container"> <a class="linkedin" href="https://linkedin"> </a> <a class="twitter" href="https://twitter"> </a> < / div> </ body> </ html>
CSS FILE
У нас есть одно изображение, Sprite, состоящее из 4 значков размером 64 × 64 пикселя. Это изображение будет показано с использованием свойства background-image в CSS.
На следующем рисунке показаны координаты верхнего левого угла каждого из значков, составляющих спрайт.
Координаты значка
Icon Linkedin Icon Twitter 0, 0, 0, 33 Icon Linkedin в 80% Icon Twitter в 80% 33, 0 33, 33
Чтобы каждый раз отображать другой значок, вместо полного спрайта используется свойство background-position, которое смещает спрайт, принимая во внимание положение каждого отдельного значка в спрайте. Он двигается влево или вверх .
Полученный код CSS будет следующим:
.linkedin {ширина: 31px; высота: 31px; фон: прозрачный URL ("./../img/rrss.png"); background-position: 0px 0px; плавать: слева; } .twitter {width: 31px; высота: 31px; фон: прозрачный URL ("./../img/rrss.png"); background-position: -33px 0px; плавать: слева; } .linkedin: hover {background-position: 0px -33px; } .twitter: hover {background-position: -33px -33px; } / * Мы оставляем разделение между ссылками * / .container на {margin: 10px; }
Шаг 3: Дайте эффект движения с переходом
До сих пор, имея только таблицу стилей, нам удалось показать для каждой социальной сети значок, который меняет свое поведение при прохождении через нее благодаря псевдоклассу: hover.
Теперь мы собираемся улучшить наш пример, применяя переход так, чтобы при срабатывании наведения мыши вместо того, чтобы непосредственно показывать более четкое изображение, оно появлялось постепенно, создавая ощущение постепенного изменения непрозрачности.
У нас есть два способа указать переходы. Более обширная форма:
свойство перехода: НЕДВИЖИМОСТЬ - МОДИФИЦИРУЕТСЯ; длительность перехода: ВРЕМЯ; функция времени перехода: TYPE-OF-EFFECT;
Или напрямую:
переход: СОБСТВЕННОСТЬ-ЭТО-МОДИФИЦИРУЕТ ВРЕМЯ ТИПА ЭФФЕКТА;
В нашем случае изменяемое свойство - это background-position .
Типов эффектов существует множество. Вы можете изучить их самостоятельно по следующей ссылке W3C школы ,
В нашем случае мы выбираем замедление, когда скорость перехода уменьшается.
Эта модификация добавлена в классы linkedin и twitter, а не в их гомологичное наведение. Итак, окончательный код нашей таблицы стилей будет:
/ * Значок «Нравится» с параметром «ПЕРЕХОД» 1 * / .linkedin {width: 31px; высота: 31px; фон: прозрачный URL ("./../img/rrss.png"); background-position: 0px 0px; свойство перехода: background-position; длительность перехода: .1с; функция времени перехода: облегчение; плавать: слева; } / * Значок Twitter с параметром 2 для перехода * / .twitter {width: 31px; высота: 31px; фон: прозрачный URL ("./../img/rrss.png"); background-position: -33px 0px; переход: background-position .1s замедление; плавать: слева; } .linkedin: hover {background-position: 0px -33px; } .twitter: hover {background-position: -33px -33px; }. контейнер до {margin: 10px; }
Когда использовать CSS-спрайты?
Изображения, которые могут быть объединены в одно изображение спрайта, являются теми, которые являются частью дизайна нашего веб-сайта. Другими словами, метод CSS spritting не должен использоваться для изображений на нашем веб-сайте, таких как фотографии наших продуктов или услуг.
Альтернативы и дополнения к спрайтам
Хотя спрайты значительно улучшают время загрузки веб-сайта, для оптимизации скорости лучше всего использовать несколько методов, а не только один, для повышения производительности.
Поскольку в настоящее время существует тенденция использовать все больше и больше различных типов устройств для доступа к Интернету, как отображать одно и то же изображение на небольшом экране и на экранах настольного компьютера, не забывая обо всех промежуточных устройствах, включая сетчатки экрана?
Решение заключается в так называемых значках шрифтов. Иконочные шрифты (или шрифты) - это группы графических векторов, сгруппированных в произвольном шрифте. Шрифты значков прекрасно масштабируются для любого разрешения экрана, и, поскольку они ведут себя как любой другой источник, создавать стили с ними гораздо проще, чем обновлять спрайты.
Ссылки, чтобы узнать больше о спрайтах и скорости загрузки
В завершение я хотел бы поделиться с вами некоторыми интересными ссылками, чтобы углубиться в вопросы оптимизации скорости загрузки.
Принять к сведению разные техники оптимизации веб-производительности (известное по аббревиатуре на английском языке WPO: «Оптимизация веб-производительности»)
Обратитесь за помощью к Google Analytics узнать больше о скорости сайта
Посмотрите на различные иконки шрифтов, как:
Я надеюсь, что этот пошаговый пример помог вам уменьшить размер веб-изображений и повысить скорость загрузки. Если вы хотите поделиться идеями, вопросами или предложениями, вы знаете: прямо здесь внизу находится контактная форма ^ _ ^
Кроме того, если вы хотите загрузить полный код этого примера, вы можете сделать это бесплатно, просто следуя за нами по Facebook по этой ссылке (если вы не видите изображение ниже, отключите надстройки addblockplus)
Пожалуйста, нажмите кнопку «Мне нравится» на Facebook, чтобы стать сторонником KadumWeb и получить доступ к загружаемым файлам.
Спасибо, что стали подписчиком, нажмите здесь для доступа к загружаемым файлам. Распакуйте файл с ключом: kadum
Примечание: изображение обложки взято с Ванда Камарга ,
Похожие
Как... и романа Стефана Цвейга фокусируется на том, что такое Унгедулд де Герценс (буквально «нетерпение сердца»). Это новое совместное совместное производство от Саймона МакБерни основано на романе Стефана Цвейга «Унгедуль де Герценс». Больше... Исторические европейские боевые искусства (HEMA) относятся к боевым искусствам Что такое время загрузки страницы?
Время загрузки страницы - это время, необходимое для загрузки и отображения всего содержимого веб-страницы в окне браузера (измеряется в секундах). Время загрузки страницы - это показатель веб-производительности, который напрямую влияет на вовлеченность Отправить сайт в Google - Как использовать консоль поиска Google
Из этого туториала вы узнаете, как отправить свой веб-сайт в Google (консоль поиска Google) вместе с файлом вашего файла Sitemap. Сначала вам нужно будет создать файл карты сайта. Если вы еще этого не сделали, см. Мою статью на Как создать файл Sitemap для вашего сайта WordPress или же Как создать файл Sitemap для вашего HTML-сайта , Шаг 1 Что такое цифровой маркетинг?
Если у вас есть бизнес в районе Филадельфии или бизнес в районе штата Делавэр , цифровой маркетинг должен быть частью вашего бизнес-плана. Сегодня успех в бизнесе зависит от цифрового маркетинга. Когда вы ищете DMA или агентство по цифровому маркетингу или внутренний цифровой маркетолог , полезно знать несколько очень важных аспектов цифрового маркетинга . Таким Что такое токсичные обратные ссылки и как их удалить?
... шагов, которые вы предприняли для устранения проблемы, и обещания того, что вы будете придерживаться лучших практик SEO в будущем. Тем не менее, помните, что для ответа на ваше сообщение Google может потребоваться от двух до трех недель. Выполнение аудита обратных ссылок трудоемко и требует много времени, но оно того стоит. Кроме того, это всегда безопасный подход - нанять уважаемую SEO компанию, которая придерживается этических норм SEO и информирует о лучших практиках. Автор Что такое CPC, CPM, CPA и CPL? Зарабатывай на своем блоге
... из целей, которую каждый человек, осуществляющий веб-проект, заключается в его монетизации. То есть, пытаясь получить какую-то выгоду или экономические показатели . И что сегодня существует много способов и способов монетизации веб-страницы или блога. Что такое PageRank?
Большинство оптимизаторов и людей в целом не ДЕЙСТВИТЕЛЬНО знают, что такое PageRank ... Многие считают, что вы можете узнать это с помощью инструментов, которые показывают зеленую полосу со значениями от 0 до 10! Зная разницу между PageRank и этим баром, вы избавите себя от нескольких головных болей. PageRank (PR) является основным компонентом оригинального алгоритма Google в соответствии с Блог SEO: как озаглавить свой блог для SEO Wins
Это краткое и простое руководство по созданию заголовка блога для бесплатного органического трафика. (Если вы не знаете, что такое органический трафик, это бесплатный трафик, который ваш блог / веб-сайт получает, когда кто-то нажимает на неоплачиваемый результат в поисковой системе). Конечно, есть гораздо более сложные способы сделать это, например; войдите в Google Adwords Keyword Analysis Tool и проведите некоторое исследование. Однако эта гораздо более быстрая идея, безусловно, работает Что такое сканируемость и индексируемость веб-сайта?
Скажите, что первое, что приходит вам в голову, когда вы думаете о рейтинге сайта? Содержание? Или, может быть, обратные ссылки? Я признаю, что оба являются решающими факторами для позиционирования сайта в результатах поиска. Но они не единственные. На самом деле, два других фактора играют важную роль в SEO - сканируемость и индексируемость. Тем не менее, большинство владельцев сайтов никогда не слышали о них. В то же время даже небольшие проблемы Как получить больше за SEO написание
Как и было обещано, у меня есть еще один вопрос на этой неделе от читательницы MALW Джины, которая ранее спрашивала о нишевые блоги против общего ведения блога. Сегодня мы обсуждаем Что такое локальный SEO и как его оптимизировать?
... и это о «локальном SEO», но в действительности мы не знаем, к чему он относится или чем он отличается от остальных стратегий позиционирования. Что такое локальный SEO? Местное SEO , собственно говоря, это позиционирование сайта локально. Ну, что это значит? Это зависит от географического местоположения пользователя, то есть это методы позиционирования, которые используются, когда вы хотите предоставить видимость сети на основе релевантных поисков пользователя
Комментарии
Итак, что вы можете сделать, чтобы у вас было как можно больше времени, чтобы ваши специальные предложения Черной пятницы были в результатах поиска на страницах поисковых систем 23 ноября 2018 года?Итак, что вы можете сделать, чтобы у вас было как можно больше времени, чтобы ваши специальные предложения Черной пятницы были в результатах поиска на страницах поисковых систем 23 ноября 2018 года? Почему бы не попробовать эти SEO-советы в Черную пятницу? 1. Создайте целевую страницу Черной пятницы Чем раньше ваша целевая страница «Черной пятницы» будет запущена, тем раньше вы сможете отправить ее в поисковые системы для индексации. Вам не обязательно, чтобы ваши актуальные события Свернуть, Обсудить, Обсудить, Обсудить, Обсудить, Обсудить, Приобрести Свернуть » Что это такое, что вы думаете, что вы думаете, что вы думаете?
Свернуть, Обсудить, Обсудить, Обсудить, Обсудить, Обсудить, Приобрести Свернуть » Что это такое, что вы думаете, что вы думаете, что вы думаете? Р'РїРμСЂРμРґРμР »РμРЅР ° Р» РμРЅР ° Свернуть, Свернуть, Свернуть, Свернуть, Свернуть, Свернуть, Свернуть, Свернуть, Свернуть , Москва, Россия, Россия, Россия, Россия, США. Возбуждаю, обдумываю, оберегаю, оберегаю, обдумываю, ·,,,, ЊР · ·ѕѕ С С С "С .... ....μ‡ .... ....‡ .... .... .... .... .... .... .... .... .... .... .... .... .... .... .... .... Но что такое длинный хвост, для чего он нужен и как его использовать?
Но что такое длинный хвост, для чего он нужен и как его использовать? Вот все, что вам нужно знать, чтобы освоить длинный хвост и настроить свой SEO стратегия , [Статья обновлена 13 августа 2018 г.] Вы ищете, чтобы написать листы продукта веб-контент блог статьи Легко найти профессионального копирайтера на Redacteur.com Конечно, когда вы теряете клиента, у вас также должна быть форма, чтобы узнать, почему он ушел?
Конечно, когда вы теряете клиента, у вас также должна быть форма, чтобы узнать, почему он ушел? И тогда вы можете заполнить информацию о конкурсе и поднять новые идеи для вашей кампании. Участвуя в конференциях и форумах: войдя в них, вы сможете узнать, кто ваши конкуренты? Что у них есть? и как они взаимодействуют с клиентами? 3. Отчетность и постановка целей После нахождения ключевых слов и анализа конкурентов необходимо составить точный отчет о целевых ключевых Очевидно, что HTTP / 2 предлагает некоторые большие преимущества как по скорости, так и по производительности, но что это значит для вас прямо сейчас?
Очевидно, что HTTP / 2 предлагает некоторые большие преимущества как по скорости, так и по производительности, но что это значит для вас прямо сейчас? Что ж, вы можете быть удивлены, узнав, что HTTP / 2 уже доступен и может быть поддержан вами, не влияя на ваших старых пользователей, работающих на HTTP / 1.1! Вы можете думать о HTTP / 2 так же, как о любом другом протоколе или даже о разговорном языке. Чтобы это работало, вам просто нужно согласие отправителя и получателя говорить Какие Nofollow ссылки и что такое ссылки ?
Очевидно, что HTTP / 2 предлагает некоторые большие преимущества как по скорости, так и по производительности, но что это значит для вас прямо сейчас? Что ж, вы можете быть удивлены, узнав, что HTTP / 2 уже доступен и может быть поддержан вами, не влияя на ваших старых пользователей, работающих на HTTP / 1.1! Вы можете думать о HTTP / 2 так же, как о любом другом протоколе или даже о разговорном языке. Чтобы это работало, вам просто нужно согласие отправителя и получателя говорить Как вы можете определить, какие сайты запрашивать ссылки, которые, как вы знаете, принесут вам трафик и лиды?
Как вы можете определить, какие сайты запрашивать ссылки, которые, как вы знаете, принесут вам трафик и лиды? Просто введите SimilarWeb , Этот инструмент позволяет вам ввести любой сайт и получить кучу метрик о его трафике. Мы специально рассмотрим одного из наших конкурентов, чтобы узнать, откуда у них хороший реферальный трафик, и попытаемся имитировать его. Я буду притворяться, что я SaaS графического дизайна и буду Предположим, вы создаете ссылки, которые, по вашему мнению, нравятся Google и помогут вам в рейтинге, но что если Google передумает о том, что им нравится?
Предположим, вы создаете ссылки, которые, по вашему мнению, нравятся Google и помогут вам в рейтинге, но что если Google передумает о том, что им нравится? Где вы собираетесь быть 6/12/18 месяцев? В прошлом, если бы Google не нравились виды создаваемых вами ссылок, они фактически игнорировали бы их и не учитывали их в своих оценках - это были SEO, которые должны были определить, какие ссылки хороши для репликации, а какие - плохо нет! В 2014 году весь процесс работает совсем по-другому. Итак, как владелец бизнеса, как вы убедитесь, что ваша команда / команда SEO действительно делает то, что они должны делать?
Итак, как владелец бизнеса, как вы убедитесь, что ваша команда / команда SEO действительно делает то, что они должны делать? Как вы можете быть уверены, что они не будут делать то, что может буквально разрушить ваш бизнес в будущем? По моему опыту, самое лучшее, что вы можете сделать, - это заказать профессиональный аудит сайта SEO. Всесторонний SEO-аудит, выполненный настоящим профессионалом, охватит весь ваш сайт с точки зрения поисковой системы и может сказать вам, что было сделано Что заставляет вас работать каждый день и 8 часов (и больше, и больше), чтобы оптимизировать сайты?
Что заставляет вас работать каждый день и 8 часов (и больше, и больше), чтобы оптимизировать сайты? Довольные клиенты при достижении желаемого результата. Оптимизация сайта иногда бывает утомительной, но амбициозные клиенты, которые пытаются работать, чтобы добиться результатов, забывают о времени и отвечают на все свои вопросы, а также изобретают все больше и больше вещей, чтобы помочь сайту. Это то, что побуждает меня приходить на работу - сильные клиенты и результаты после работы. Например, почему вы используете веб-тему когда вы можете использовать только некоторый опыт SEO, чтобы вы могли максимально использовать благополучие своих компаний?
Что заставляет вас работать каждый день и 8 часов (и больше, и больше), чтобы оптимизировать сайты? Довольные клиенты при достижении желаемого результата. Оптимизация сайта иногда бывает утомительной, но амбициозные клиенты, которые пытаются работать, чтобы добиться результатов, забывают о времени и отвечают на все свои вопросы, а также изобретают все больше и больше вещей, чтобы помочь сайту. Это то, что побуждает меня приходить на работу - сильные клиенты и результаты после работы.
Что такое CSS-спрайты?
Что такое CSS-спрайты?
Что такое PageRank?
Скажите, что первое, что приходит вам в голову, когда вы думаете о рейтинге сайта?
Содержание?
Или, может быть, обратные ссылки?
Что такое локальный SEO?
Ну, что это значит?
Итак, что вы можете сделать, чтобы у вас было как можно больше времени, чтобы ваши специальные предложения Черной пятницы были в результатах поиска на страницах поисковых систем 23 ноября 2018 года?