0:00
Здравствуйте!
В этом видео я расскажу вам,
что такое спрайты и почему они оптимизируют загрузку страниц.
Итак спрайты – это прием объединения множества изображений в одно.
Вообще, спрайты впервые появились в игровой индустрии для анимации персонажей.
Разные позиции персонажа склеивали в одно изображение и прокручивали это
изображение быстро.
Благодаря этому, появлялась анимация героев.
Для чего используются спрайты в вэбе?
Спрайты в вэбе используются для оптимизации,
то есть уменьшения количества загрузок.
Итак, например у нас есть задача: нужно сделать кнопку «Поделиться».
То есть при наведении на какой-то элемент, картинка должна поменяться.
И эти картинки присутствуют абсолютно на всех страницах.
Итак, мы генерируем спрайт.
Спрайт можно генерировать как вручную, например в фотошопе склеивать изображения,
либо воспользоваться специальными генераторами,
которые выдадут вам готовую картинку и плюс могут приложить еще CSS код.
Итак, как это выглядит в браузере?
Мы рисуем какой-то один блок, например блок с классом social,
задаем ему ширину и высоту – 100 пикселей.
Задаем background-repeat, ну в случае того,
если у нас вдруг стал блок больше, чтобы там не появлялось изображение.
И задаем в качестве изображения наш спрайт.
И у каждого отдельного элемента задаем классы.
Например для Fasebook мы задаем background-position: 0 0,
потому что эта картинка находится в левом верхнем углу.
И при наведении на элемент мы меняем background-position по оси y.
Аналогично делаем для Twitter.
Только в этом случае background-position у нас сместится на 100 пикселей влево,
потому что картинка находится справа.
И при наведении мы также перемещаем спрайт вверх.
Вот что у нас получилось: красным я обозначил блок,
то есть мы задали ему это изображение и установили в позиции 0 0.
И при hover у нас изображение поменяется, потому что спрайт передвинулся вверх.
Ну и вот так это будет выглядеть в браузере,
то есть всю оставшуюся часть изображения не видно.
И при наведении у нас меняется картинка.
Особенность: меньше запросов к серверу, потому что картинка загружается одна.
Да, она большая, но она одна.
То есть браузер не тратит время на соединение к серверу.
Он делает несколько запросов, получает одну большую картинку и все.
Смена становится моментальной.
Если менять изображение на hover, то картинка может подгружаться.
Из-за этого могут появляться лаги.
Сложно добавлять новые картинки.
Ну, это не такой уж и минус, поскольку это дело можно автоматизировать.
Ну и при помощи спрайтов можно делать мультики.
Например, у нас есть элемент div с классом cartoon.
Есть спрайт, где каждое новое изображение – это действие героя.
Добавляем это изображение при помощи свойства background-image в функцию url,
и делаем анимацию.
То есть мы смещаем картинку на 100 % за девять шагов – ровно на столько,
сколько состояние героя на картинке.
Ну и в браузере это выглядит вот так.
То есть получился такой машущий веселый человечек.
Есть еще один способ оптимизации загрузки изображений.
В этом случае изображение инлайнится, то есть кодируется в base64 код.
Этот код вставляется также в атрибут src, если мы вставляем через html,
либо в background-image, используя функцию url.
В начале картинки мы видим какой формат изображения.
В данном случае мы вставили base64 код svg-изображения.
Ну и вот, картинка у нас выглядит нормально.
Какие есть плюсы?
Отсутствуют запросы к серверу, то есть картинка приходит вместе с html или с css,
так как сама картинка находится в коде.
Но картинки в этом случае не будут кэшироваться,
потому что они находятся уже внутри кода.
И, естественно, увеличивается размер css и html файла.
Дополнительно ко всему этому появляется много лишнего мусора в коде.
То есть если добавить слишком большое изображение,
то может быть просто тысяча строк кода забита лишь base64 кодом.
В этом видео вы узнали как создаются css проекты,
для чего они нужны и как оптимизировать загрузку на страницы.
Хочу обратить ваше внимание, если на вашей странице присутствует много мелких
иконочек и картинок, то их всех можно объединить в спрайт.
И тогда получится, что вы загружаете только одну большую картинку,
а не делаете много запросов к серверу.
Олег Семичевразработчик интерфейсов, Яндекс
Артем Кувалдинразработчик интерфейсов, Яндекс
Мохов Олегразработчик интерфейсов, Яндекс
