Сегодня мне кинули ссылку на прикольный сервис для быстрого генерирования изображений-заглушек. Может пригодиться для html-верстки. На мой взгляд, это удобно тем, кто и так использует заглушки — экономит время при вёрстке, т.к. сами заглушки уже готовы. Можно цвета/размеры подбирать, меняя только числа/буквы в коде, не отвлекаясь на сам файл картинки — и сразу видеть эффект. И сами размеры видеть написанными, если нужно, чтоб к коду не возвращаться для проверки. Или вместо размеров можно текст добавить, чтоб всегда знать, для чего эта заглушка (типа «Бан(н)ер» или там «Лого», или «Фотография»).
На сервисе не нужна регистрация — и вообще на сайт можно не заходить, чтобы его использовать. Пишете сразу у себя в коде, например:
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/ee8/795/c7b/ee8795c7bbb41484941368bf23f0ed28.png)
Update. Благодаря усилиям k0rv1n, найден вариант этого сервиса, только лучше :)
Во-первых, там поддерживается кириллица. Во-вторых, там даны ссылки на исходники для разных языков.
Автор dummyimage.com — тот же Russell Heimlich, что и у placehold.it. У placehold.it есть ещё один автор, но будем считать, что он делал дизайн (дизайн там правда круче, но видимо как раз из-за понтового шрифта Unicode и не выходил).
Примеры (см. под хабракатом) я поменял с placehold.it на dummyimage.com, раз уж он функциональнее…
Итак, примеры:
1. Для квадратной заглушки достаточно одного числа:
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/195/fee/0c6/195fee0c65de3fec5ccfc2e753de628e.png)
2. Меняем цвет (всегда должен идти после размера, иначе не сработает):
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/b75/7f1/067/b757f1067b9b4c1fa929f5f0e3334c31.png)
3. Меняем формат (добавляем расширение к любой части url-а; поддерживается 3 формата — gif, jpg/jpeg, png):
![](https://habrastorage.org/r/w1560/getpro/habr/post_images/036/0cd/81b/0360cd81bc3fa08bfeb0e3b8d0ee1f77.png)
4. Добавляем текст (вместо пробела — плюс):
![](https://habrastorage.org/getpro/habr/post_images/036/0cd/81b/0360cd81bc3fa08bfeb0e3b8d0ee1f77.png&text=Кириллица)
5. Меняем цвет текста (он идёт после цвета самой заглушки):
![](https://habrastorage.org/getpro/habr/post_images/036/0cd/81b/0360cd81bc3fa08bfeb0e3b8d0ee1f77.png/aa00aa&text=The+image!)
P.S.Кто может предложить адекватный перевод слова "плейсхолдер"? nooze предложил "заглушку" :)
P.P.S. Авторы сервиса placehold.it (Brent и Russell) пишут там внизу, что сделали его для того, чтобы (как они надеются) сэкономить кому-то немного времени.
На сервисе не нужна регистрация — и вообще на сайт можно не заходить, чтобы его использовать. Пишете сразу у себя в коде, например:
<img src="http://placehold.it/350x50" />и получаете:
![](https://habrastorage.org/getpro/habr/post_images/ee8/795/c7b/ee8795c7bbb41484941368bf23f0ed28.png)
Update. Благодаря усилиям k0rv1n, найден вариант этого сервиса, только лучше :)
Во-первых, там поддерживается кириллица. Во-вторых, там даны ссылки на исходники для разных языков.
Автор dummyimage.com — тот же Russell Heimlich, что и у placehold.it. У placehold.it есть ещё один автор, но будем считать, что он делал дизайн (дизайн там правда круче, но видимо как раз из-за понтового шрифта Unicode и не выходил).
Примеры (см. под хабракатом) я поменял с placehold.it на dummyimage.com, раз уж он функциональнее…
Итак, примеры:
1. Для квадратной заглушки достаточно одного числа:
<img src="http://dummyimage.com/120" />Результат:
<img src="http://dummyimage.com/100" />
<img src="http://dummyimage.com/80" />
![](https://habrastorage.org/getpro/habr/post_images/5d1/0f1/6d5/5d10f16d5d6b6341d8e9237a28b67527.png)
![](https://habrastorage.org/getpro/habr/post_images/6ed/d94/57e/6edd9457ec4ef14fd413377a3cfb0fb4.png)
![](https://habrastorage.org/getpro/habr/post_images/195/fee/0c6/195fee0c65de3fec5ccfc2e753de628e.png)
2. Меняем цвет (всегда должен идти после размера, иначе не сработает):
<img src="http://dummyimage.com/150x60/c0c0c0" />Результат:
<img src="http://dummyimage.com/150x60/00dd00" />
<img src="http://dummyimage.com/150x60/a6a6ff" />
![](https://habrastorage.org/getpro/habr/post_images/88b/687/c59/88b687c592656df9b2d26fd810354800.png)
![](https://habrastorage.org/getpro/habr/post_images/7c0/bd5/ab1/7c0bd5ab17976e31ec303ba0186970fd.png)
![](https://habrastorage.org/getpro/habr/post_images/b75/7f1/067/b757f1067b9b4c1fa929f5f0e3334c31.png)
3. Меняем формат (добавляем расширение к любой части url-а; поддерживается 3 формата — gif, jpg/jpeg, png):
<img src="http://dummyimage.com/150x60/99cccc.gif" />Результат:
<img src="http://dummyimage.com/150x60.jpg/99cccc" />
<img src="http://dummyimage.com/150x60/99cccc.jpeg" />
<img src="http://dummyimage.com/150x60.png/99cccc" />
![](https://habrastorage.org/getpro/habr/post_images/e4a/9c4/54d/e4a9c454d13f80d5661627fc96510627.gif)
![](https://habrastorage.org/getpro/habr/post_images/fa7/120/05d/fa712005d8973c8a65110a148b98e79b.jpg)
![](https://habrastorage.org/getpro/habr/post_images/fa7/120/05d/fa712005d8973c8a65110a148b98e79b.jpg)
![](https://habrastorage.org/getpro/habr/post_images/036/0cd/81b/0360cd81bc3fa08bfeb0e3b8d0ee1f77.png)
4. Добавляем текст (вместо пробела — плюс):
<img src="http://dummyimage.com/150x60/99cccc.gif&text=The+image!" />Результат:
<img src="http://dummyimage.com/150x60/99cccc.jpg&text=The+image!" />
<img src="http://dummyimage.com/150x60.png/99cccc&text=The+image!" />
<img src="http://dummyimage.com/150x60.png/99cccc&text=Кириллица" />
![](https://habrastorage.org/getpro/habr/post_images/e4a/9c4/54d/e4a9c454d13f80d5661627fc96510627.gif&text=The+image!)
![](https://habrastorage.org/getpro/habr/post_images/93f/d79/eed/93fd79eedfe5c55f02dff64455784de2.jpg)
![](https://habrastorage.org/getpro/habr/post_images/036/0cd/81b/0360cd81bc3fa08bfeb0e3b8d0ee1f77.png&text=The+image!)
![](https://habrastorage.org/getpro/habr/post_images/036/0cd/81b/0360cd81bc3fa08bfeb0e3b8d0ee1f77.png&text=Кириллица)
5. Меняем цвет текста (он идёт после цвета самой заглушки):
<img src="http://dummyimage.com/150x60/99cccc/ffffff.gif&text=The+image!" />Результат:
<img src="http://dummyimage.com/150x60/99cccc.jpg/0b0b0b&text=The+image!" />
<img src="http://dummyimage.com/150x60.png/99cccc/aa00aa&text=The+image!" />
![](https://habrastorage.org/getpro/habr/post_images/dee/02b/0b7/dee02b0b7250947a65fe53732e3e147e.gif)
![](https://habrastorage.org/getpro/habr/post_images/738/3d5/eb8/7383d5eb84ec1a50a1a85dbbafa16f35.jpg)
![](https://habrastorage.org/getpro/habr/post_images/036/0cd/81b/0360cd81bc3fa08bfeb0e3b8d0ee1f77.png/aa00aa&text=The+image!)
P.S.
P.P.S. Авторы сервиса placehold.it (Brent и Russell) пишут там внизу, что сделали его для того, чтобы (как они надеются) сэкономить кому-то немного времени.