Совет: placeholder для картинок или картинки-заглушки

Часто, при разрабтке сайта возникает ситуация, когда при вестке в некоторых частях сайта необходимо вставить картинку. Это могут быть миниаютры товаров, новостей, сами фотки товаров.
В этот момент приходиться отвекаться от самой работы и искать картинку, что-бы вставить в то место.

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

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

1. Благодаря сервису dummyimage.com

Если перевети с английского, это означает примерно «картинка заглушка».

Что позволяет этот сервис?

Указать рамеры, цвет фона и при желании текст надписи и ее цвет.
То есть, мы указываем параметры, и он генерит нам ссмылку типа: ****

http://dummyimage.com/276x136/a8a8a8/463d33.png&text=Нет+изображения

И когда мы вставим ее на сайт в атибут src катинки, у нас там появится катинка с указаными параметрами:


Там мы можем очень быстро и просто заполнить сверстанный сайт картинками, что-бы он выглядел привлекательнее, и не потратив на это много времени.

В чем преимещства этого сериса от конкурентов?
Основное отличие, которое я обнаружил — корректная поддержка кирилицы, то есть руских надписей. Потому, как у похожего сервиса вместа надписей выводятся карукули.

2. Бибилиотека holder.js

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

Принцип практический такой-же, только нет веб интерфейса для созания нужной картинки)
Как использовать?
Загружаем здесь этот скрипт, и в нужном нам месте в теге src картнки указывает пусть к бибилиотеке и размы картиники, которая нам нужна

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

<img src="holder.js/200x300">

Как вы видите тоже очень удобная js библиотека, которая должна быть в запасе любого разработчика)

Надеюсь эта статья поможет Вам сэкономить пару минут времени и расширить свой кругозор.