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

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

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

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

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

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

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

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

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

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

Source

От admin