г. Москва, Новокуркинское шоссе, дом 51
ПН-СБ с 10:00 до 20:00, ВС — выходной
8 (495) 545-48-18 8 (800) 350-48-18 Обратный звонок

Оптимизация веб-сайта с помощью спрайтов и CSS

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

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


Это выполняется с помощью CSS. Изображение, которое комбинируется и состоит из  нескольких маленьких изображений, которые система вырезает в нужный момент времени и демонстрирует для нужного объекта на странице сайта, называют CSS спрайтом. Простое изменение значений свойства position приводит к эффекту смещения на указанные размеры. Возьмем самый простой пример: у Вас есть блок размеров 160 на 160 пикселей. В нем размещено изображение такого же размера, как и блок. Изображение с прозрачным фоном. Вы хотите, чтобы при наведении курсора на блок фон блока менялся, смещаясь вправо. Для этого нужно создать изображение в два раза шире (как минимум) исходного и условно разделить наполовину. Правую часть изображения измените так, каким Вы хотите видеть его при наведении на него курсором. В CSS пропишите для этого блока смещение вправо на 160 пикселей. Вот и все.
Только не забудьте заменить новой картинкой старую (можно просто вставить с заменой) — эта маленькая фишка при постоянном использовании позволит значительно снизить время на загрузку страницы. Если взять себе на заметку, что CSS имеет еще и другие возможности, то скорость загрузки сайта будет весьма ощутимой. Прозрачность с помощью opacity и псевдокласс hover могут позволить создать красивый эффект затемнения фона изображения. И для этого не надо будет подгружать дополнительные картинки. Используя псевдоклассы CSS и возможности CSS3, можно создать красивый «подвижный» сайт, который подойдет для портфолио либо персональной страницы. Позволит создать красивое меню либо эффекты обработки при наведении курсора на ссылки, изображения, и так далее. Использование CSS в процессе создания сайта на этапе верстки созданного макета также позволяет снизить количество строк кода и влияет на время загрузки страниц сайта. Еще один интересный и очень популярный среди новичков момент – закругленные края блоков либо градиентная заливка кнопок, пунктов меню. Раньше это делалось с помощью создаваемых отрезков картинок, подстановки их в нужном месте. Теперь CSS3 очень легко справляется с этой задачей: border-radius и background: radial-gradient (значения). И еще очень любимая многими разработчиками – box-shadow – добавление тени элементу.

Это только начало нашей длинной и интересной истории. Мы будем продолжать держать вас в курсе событий и возможностей внутренней оптимизации сайта. Если у вас возникают какие-либо вопросы или необходима консультация специалиста по продвижению и оптимизации вашего ресурса, то вы можете обратиться к нам удобным для вас способом. Мы всегда будем вам рады!

Задайте вопрос нашему специалисту

Вверх