Инструменты для фронтенд-разработки – Интернет-гостеприимство

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

Отдельные графические изображения затем могут быть отображены путем соответствующего размещения графического изображения в качестве фонового изображения в нужном месте.

Звучит сложно и требует тонкой настройки. Это было бы без следующих полезных инструментов:

Оптимизировать сайт: Если вы хотите оснастить существующий веб-сайт спрайтами CSS (что я рекомендую всем), вам может помочь инструмент SpriteMe.

Просто зайдите на spriteme.org и перетащите отображаемую там ссылку на панель закладок вашего браузера. Теперь вы можете вызвать инструмент, нажав на ссылку.

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

SpriteMe также генерирует соответствующий код CSS, который вам нужно только включить на свой веб-сайт вместе с графикой.

Графика спрайтов из отдельных графиков: Чтобы автоматически сгенерировать графику спрайта + код CSS из отдельной графики, вы просто загружаете свою графику в ZIP-архиве в генератор спрайтов CSS. Инструмент сделает все остальное.

Сгенерируйте CSS из графики Sprite: Если вы уже создали графику Sprite самостоятельно и теперь хотите, чтобы соответствующий код CSS обращался к отдельной графике, вы можете использовать Sprite Cow.

Там вы загружаете графику, выбираете отдельные элементы и тут же отображается код CSS.