Вернуться в блог

Генерирование изображений-заглушек в формате SVG. Заглушка-картинка для быстрой верстки

Генерирование изображений-заглушек в формате SVG. Заглушка-картинка для быстрой верстки
Картинка-заглушка

Как принято, для ускорения верстки шаблона проекта, верстальщики часто используют заглушки картинок, но в каком формате и как долго будет загружаться эта страница?
Зачастую для более быстрой загрузки страницы при презентации использую в качестве заглушки-картинки изображения в форматеJPG,WebP. Второй это формат сжатого изображения предложенный компаниейGoogleв 2010 году. Но даже изображение вформатеWebPбудет весить64мб. А изображение 8К в форматеSVGзаймет у вас всего лишь365байт. Соответственно скорость будет моментальная, да и генерировать такие картинки невероятно просто.

Пример создания картинки

К примеру вам нужна заглушка в размере 125х145 px
Эврика. В конечном итоге мы имеем качественнуюSVGзаглушку, которая весит ДО396байт(при разрешении 8К) и будет молниеносно загружаться на ваших сайтах. К тому же если заказчику вдруг захочется изменить размеры в картинке, это сделать проще простого. И не нужно по 1000 раз скачивать кучу ненужный картинок.

Пример кода Html

Html код, для того что бы вставить картинку, будет выглядеть так:
<img src="https://gdr.one/simg/125x145/5094bd/fff?text=Avatar">
 
Разбираем параметры ссылки:
https://gdr.one/simg/ширинаxвысота/цвет фона/цвет текста?text=Сам текст
 
20.01.2022 00:00 1611
  • facebook
  • share
  • close

    Комментарии (0)

    phone_enabled Заказать звонок