Конвертер data:image уменьшающий вес изображения - Полезные ресурсы | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 11.12.2016
Главная » Полезные ресурсы » Генераторы изображений


Генераторы изображенийГенераторы CSS & HTML
Генераторы цветаГенераторы онлайн
Поисковые системыКодировщики&Декодеры
Хранилища файловБелые каталоги сайтов
Бесплатные хостингиКаталог сайтов
Полезные страницыОнлайн игры
Сайты с картинкамиВидеохостинги
Заработать на сайте



Адаптивный сайт - aTmpl


Конвертер data:image уменьшающий вес изображения

25.12.2013, 14:34

Увеличиваем скорость загрузки изображений на сайте



Онлайн сервис конвертации изображений в код data:image - base64 для снижения веса изображения и нагрузки на загрузку страниц. Используя данный онлайн сервис Вы сможете оптимизировать код CSS заменив ссылки к изображениям на код вида:
background-image:url(data:image/png;base64,...);
Поддерживаются следующие типы изображений:
.JPG
.PNG
.GIF - Однокадровый
Получив готовый код замените в CSS сайта свойство изображения на код полученный в сервисе.





Порядок конвертации и получение готового кода

Перейдя на страницу сайта нажмите на кнопку "BROWSE", в открывшемся окне укажите файл изображения на компьютере или путь к изображению на сервере. Далее нажмите на кнопку "CONVERT IMAGE".



Вы попадёте на страницу с конвертированным изображением в виде кодов HTML и CSS3. Изображены параметры изображения, само изображение и HTML код для установки в виде тега <img>.



Здесь Вы сможете получить код CSS3 для установки в таблицу стилей сайта, а ниже него отдельно код data:image для прикрепления к элементам отображающим изображение.




Способ установки кода в CSS

Для примера возьмём код из стилей в котором указан сценарий подключения изображения



.soc-rss { background: url(/rss.png);}


Заменим его на код полученный в процессе конвертирования



.soc-rss {
width: 80px;
height: 80px;
background-repeat: no-repeat;
background-image: url(data:image/png;base64,iV.....);
}


Помните, код ASCII может иметь огромное количество значений!!!





  Снимок сайта   
  • Перейти на сайт



  • Русские шрифты





    Переходов: 155 | Добавил: IZOTOP | Рейтинг: 0.0/0

    Комментариев - относящихся к материалу: 0

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]