Спрайт онлайн: Бесплатный генератор SVG спрайтов | Создать SVG Спрайт

Удобный генератор CSS спрайтов / Хабр

Каким должен быть инструмент, чтобы в нем было удобно создавать и редактировать CSS спрайты? У каждого будет свой ответ на этот вопрос, а я всего лишь поделюсь своими соображениями и продемонстрирую свой генератор спрайтов.

По большей части моя работа со спрайтами сводилась к следующему:

Итак, начнем с самого начала

Краткая история

Прошлое

Давным-давно я верстал сайты. Начальство требовало ускорить загрузку страниц и поэтому я начал объединять картинки в спрайты.

В Photoshop я резал макет на части и затем объединял их с помощью PHP скрипта. Честно, я был удивлен, что в Photoshop нельзя объединить выделенные области в один файл, но в любом случае ожидать от редактора изображений еще и автоматической генерации стилей — уже явный перебор. Я простил разработчиков за такой скудный функционал и написал php скрипт, который генерировал спрайты и файл со стилями.

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

Признаюсь, был один недостаток в таком подходе. Качество картинок, которые выдает PHP мягко говоря «не очень». Поэтому я настраивал скрипт таким образом, чтобы в стилях расширения файлов были jpg, png, gif, а картинки генерировались в BMP формат. И потом я вручную конвертировал в нужный формат с помощью Photoshop.

Настоящее

Спустя много лет мне опять пришлось сверстать макет с помощью спрайтов. И тут мне стало интересно. Что появилось за это время для упрощения процесса?

Photoshop опять меня не порадовал. Зато генератор спрайтов появился в Fireworks CS6. Но просмотрев несколько видео и статей, я понял, что он мне не подходит, так как не выполняет всех моих требований.

Так же появилось много отдельных генераторов. Небольшой обзор уже был на хабре, там же приведены ссылки на генераторы.

Но не один из генераторов не выполнял всех задач, которые я выдвигаю к генератору спрайтов.

Каким я вижу генератор спрайтов

Если коротко, то генератор спрайтов должен:

• Уметь разрезать исходные картинки на части
• Уметь соединять порезанные части в спрайты
• Одновременно генерировать стили
• Главное — иметь удобный графический интерфейс

Ранее соединял картинки и генерировал стили мой PHP скрипт, я лишь прописывал для этого правила. Но сейчас мне показалось этого мало. Как минимум настройка правил в текстовом редакторе уже устарело. Сейчас все должно управляться кнопочками и настраиваться с помощью графического интерфейса.

Но раз уж делать графический интерфейс, то и Photoshop особо не нужен. Выделение областей и разрезание картинки — задача тривиальная для javascript и HTML5.

Все эти четыре пункта явно хотят объединиться в один единственный редактор.

А для редактора очень важно сохранять проект на случай если потом нужно будет что-то подправить.

Как видно, в файл проекта должны сохраняться все исходные картинки и все правила разбивки, объединения картинок и генерации стилей.

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

• Кнопочки для открывания картинок, правил или всего проекта.
• Кнопочки для сохранения результата и проекта.
• Настройка правил разбиения картинки на области. То есть: пользователь выделяет области, видит список областей, может их редактировать.
• Настройка правил группировки областей в спрайт. Тут должна быть возможность указать в каком месте спрайта должна быть картинка
• Настройка правил генерации стилей. Для каждой картинки в спрайте должны настраиваться способ генерирования стилей: генерировать или нет ширину, высоту, repeate-x, repeate-y, no-repeate, имя класса

Главное — при добавлении картинок в проект должны генерироваться некие стандартные правила, чтобы избавить пользователя от лишних действий по настройке. Например, добавили мы иконку «firefox.png». Программа должна автоматически создать область «firefox» (на всю ширину и высоту) и стиль:

.firefox{ width:16px; height:16px; background: url('data:image/png;base64,.....==') 0px 0px no-repeat; }


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

Обзор решений

Теперь кратко, почему мне не подошли существующие решения.

Compass — написан на Ruby. Пишутся стили с особым синтаксисом и программа потом генерирует обычные стили со спрайтами.
Lemonade — суть такая же и на сайте написано что он теперь встроен в тот же Compass.
Glue — командная строка для генерации спрайтов.

Эти инструменты я сравнил с тем что у меня было более пяти лет назад, когда я прописывал правила в php скрипте и он генерировал спрайты. Но сейчас мне уже хотелось именно визуальный редактор.

SpriteMe — перетаскиваем ссылку в букмарклет и потом можно редактировать спрайты на просматриваемом сайте. Но мне не нужно редактировать спрайты на существующем сайте. Мне нужен редактор на этапе, когда сайт еще верстается.

Spritepad — методом drag-and-drop перетаскиваем картинки на спрайт и справа выводятся все стили. Уже ближе к тому что я хотел. Но почему только drag-and-drop? Неужели сайт лишь демонстрирует новую фичу браузеров? Мне не всегда удобно перетаскивать, я хочу добавлять картинки через обычную кнопку «Открыть». Картинки сохраняются только в PNG? Нельзя создавать одновременно несколько спрайтов? Все-таки этот генератор сильно прост.

Sprite Cow — интересная штука. Если у вас уже есть готовый спрайт, то Sprite Cow поможет вам выделить отдельные области и сгенерировать для них css правила. Но css генерируется только для одной выделенной области. То есть если у вас куча иконок, то нужно каждую выделять и копировать css в ваш редактор стилей. В общем, идея хорошая, может сократить время при определении координат и размеров в спрайте, но сильно уж узконаправленная и опять же не решает моих задач.

Еще онлайн сервисы:

• css-sprit.es,
• csssprites.com,
• spritegen.website-performance.org,
• css.spritegen.com

В них процесс выглядит следующим образом:

1. загрузка картинок,
2. настройка параметров,
3. генерация

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

Не захотел я мириться с таким положением вещей и сваял свой генератор.

Рад представить

CSS Sprite Generator by Simpreal

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

На главной странице в разделе «Examples» есть несколько проектов-примеров.

Надеюсь они помогут разобраться в возможностях программы.

Генератор спрайтов работает онлайн. Собран из Bootstrap, Knockoutjs и само собой Jquery.

Главное, в ходе разработки проекта было получено много опыта особенно по Knockoutjs. Этот опыт вылился в две статьи на хабре:

Canvas в GIF на Javascript
Оптимизация knockoutjs при динамическом добавлении и удалении темплейтов

Если у кого-нибудь возникнут еще вопросы связанные с реализацией того, что умеет генератор спрайтов, то я с радостью отвечу.

Так же существует офлайн версия под Windows. Она представляет собой оболочку на Awesomium в которую просто вставляются web-файлы. Но на самом деле мне пришлось поработать чтобы все функции заработали в этой оболочке. Так что могу поделится и этим опытом.

Что дальше

За процессом разработки можно следить на

smartprogress

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

К сожалению, за пол года практически никто не стал пользоваться программой. Поэтому демонстрирую программу хабросообществу, чтоб узнать ваше мнение о полезности данного продукта.

Я лишь пока предполагаю, что очень мало людей в принципе пользуются спрайтами. Например, за последние 5 лет я лишь один сайт так делал знакомым. Реальные же заказчики сейчас не обращают на это внимания.

Поэтому сложно сказать, что будет дальше. Если людям понравится идея программы, то она будет развиваться. Если же нет, то она либо останется как есть, либо превратится в нечто другое.

В любом случае опыт бесценен!
И если мне понадобится сверстать сайт спрайтами, то у меня уже будет для этого удобный инструмент!

CSS спрайты — создание и использование, генераторы CSS спрайтов

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

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

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

Чаще всего создают CSS спрайты для иконок, лейблов, значков и прочих мелких изображений, так как на одной большой картинке может поместиться сразу несколько десятков таких элементов. Да и вставлять их в нужные места страницы поодиночке – весьма неблагодарный труд. Кроме того, с их помощью реализуют css эффект hover при наведении на картинку или пункт меню.

Вот парочка примеров «подобных конструкций»:

У использования CSS спрайтов есть два основных преимущества:

Во-первых, при помощи данной технологии можно загрузить на страницу сайта не пару десятков файлов, а всего лишь одну картинку. Вам может показаться, что загрузка маленьких файлов должна происходить гораздо легче и быстрее. На самом деле это не так. При увеличении числа файлов возрастает общее количество HTTP-запросов. А каждый такой запрос создает дополнительную нагрузку на сервер.

Во-вторых, размер одного спрайта в килобайтах, как правило, чуть меньше суммарного размера всех графических элементов, входящих в его состав (если бы они использовались отдельно друг от друга). Поэтому при прочих равных условиях он будет загружаться чуть быстрее.

В качестве недостатков CSS спрайта можно назвать:

• больше сложностей при написании CSS стилей;
• дополнительные временные затраты на создание изображения CSS спрайта из комбинации картинок;
• необходимость изменения всего изображения при смене одной из его составляющих (например, какой-то иконки).

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

Создание CSS спрайтов

Давайте разберемся как использовать спрайты CSS. В теории тут все довольно просто.

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

2. Затем в основном CSS файле сайта к нужным элементам (кнопки, иконки, логотипы, div блоки) прописывается атрибут background:url. В скобках указывается относительный URL-адрес нашего CSS спрайта, к примеру, background:url(«image/sprite.png«).

3. Следуещий шаг – указание конкретного места (координат) размещения нужной нам картинки в спрайте. Это делается посредством атрибута background—position (о нем детально уже рассказывали). Через двоеточие следует указать позицию нашей картинки в пикселях относительно верхнего левого угла спрайта, к примеру, background—position: -47px -50px. Здесь задается смешение вправо и вниз.

Если по какой-либо стороне смещение составляет 0 пикселей, то обозначение «px» допускается опустить. Можно также указать сторону явно, если смещение происходит только по ней. К примеру, background-position: left 35px (смещение влево на 35 пикселей).

Залил на Codepen конкретный пример как сделать спрайт CSS для иконки, у которой при наведении меняется стиль оформления:

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

В принципе, создать CSS спрайт можно вручную в фотошопе (это всего лишь картинка). Но зачем «изобретать велосипед», если для реализации этой цели уже придумано большое количество готовых программных решений. В частности, существуют специальные онлайн-сервисы генераторы спрайтов CSS. Один из самых популярных из них — CSS Sprites.

CSS Sprites

На главной странице размещена форма загрузки графических файлов (для каждого файла – отдельная кнопка). Изначально видно лишь три кнопки для загрузки. Если вам нужно больше, то жмите на «Need More».

После того, как все файлы для будущего CSS спрайта выбраны, жмите на кнопку «Options». Перед вами откроется небольшая панель с настройками. Здесь можно задать отступы между элементами в пикселях, добавить рамку для изображений, выровнять все картинки в готовом спрайте по левому или по верхнему краю, задать фоновый цвет в RGB-формате.

После нажатия на кнопку «Generate» произойдет непосредственное создание CSS спрайта. Также вы увидите небольшую инструкцию для его использования, а именно CSS код, который нужно будет разместить на своем сайте. Есть даже пример в HTML. Разобраться, думаю, не проблема.

Dan’s Tools CSS Sprite Generator

Визуально Dan’s Tools CSS Sprite Generator — достаточно симпатичный генератор спрайтов CSS со многими настройками. Можно, например, выбрать вертикальный или горизонтальный тип вставки иконок в общее изображение.

CSS Sprites

В сервисе CSS Sprites все предельно просто как по дизайну, так и по настройкам. Есть выбор формата результирующего изображения: PNG, JPEG, GIF. На странице имеется линк на адаптивную версию генерации спрайтов — Responsive CSS Sprites (хотя я ее не пробовал).

Итого. В принципе, все нюансы как сделать CSS спрайты и их использовать мы рассмотрели. Генераторы помогут ускорить процесс создания элементов, но можно обойтись и фотошопом. Если будут какие-то вопросы, пишите в комментариях.

Минификация и объединение в SharePoint Online — Microsoft 365 Enterprise

• Статья
• 10/07/2021
• Чтение занимает 2 мин

Были ли сведения на этой странице полезными?

Оцените свои впечатления

Да Нет

Хотите оставить дополнительный отзыв?

Отзывы будут отправляться в корпорацию Майкрософт. Нажав кнопку «Отправить», вы разрешаете использовать свой отзыв для улучшения продуктов и служб Майкрософт. Политика конфиденциальности.

Отправить

В этой статье

В этой статье описывается использование методов минирования и комплектации с веб-сайтами для уменьшения количества запросов HTTP и сокращения времени загрузки страниц в SharePoint Online.

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

Для файлов JavaScript и CSS можно также использовать подход под названием minification, в котором можно уменьшить общий размер файлов, удалив белое пространство и другие не нужные символы.

Minification and bundling JavaScript and CSS files with Web Essentials

Сторонние программы, такие как Web Essentials, можно использовать для комплекта CSS и JavaScript-файлов.

Важно!

Web Essentials — это сторонний проект с открытым исходным кодом, основанный на сообществе. Программное обеспечение является расширением Visual Studio 2012 и Visual Studio 2013 и не поддерживается Корпорацией Майкрософт. Чтобы скачать web Essentials, посетите веб-сайт по https://vswebessentials.com/download ссылке .

Web Essentials предлагает две формы комплектов:

Можно использовать Web Essentials, если у вас есть существующая функция с некоторыми элементами брендинга, которые ссылались на пользовательские основные страницы, такие как:

Создание пакета TE000127218 и CSS в Web Essentials

1. В Visual Studio в обозревателе решений выберите файлы, которые необходимо включить в пакет.

2. Щелкните правой кнопкой мыши выбранные файлы, а затем выберите файл пакетов Web Essentials > Create JavaScript из контекстного меню. Пример:

Просмотр результатов комплектовки файлов JavaScript и CSS

При создании пакета JavaScript и CSS Web Essentials создает XML-файл, называемый файлом рецептов, который идентифицирует файлы JavaScript и CSS, а также некоторые другие сведения о конфигурации:

Кроме того, если в рецепте комплектов установлен true флага minify, файлы уменьшаются в размерах, а также в комплекте. Это означает, что были созданы новые, заминированная версия файлов JavaScript, на которые можно ссылаться на своей странице.

При загрузке страницы с веб-сайта можно использовать средства разработчика из вашего веб-браузера, такие как Internet Explorer 11, чтобы увидеть количество отправленных на сервер запросов и время загрузки каждого файла.

Следующая цифра — это результат загрузки файлов JavaScript и CSS перед минификацией.

После объединяет CSS и JavaScript файлы, количество запросов сократилось до 74, и каждый файл занимает немного больше времени, чем исходные файлы, чтобы скачать по отдельности:

После комплектовки файл пакета JavaScript значительно сокращается с 815 КБ до 365 КБ:

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

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

Создание спрайта изображения в Веб-основных

1. В Visual Studio в обозревателе решений выберите файлы, которые необходимо включить в пакет.

2. Щелкните правой кнопкой мыши выбранные файлы, а затем выберите веб-материалы > Создать спрайт изображения из контекстного меню. Пример:

3. Выберите расположение, чтобы сохранить спрайт-файл. Файл .sprite — это XML-файл, который описывает параметры и файлы в спрайте. На следующих рисунках покажите пример PNG-файла спрайта и соответствующего XML-файла спрайта.

Создание CSS спрайтов в онлайн генераторе Sprites Me для снижения числа запросов к серверу

Обновлено 24 сентября 2021 Просмотров: 64 879 Автор: Дмитрий Петров

1. Снижаем число подгружаемых файлов для ускорения сайта
2. Создание CSS спрайтов (sprites) из фоновых изображений сайта
3. Вносим изменения в файл CSS при подключении спрайтов

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

Это уже пятая статья. В предыдущих публикациях для анализа скорости загрузки сайта и получения рекомендаций по ее увеличению, мы воспользовались очень удобным и эффективным инструментом под названием Page Speed. Сегодня же поговорим о таком понятии, как CSS спрайты (sprites).

Снижаем число подгружаемых файлов для ускорения сайта

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

1. Как измерить скорость загрузки сайта и установить Page Speed
2. Как объединить и сжать CSS файлы
3. Как включить Gzip сжатие в .htaccess
4. Снижение числа http запросов и сжатие изображений

Как я говорил в предыдущей статье, для загрузки каждого изображения в браузер пользователя с web сервера, вне зависимости от того, как оно формируется (с помощью тега IMG или же в CSS с помощью свойства «background»), используется отдельный http запрос. Если графики на вашем проекте довольно много, то и количество таких запросов будет неприлично большим.

Например, на начальном этапе развития моего блога сервис Pingdom (на нем можно измерить скорость загрузки, а так же настроить проверку и мониторинг доступности сайта — аптайм) давал такое заключение:

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

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

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

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

Ну, а те фоновые картинки, которые все же окажутся необходимыми в оформлении, мы попробуем объединить в один или несколько больших графических файлов (спрайтов), которые позволят еще немного снизить число запросов к web серверу. Технология CSS спрайтов известна довольно давно, хорошо отработана и поддерживается всеми браузерами.

Единственный минус, который они имеют по сравнению с отдельными графическими файлами под каждое фоновое изображения — это сложность создания и поддерживания. Что есть, то есть — сделать его самому и описать положение отдельных фоновых картинок в CSS коде — задача не из простых.

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

Лучшим онлайн сервисом, на мой взгляд, является «Sprites me» — широко известный и популярный в буржунете, но не заслужено обойденный вниманием в рунете. Вам даже не потребуется загружать в него свои фоновые изображения, которые вы желаете объединить.

Этот генератор все сделает за вас — сам просмотрит ваш сайт, даст рекомендации о том, какие именно картинки можно будет объединить в спрайты, а какие нет.

Во как, настоящий сервис по буржуйски — все включено, да и к тому же бесплатно. Работать с ним действительно очень просто и я сейчас расскажу, как именно в два счета создать и применить на своем сайте спрайты.

Кстати, после того, как я произвел все действия, описанные мною в этой серии статей про увеличение скорости загрузки, в сервисе Pingdom результат уже получился гораздо более приятный глазу:

В общей сложности, ускоряя свой блог, мне удалось в два раза снизить количество http запросов, при этом так же в два раза снизить количество загружаемых в браузеры пользователей с web сервера изображений. Частично были удалены не нужные картинки шаблона, а оставшиеся были по возможности объединены. Так же на треть уменьшился общий вес всех подгружаемых объектов, за счет их оптимизации (сжатия).

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

После проведения всех описанных в этих пяти статьях мероприятий по повышению скорости загрузки, Page Speed дает моему блогу KtoNaNovenkogo.ru оценку в 93 балла из ста возможных, и при этом отсутствуют строки помеченные красным, что означает практически полное исполнение мною всех основных требований (см. скриншот выше).

Создание CSS спрайтов (sprites) из фоновых изображений сайта

Итак, для начала вам нужно открыть главную страницу сервиса «Sprites me». Дальнейшие действия могут показаться вам не совсем обычными, ибо потребуется перетащить ссылку под таким же названием «Sprites me» с этой страницы в закладки вашего браузера.

Не знаю, насколько корректно работает этот онлайн генератор в различных браузерах, но в Opera он работает без проблем и на ура.

Открываете в боковой панели обозревателя закладки и выбираете папку, куда требуется сохранить ссылку генератора, а затем просто хватаете левой кнопкой мыши надпись «Sprites me» и тащите ее на панель закладок своего браузера.

Дальше открываете в нем любую страницу своего ресурса и просто щелкаете в панели закладок по только что созданной закладке сервиса «Sprites me». На фоне страницы вашего ресурса в правом верхнем углу откроется окно этой надстройки, где вы сможете осуществить создание спрайта именно для вашего проекта, а затем его скачать. Потрясающе удобная штука.

Посмотрите внимательно, в области «Suggested Sprites» для моего блога предлагается создать три спрайта из фоновых изображений моей темы оформления WordPress. В первый будет включено девять графических файлов, а в остальные по два. В самом низу окна генератора в области «Non-Sprited Images» приведены картинки, которые не представляется возможности объединить.

Что примечательно, в случае, если вы не согласны с мнением генератора, то можете левой кнопкой мыши перетаскивать изображения между этими областями. Мне это понадобилось, например, после того, как я, попробовав применить первый из предлагаемых спрайтов к своему блогу, столкнулся с неработоспособностью двух из девяти объединенных картинок.

Попробовав и так, и эдак поиграться с CSS кодом, я счел за благо при создании первого спрайта просто перетащить из него проблемные изображения в нижнюю область «Non-Sprited Images». После этого проблем с его работой уже не наблюдалось. Как я и говорил — все очень просто и наглядно. Хвала создателям этого онлайн генератора.

Итак, что же нужно сделать для создания спрайта? Да просто щелкнуть по кнопке «make sprite», расположенной в верхнем правом углу каждой области с изображениями, которые при вашем желании могут быть объединены.

После этого генератор на некоторое время задумается, а затем вместо Урлов на отдельных картинок покажет ссылку, по которой вы сможете скачать уже готовый CSS спрайт (все изображения будут объединены в одно). Подведя курсор мыши к этой ссылке вы увидите, как он будет выглядеть:

Для скачивания созданного спрайта щелкните по его Урлу правой кнопкой мыши и выберите из контекстного меню пункт сохранения объекта по ссылке. Затем подключитесь к вашему ресурсу по FTP и копируете графический файл со спрайтом в папку, где хранятся картинки вашего шаблона (хотя можно и в любую другую директорию, ибо это не принципиально).

Точно таким же образом создаете и остальные (просто щелкнув по кнопке «make sprite»), которые вам предлагает создать генератор. Скачиваете полученные файлы спрайтов и заливаете их в папку с картинками на своем ресурсе.

Вносим изменения в файл CSS при подключении спрайтов

Но на этом работа еще не закончена. Ведь нужно еще будет подсказать браузеру пользователя, как именно извлекать нужные фоновые изображения из созданных спрайтов.

Для этого потребуется внести небольшие изменения в файл стилевого оформления вашего проекта, который обычно находится в папке с шаблоном используемого вами движка — чаще всего он называется style.css, но возможны варианты.

Но тут у вас не должно возникнуть особых трудностей, ибо данный генератор даст вам подробную инструкцию, что именно в вашем файле CSS нужно будет изменить. Для получения этой инструкции вам нужно будет щелкнуть по кнопке «export CSS», расположенной в правом верхнем углу окна «Sprites me».

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

Но обратите внимание, что в приведенной инструкции путь до графических файлов спрайтов вам нужно будет поменять на свой. Для примера приведу участок кода моего style.css до внесения изменения:

#content .post_bottom{background:#bce3ff url(images/post_bottom.png) no-repeat bottom;padding:0 0;clear:both;overflow:hidden;height:100%;margin-bottom:5px;font:13px Arial, Helvetica, sans-serif;}

И после:

#content .post_bottom{background:#bce3ff url(https://ktonanovenkogo.ru/wp-content/themes/Organic/images/spriteme1.png) no-repeat bottom; background-position: -10px 0px;padding:0 0;clear:both;overflow:hidden;height:100%;margin-bottom:5px;font:13px Arial, Helvetica, sans-serif;}

Если в свойстве уже окажется прописанным свойство «background-position», то замените значения в нем на те, которые предлагает данный генератор.

После внесения всех предписанных изменений в style.css обновите открытую в браузере страницу вашего ресурса, удерживая при это нажатой клавишу Shift на клавиатуре (в этом случае статические объекты на вебстранице будут заново запрошены с web сервера).

Если никаких изменений и перекосов в дизайне вы не заметите, то можно вас поздравить с удачным повышением скорости загрузки сайта через уменьшение числа http запросов — ведь теперь будут подгружаться не десятки графических файлов, а лишь единицы (не важно, что они будет больше весить, ибо никто не мешает вам их оптимизировать, как было рассказано в одной из приведенных в начале статей).

Если перекосы после применения CSS спрайта все же появились, то попробуйте определить их причину, и при невозможности устранения, просто создайте его заново в генераторе, но уже исключив из него те изображения, которые не корректно отображались (перетащите их мышью в область «Non-Sprited Images»).

Оптимизации изображений посвящен второй ролик из 6 видеоуроков по теме ускорения сайта, которые, на мой взгляд, имеет смысл посмотреть целиком, чтобы воспринимать картинку оптимизации в целом (нужный ролик можно выбрать из выпадающего списка в левом верхнем углу окна плеера):

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

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

Около

Автор: Роборг

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

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

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

Этот инструмент генерирует:

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

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

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

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

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

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

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

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

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

Могу ли я загружать изображения только для личных целей?

Да.

Есть ли API?

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

Это проект с открытым исходным кодом

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

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

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

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

августа 2017

Май 2014

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

Янв 2014

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

июл 2011

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

ноя 2010

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

Генератор листов спрайтов HTML5

Перетащите файлы изображений на место ниже или используйте ссылку «Открыть» для загрузки изображений с помощью обозревателя файлов. Затем нажмите «Создать», чтобы создать таблицу спрайтов и таблицу стилей. В этой демонстрации используется несколько API-интерфейсов HTML5, и она совместима только с современными браузерами.

Реализация

После зависимостей Stitches требует таблицы стилей, скрипта и элемента HTML для выполнения работы:

Генератор листа спрайтов автоматически создается в элементах с классом стежков:

Если вы выберете, любые изображения, которые являются частью начальной разметки, будут загружены на холст:

Документация

Документация доступна здесь.

Зависимости

jQuery 1.7.1, Modernizr 2.0.6, Bootstrap 2.3.0 Новый

Содействие

Лицензия

MIT

Скачать

Последний выпуск, 1.3.5, доступен здесь.

Вы можете скачать этот проект в любом архиве. или форматы tar.

Вы также можете клонировать проект с помощью Git, запустив:

  $ git clone git: //github. com/draeton/stitches
  

Sprite Fantasia — это продолжение Grand Fantasia Online, предназначенное как для мобильных устройств, так и для ПК.

X-Legend Entertainment только что анонсировала Sprite Fantasia для ПК и мобильных устройств. Это грядущая MMORPG, которая также является продолжением известной Grand Fantasia Online, выпущенной более десяти лет назад.

Об игре

Sprite Fantasia — это MMORPG, которая выйдет как на мобильных устройствах, так и на ПК в конце этого года. Игра представляет собой аниме-MMO с милыми домашними животными и миром, полным сказок. Любой, кто когда-либо играл в Grand Fantasia Online, найдет название и игровой процесс знакомыми, и это потому, что Sprite Fantasia — это римейк классической Grand Fantasia Online.

Подробностей разработчики пока не раскрыли. Например, мы понятия не имеем, как будет работать боевая система в игре.Однако мы знаем, что игроки смогут бродить по карте в самых разных местах, включая горы, реки, озера и поля. А кроме релаксации местные жители назовут вас «хозяином», потому что вы должны помогать «духам» бороться со злом.

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

Когда Sprite Fantasia выйдет во всем мире?

Разработчик не объявил точную дату выпуска Sprite Fantasia, но, судя по странице игры в Steam, игра должна выйти этой осенью.Так. мы можем рассчитывать, что очень скоро мы получим эту игру.

Прямо сейчас Sprite Fantasia доступна для предварительной регистрации. Пользователи Android могут предварительно зарегистрироваться в игре в Google Play, а пользователи iOS могут сделать то же самое на официальном сайте игры.

Все игроки, которые предварительно зарегистрируются в игре, получат 100 драгоценных камней и эксклюзивную карту SSR в качестве награды при запуске игры.

Ищете еще РПГ? Ознакомьтесь с нашим списком 25 лучших ролевых игр для телефонов и планшетов с Android.

Sprite Fantasia в Steam

Об этой игре

Продолжение классической «Grand Fantasia Online», трехмерной приключенческой MMORPG, полной любви и дружбы, с уникальными теплыми и милыми «спрайтовыми» питомцами и веселым сюжетом в фантастическом мире, полном сказок. Начните расслабляющее и веселое путешествие!

[Исследуйте мир фантазий]
Войдите на таинственный и волшебный континент Сафаэль, где повсюду горы, равнины, реки и озера, и приключения больше не скучны.Вы будете путешествовать как посланник спрайтов и вместе вести спрайтов на борьбу с инопланетной цивилизацией.

[Симпатичный спрайт, личная защита]
Спрайт — уникальное волшебное существо на континенте Сафаэль, всегда ласково называющее посланника Спрайтов «хозяином» и всегда везде следует за мастером с его разными личностями, такими как причудливые, высокомерные и оптимистичные. милый внешний вид.

[Стратегическое объединение, экстремальный контроль]
Создайте супер команду Sprite Fantasia, снабдите спрайтов различными картами памяти и используйте различные навыки, чтобы победить врага! Победите босса с помощью тысяч стратегий. Множественные характеристики навыков, такие как мощный урон, восстановление защиты на посланнике, предоставление множества улучшений для преодоления недостатков.

[Остров мечты, индивидуальная жизнь]
Станьте хозяином острова, вы сами решите, как действовать и как устроить его! Полный 3D островной пейзаж. В мастерской вы можете изготавливать различные типы мебели, создавая собственный эксклюзивный остров, но также можете отправлять эльфов на побегушках, собирая или создавая мощное и модное оборудование — все это делается вручную.

[Различные наряды в одной книжной коллекции]
В мире Сафаэля есть много историй, которые понравятся авантюристам. Благодаря системе сражений, квестов, книг и эльфийских островов, записи о постепенном пополнении коллекции будут способствовать непрерывному росту персонажа, и в то же время вы сможете получить более сотни комплектов костюмов!

9 Бесплатный онлайн-генератор спрайтов CSS

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

Несколько дней назад мы сообщаем вам о том, что Google начал ранжирование веб-сайтов на основе скорости, и всем блоггерам и разработчикам веб-сайтов пора оптимизировать наш сайт для максимальной скорости. Один из самых простых способов оптимизации вашего блога WordPress — это использование плагина супер-кеша, плагина ShortPixels WordPress и использование спрайтов CSS.

Зачем нужен онлайн-генератор спрайтов?

Всем, у кого есть сайт, и вы серьезно к нему относитесь; CSS-спрайты будут очень полезны для более быстрой загрузки вашего сайта. Мы уже рассказали, как создавать CSS-спрайты вручную, но все не так хороши в кодировании, и в таких случаях этот онлайн-инструмент для создания CSS-спрайтов будет очень удобен для быстрого создания спрайтов.

Преимущества и недостатки использования CSS Sprites Generator:

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

• Одно большое изображение использует меньшую полосу пропускания по сравнению с несколькими меньшими изображениями.
• Меньше изображений == Меньше HTTP-запросов = более быстрая загрузка в целом

Единственным недостатком использования CSS-спрайтов является то, что они не работают согласованно во всех браузерах, таких как IE и Opera, Chrome и Firefox более близки к стандартам.Хотя, если вас не волнуют устаревшие браузеры IE, вам не о чем сильно беспокоиться. Небольшая настройка CSS может сделать ваш полный код кроссбраузерным.

Полезный список онлайн-генератора спрайтов CSS:

1. CSS-Sprit.es

2. Веб-сайт Performace CSS Sprite Generator
Это лучший из всех Online и Offline CSS Sprite Generator. Он позволяет загружать изображения, игнорировать повторяющиеся изображения, изменять размер изображений, выводить изображения и т. Д.
Data URI Sprites

3.Модуль генератора спрайтов CSS для Drupal

Duris.ru — универсальный инструмент для веб-дизайнеров. Он предлагает несколько функций, таких как сжатие изображений, оптимизация изображений, сжатие или объединение Js, сжатие или объединение CSS.

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

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

css sprites

5. Projekt Fondue CSS Sprite Generator
Этот генератор позволяет игнорировать повторяющиеся изображения, изменять размер исходных изображений, определять горизонтальное и вертикальное смещение, определять цвет фона и прозрачности, назначать префиксы классов CSS и многое другое.
6. Sprite Creator 1.0
Этот инструмент позволяет загружать изображение и создавать код CSS для выбранных областей спрайта.

7. SpriteMe: Генератор спрайтов CSS в один клик

При вызове SpriteMe автоматически определяет потенциальные изображения, которые будут сгруппированы в спрайт, и дает вам возможность одним щелчком создать спрайт с помощью csscoolrunnings.com и повторно вставляет новый спрайт на ваш сайт на лету для тестирования.

8. InstantSprite

9. SpritePad

Все эти веб-генераторы одинаково эффективны с простым в использовании интерфейсом, я рекомендую вам попробовать создавать спрайты для вашего сайта. Если вы его создадите, поделитесь, пожалуйста.

Сообщите нам, какой сайт-генератор спрайтов вы используете для создания спрайтов CSS в Интернете? Вы используете CSS-спрайты на своем веб-сайте для оптимизации скорости вашего блога?

Редакторы листов спрайтов

Большая часть работы любого типа — это поиск подходящего инструмента.Это особенно верно, когда дело касается обработки графики. При поиске редактора таблиц спрайтов вы можете найти множество программ в огромном море, известном как Интернет. Но что, если вы ищете решение, которое не требует загрузки? В последние несколько лет многие веб-решения начали предлагать онлайн-альтернативы своим услугам, и решения для редактирования таблиц спрайтов ничем не отличаются. Ниже приведен список наших любимых онлайн-редакторов таблиц спрайтов, и хотя вы можете работать со многими из них в автономном режиме, вы также можете работать с ними онлайн.

---

Пискель

Piskel — бесплатный онлайн-редактор спрайтов, который многие высоко ценят за функции, которые он рекламирует. Piskel позволяет выполнять предварительный просмотр анимации, экспортировать и импортировать файлы типа Gif, а также галерею, которая отслеживает всю работу, связанную с вашей учетной записью. Piskel также предлагает офлайн-версию программы, доступную для загрузки, чтобы вы могли работать в любое время и в любом месте. Вы можете проверить Piskel на его домашней странице.

http: // www.piskelapp.com/

---

Леший Лабс

Если Piskel идеально подходит для создания спрайтов и листов спрайтов, то Sprite Sheet Tool от Leshy Lab отлично подходит для импорта и разделения изображений всех типов. Инструмент Leshy Sprite Sheet Tool — это инструмент на основе Html5 для создания, упаковки и изменения листов спрайтов и текстур. Кроме того, весь вывод может быть создан для самых разных форматов, включая сценарии XML, JSON, CSS и ImageMagick. Сервис хорошо документирован с множеством видеоуроков на YouTube, а также документацией, и ее можно найти на домашней странице Leshy Labs.

https://www.leshylabs.com/apps/sstool/

---

Текстурный упаковщик

Последняя запись в нашем списке — Texture Packer. Если вам нужен полный набор инструментов для выполнения работы, вам поможет Texture Packer. Более того, Texture Packer значительно сокращает время, необходимое для создания и анимации спрайтов. Texture Packer поставляется в виде загружаемого и имеет бесплатную и премиальную версии, в зависимости от потребностей вашей работы. Фактически, некоторые говорят, что это один из лучших на рынке онлайн-редакторов таблиц спрайтов.Вы можете ознакомиться с Texture Packer здесь.

https://www.codeandweb.com

---

Независимо от того, какой вариант вы выберете из нашего списка, вы найдете решение для создания отличной работы с любым из этих онлайн-редакторов таблиц спрайтов.

Sprite Spider становится одним из самых разрушительных злоумышленников, создающих угрозы от программ-вымогателей

На недавнем саммите SANS Cyber ​​Threat Intelligence Summit два руководителя отдела кибербезопасности CrowdStrike, старший научный сотрудник по безопасности Сергей Франкофф и старший аналитик разведки Эрик Луи, рассказали о новом крупном хакере-вымогателе, которого они называют Sprite Spider. Как и многие другие злоумышленники-вымогатели, банда, стоящая за атаками Sprite Spider, с 2015 года быстро выросла в плане изощренности и наносимого ущерба (исследование CrowdStrike было отражено в длинном отчете подразделения 42 Palo Alto Network в ноябре 2020 года).

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

Sprite Spider evolution

Sprite Spider начал свою работу с банковского трояна Shifu в 2015 году, добавив загрузчик вредоносного ПО под названием Vatet примерно в 2017 году. В 2018 году банда развернула троян для удаленного доступа под названием PyXie. В 2019 году группа расширилась до того, что развернула программу-вымогатель под названием DEFRAY777.

На этом этапе исследователи CrowdStrike связали Shifu, Vatet и PyXie с атаками программ-вымогателей DEFRAY777. Они поняли, что вся активность этих компонентов была привязана к одному злоумышленнику, который пролетал незамеченными.

Как работает программа-вымогатель Sprite Spider

Банда часто может избежать обнаружения в первую очередь потому, что ее код выглядит безобидным и скрывается в проектах с открытым исходным кодом, таких как Notepad ++. Единственное, что Sprite Spider записывает на диск, — это Vatet, что еще больше усложняет отслеживание аналитиков во время реагирования на инциденты.

Несмотря на свою скрытность и множественность компонентов, Sprite Spider демонстрирует некоторые приземленные характеристики. DEFRAY777 — это не изощренная программа-вымогатель, но она выполняет свою работу.Sprite Spider также несколько опоздал с игрой, посвященной сайту утечек, ожидая до конца ноября 2020 года, чтобы запустить собственный сайт для общения с жертвами, через несколько месяцев после того, как другие участники программ-вымогателей начали запускать эти сайты.

Реальная угроза со стороны Sprite Spider обострилась в июле 2020 года, когда он начал нацеливаться на узлы ESXi, которые обычно развертываются крупными организациями, использующими технологию гипервизора без оболочки, разработанную VMware для управления несколькими виртуальными машинами. DEFRAY777, развернутый на хостах ESXi, использует украденные учетные данные для аутентификации в vCenter, который представляет собой веб-интерфейс для управления несколькими устройствами ESXi и веб-сайтами, размещенными на этих устройствах.

После этого злоумышленники входят в систему, включают SSH, меняют ключи SSH или пароли root, завершают запущенные процессы и запускают другие задачи, которые приводят к выполнению двоичного файла в каталоге TMP, шифрованию всех виртуальных машин и их хостов. Вскоре после того, как Sprite Spider начал нацеливаться на хосты ESXi, другая группа угроз под названием Carbon Spider также начала самостоятельно нацеливаться на машины ESXi.

Ориентируясь на машины EXSi, Sprite Spider не нужно развертывать программы-вымогатели во всей организационной среде — им нужно нацеливаться только на несколько серверов, чтобы зашифровать широкий спектр виртуализированной ИТ-инфраструктуры. «Это символизирует более широкую тенденцию в экосистеме электронных преступлений, когда некоторые из крупных противников электронных преступлений в значительной степени переориентировались в своих операциях с банковского мошенничества на целевые операции с программами-вымогателями», — сказал Луи из CrowdStrike.

Заражение товарным вредоносным ПО является предвестником атак программ-вымогателей

Вредоносное ПО, которое изначально использовалось в качестве банковского трояна, превратилось в инструменты начального доступа. «Wizard Spider использует TrickBot в качестве инструмента начального доступа для развертывания программ-вымогателей Ryuk и Conti.Indrik Spider использует Dridex для BitPaymer или WastedLocker, а Carbon Spider использует Sekur / Anunak для REvil или Darkside », — сказал Луи. «Я хочу подчеркнуть для тех из вас, кто напрямую взаимодействует с CISO или топ-менеджером, заражение с помощью так называемых стандартных инструментов, троянов или загрузчиков может привести к серьезным атакам программ-вымогателей. Если у вас проблема с Emotet, скорее всего, у вас возникнет проблема с Trickbot. Если у вас есть проблема с Trickbot, у вас будет проблема с Ryuk или Conti ».

Время имеет существенное значение после обнаружения товарных инструментов.«Если вы не можете обнаружить, отреагировать и исправить ситуацию в течение часа, вы не сможете наверстать упущенное», — сказал Луи. «Итак, вы должны лечить эти потенциально серьезные инфекции, даже если они являются так называемыми стандартными инструментами».

Если у вас есть проблема с Emotet, у вас, вероятно, возникнет проблема с Trickbot. Если у вас есть проблема с Trickbot, у вас будет проблема с Ryuk или Conti.

Цепочка убийств Sprite Spider сравнима с национальными государствами десять лет назад

Цепочка убийств Sprite Spider и некоторых других появляющихся крупных групп вымогателей очень похожа на первые дни того, как действовали субъекты национального государства.«На самом деле это почти идентично той же угрозе цепочки убийств, с которой мы имели дело десять лет назад с продвинутыми постоянными группами угроз», — сказал Франкофф. «Были предприняты те же шаги, но цель в конце другая».

«Я думаю, что мы видели, как несколько национальных государств использовали эти типы атак для получения дохода, особенно Северная Корея», — сказал CSO старший вице-президент CrowdStrike по разведке Адам Мейерс. Он говорит, что Иран и Китай также участвуют в игре с программами-вымогателями.«Атаку не обязательно проводит национальное государство, но [киберпреступники] используют навыки, которым они научились [работая на злоумышленников из национального государства], чтобы заработать немного дополнительных денег на стороне. Лица, нанятые национальным государством, проводят атаки с использованием программ-вымогателей в лунную смену ».

Растущая изощренность программ-вымогателей требует надежной защиты

Как бы то ни было, злоумышленники-вымогатели постоянно становятся все изощреннее и мощнее.«В 2020 году стало ясно, что изощренное и целевое использование программ-вымогателей на определенных вертикалях было обычной практикой для злоумышленников», — сказал CSO Марк Островски, глава отдела разработки программного обеспечения Check Point. «Явным доказательством этого были атаки, нацеленные на здравоохранение и образовательные сети и организации. В 2021 году мы можем ожидать, что это продолжится, и, судя по предварительным отчетам, такие группы, как Sprite Spider и другие, могут специально ориентироваться на интересы с наибольшей отдачей ».

Мейерс из CrowdStrike дает пять рекомендаций, как организациям лучше всего защитить себя от все более разрушительных программ-вымогателей.Во-первых, «нужно подготовиться к защите. Вы должны выполнять базовые операции со ставками за столом, например, исправлять ошибки », — говорит он.

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

В-третьих, чтобы справиться с развивающейся природой программ-вымогателей, используйте защиту нового поколения, поскольку антивирусное программное обеспечение не защищает от таких новых угроз. «В защите нового поколения используется так называемое машинное обучение или искусственный интеллект. «Машинное обучение действительно позволяет определять вредоносные программы или файлы, даже не видя их раньше», — говорит Мейерс.

В-четвертых, важна практика. «Я всегда наставляю совета директоров и руководителей выполнять рутинные серии настольных упражнений».

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

Марк Уэтерфорд, директор по стратегии Национального центра кибербезопасности и бывший сотрудник Департамента кибербезопасности в администрации Обамы, считает, что для борьбы с растущим бедствием программ-вымогателей потребуются международные усилия. «Я думаю, что до тех пор, пока не начнется обсуждение международной политики, мы увидим, как эти вещи будут расти», — говорит он CSO. «Что нам нужно, так это совместные международные усилия стран всего мира, чтобы заявить, что это более неприемлемо».