Здравствуйте! В этом видео я расскажу вам, что такое спрайты и почему они оптимизируют загрузку страниц. Итак спрайты – это прием объединения множества изображений в одно. Вообще, спрайты впервые появились в игровой индустрии для анимации персонажей. Разные позиции персонажа склеивали в одно изображение и прокручивали это изображение быстро. Благодаря этому, появлялась анимация героев. Для чего используются спрайты в вэбе? Спрайты в вэбе используются для оптимизации, то есть уменьшения количества загрузок. Итак, например у нас есть задача: нужно сделать кнопку «Поделиться». То есть при наведении на какой-то элемент, картинка должна поменяться. И эти картинки присутствуют абсолютно на всех страницах. Итак, мы генерируем спрайт. Спрайт можно генерировать как вручную, например в фотошопе склеивать изображения, либо воспользоваться специальными генераторами, которые выдадут вам готовую картинку и плюс могут приложить еще 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 проекты, для чего они нужны и как оптимизировать загрузку на страницы. Хочу обратить ваше внимание, если на вашей странице присутствует много мелких иконочек и картинок, то их всех можно объединить в спрайт. И тогда получится, что вы загружаете только одну большую картинку, а не делаете много запросов к серверу.
