Sprite online generator: CSS Sprite Generator, Editor, and Code

10.05.2023 Facebook Twitter LinkedIn Google+ Разное

Генератор спрайтов CSS

  • CSS-спрайты
  • О
  • Часто задаваемые вопросы
  • Новости

Спрайты CSS

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

Если вам нужно, чтобы ваши спрайты были адаптивными, используйте генератор адаптивных CSS-спрайтов.

1: Загрузите свои изображения

Выберите до 20 файлов общим размером 8 МБ.

2: Выберите параметры

Тип выхода: PNG — рекомендуемый JPEGGIF Настройки JPEG Удаление артефактов JPEG: Качество JPEG: Другие настройки Префикс класса CSS: Отступы между изображениями: 0px1px2px3px4px5px10px20px (Это сделает ваш файл немного больше, но может предотвратить наложение изображений друг на друга)

3: Создайте свой спрайт

О

Автор: RoBorg

Что такое спрайт CSS?

CSS Sprite — это набор изображений, объединенных в один файл изображения.

Они используются как метод ускорения загрузки ваших веб-сайтов за счет уменьшения количества HTTP-запросов, которые должны делать ваши пользователи. Каждый запрос будет содержать служебные данные заголовков HTTP (включая файлы cookie) и задержку соединения. Используя один файл изображения вместо нескольких, вы можете значительно сократить время загрузки страниц.

Что я получу и как это использовать?

Этот инструмент создает:

  • Файл изображения
  • Блок кода CSS

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

<дел>

Часто задаваемые вопросы

Кто написал это?

Грег, он же RoBorg, — я профессиональный PHP-программист для Just Say Please.
Вы можете подписаться на меня в Твиттере

Как сообщить об ошибке?

На данный момент только через Твиттер.

Как долго вы храните мои исходные изображения и спрайты?

Они не хранятся на сервере.

Являются ли загруженные мной изображения конфиденциальными?

Да.

Есть ли API?

Да — см. страницу CSS Sprites API.

Является ли этот проект открытым исходным кодом

В данный момент нет, но если я получу достаточный интерес, я могу очистить код и опубликовать его.

Как написан этот сайт?

Генератор спрайтов написан на PHP с использованием функций изображения GD. Прозрачные PNG генерируются вручную.

Последние новости

Август 2017 г.

  • Улучшенный API

Май 2014 г.

  • Улучшенный CSS
  • Улучшена обработка ошибок
  • Увеличен лимит памяти

Январь 2014 г.

  • Новый пользовательский интерфейс — загрузчик HTML5 вместо Flash
  • Новый API
  • Используйте URI данных вместо хранения файлов
  • Подсортировать файлы по имени

июль 2011 г.

  • Улучшенная обработка ошибок
  • Обновление до YUI 2.9.0
  • Добавлено предупреждение Chrome

ноябрь 2010 г.

  • Исправлена ​​ошибка «отклонение на один» при определенных обстоятельствах
  • Добавлен параметр заполнения
  • Добавлен префикс класса CSS
  • Изменен алгоритм макета, когда все изображения имеют одинаковую ширину — теперь загрузка большого количества значков приведет к квадратному изображению вместо гигантского столбца
  • Обновлен до PHP 5.3 — теперь PNG в градациях серого загружаются правильно!
  • Добавлено сжатие PNG и фильтры

Генератор спрайтов CSS | GiftOfSpeed ​​

Выберите 2 или более изображений:

Выбранные вами изображения:

Сохранить как:

PNG гифка JPG


Линейка изображений:

Вертикальная Горизонтальный

Расстояние между изображениями:

пикселей




Что такое спрайты CSS?

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

Как спрайты ускоряют мой сайт?

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

Для каких изображений следует использовать спрайты?

Вы должны использовать только изображения для всего сайта. Другими словами, изображения, которые используются на большинстве страниц вашего сайта. Выполните следующие действия, чтобы обнаружить и скачать их:

  1. Откройте свой веб-сайт в окне браузера и просмотрите исходный код (как HTML, так и CSS).
  2. Теперь найдите исходный код для всех файлов изображений (файлы png, jpg или gif), используемых на вашем веб-сайте, обычно для дизайна вашего веб-сайта.
  3. Теперь сохраните эти изображения на жесткий диск.
  4. Всегда исключайте фотографии, используемые для статей, или аналогичные изображения, которые используются на вашем сайте только один или два раза.

Как сделать спрайты CSS?

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

Как внедрить код CSS и HTML?

— Скопируйте код на вкладке CSS и вставьте его в скрипт CSS своего сайта.
— Отрегулируйте положение фона: координаты X и Y, чтобы расположить изображение именно в том месте, где вы хотите, чтобы оно отображалось на вашем веб-сайте.
Comments
Leave Comment