Я пиарюсь

индекс
146,06

Генерирование изображений-заглушек

Сегодня мне кинули ссылку на прикольный сервис для быстрого генерирования изображений-заглушек. Может пригодиться для html-верстки. На мой взгляд, это удобно тем, кто и так использует заглушки — экономит время при вёрстке, т.к. сами заглушки уже готовы. Можно цвета/размеры подбирать, меняя только числа/буквы в коде, не отвлекаясь на сам файл картинки — и сразу видеть эффект. И сами размеры видеть написанными, если нужно, чтоб к коду не возвращаться для проверки. Или вместо размеров можно текст добавить, чтоб всегда знать, для чего эта заглушка (типа «Бан(н)ер» или там «Лого», или «Фотография»).

На сервисе не нужна регистрация — и вообще на сайт можно не заходить, чтобы его использовать. Пишете сразу у себя в коде, например:
<img src="http://placehold.it/350x50" />
и получаете:


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" />
Результат:


2. Меняем цвет (всегда должен идти после размера, иначе не сработает):
<img src="http://dummyimage.com/150x60/c0c0c0" />
<img src="http://dummyimage.com/150x60/00dd00" />
<img src="http://dummyimage.com/150x60/a6a6ff" />
Результат:


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" />
Результат:


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=Кириллица" />
Результат:


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!" />
Результат:


P.S. Кто может предложить адекватный перевод слова "плейсхолдер"? nooze предложил "заглушку" :)

P.P.S. Авторы сервиса placehold.it (Brent и Russell) пишут там внизу, что сделали его для того, чтобы (как они надеются) сэкономить кому-то немного времени.
+265
10 августа 2010, 05:16
331

комментарии (118)

+22
nooze #
P.S. Кто может предложить адекватный перевод слова «плейсхолдер»?
заглушка?
+1
stansult #
спасибо, сейчас заменю
0
Colwin #
Лучше не «Генерирование заглушек изображений», а «Генерирование изображений-заглушек».
0
stansult #
да? ну давайте попробуем
может, так лучше
–2
icc #
можно еще перевести, как «заполнитель»
+3
zerkms #
нельзя — плейсхолдер это просто маркер, по своей природе. сам он не заполняет ничего и никаких данных не хранит.
0
habraname #
lingvo.yandex.ru/placeholder/%D0%BF%D0%B5%D1%80%D0%B5%D0%B2%D0%BE%D0%B4/

читайте книги! развивайте воображаение! (Ц)из рекламы %onlineshopname%
+1
stansult #
ну я это видел, мне эти варианты не понравились
а заглушка — вполне
+2
xdevel #
Для нашей страны к госслужащему вполне можно применить второй перевод.
К подавляющему числу госслужащих
0
stansult #
(ну, offtopiть так offtopiть :))

мне вообще вначале показалось, что это прикол такой
потом посмотрел — правда
но там немного различаются толкования
сам dictionary.com говорит, что это человек, назначенный на госпост в обмен на услугу/поддержку
а wordnet толкует мягче — что-то типа временного и.о.
+2
SquirrelEx #
«Заниматель места» :)
0
stansult #
да, он и есть :)
но заглушка как-то звучит естественнее — а смысл тот же
+3
rblv #
Мицгол наверное проникся-бы :)
0
TravisBickle #
Столбитель =)
0
stansult #
+2
mishinoleg #
Удобно, спасибо!
+3
stansult #
не за что :)
это мне подсказал коллега (безынвайтный пока)
+1
stansult #
о, инвайт! всем спасибо, пошлю коллеге!
+1
Goodkat #
0
stansult #
он его воспринимает как placehold.it/350x150/0ed
«r» не знаком, и вместо него ставит «0»
0
vmysla #
прикольно что работает placehold.it/350x150/green ))
+1
stansult #
совпадение :)
placehold.it/350x150/00ee0
0
vmysla #
почти совпадение, я специально подбирал))
+2
noonesshadow #
Удобная штука, но сразу мысли что лучше на своем хосте так :)
0
stansult #
я думаю, не должно быть сложно разобраться, как они это сделали
+3
psylostlife #
Тут все примитивно на уровне реализации, но сама идея — очень ценная.
+1
r3s3t #
А я обычно просто использую параметры width и height + background. Пожалуй, попробую твой сервис, интересно.
+3
stansult #
тут, мне кажется, удобство в том, что можно размеры видеть (если нужно),
а также цвета подбирать, меняя числа — и смотреть, как выглядит

p.s. это не мой сервис, я просто разместил… :)
+1
r3s3t #
Ну да, я понял. :)
–22
LightServer #
Это не его матароллер. Он просто разместил объяву. ))
–18
LightServer #
Народ, какие могут быть предъявы? Сервис не его, он просто разместил объяву.
–1
Nc_Soft #
Интересно, как они монетизируются. Рекламу чтоли вставлять будут на бэкграунд? :))
0
lesa80 #
может просто для себя сделали? =)
а монетизируются другими проектами…

хотя конечно можно вставлять рекламу вместо однотонных квадратиков… например каждый 5ый с ip с рекламмой ))
+28
GiBS0N #
Не все в этом мире должно быть монетизировано
0
psylostlife #
only for fun
+2
vasilyyaremchuk #
на главной странице title — «Quick and simple image placeholders»
h1 — "… A quick and simple image placeholder service."

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

а теперь внимательно смотрим на банер внизу главной страницы — реклама фрилансерского сервиса.
Вполне очевидно, что кто-то из фрилансеров может искать «Quick and simple image placeholders», которые часто необходимы в работе, например, верстальщика.
+1
icc #
полезный сервис, спасибо
+22
drfisher #
–49
XuMiX #
Хотите ДОС?:)
Copy Source | Copy HTML
  1. <?php
  2.     for ($i = 1;;$i++) {
  3.         for ($j = 1;;$j++) {
  4.             file("http://placehold.it/$ix$j");
  5.         }
  6.     }
  7. ?>
+16
denver #
— Ну и зараза же ты, родной…
— Он хуже. Он просто кю!
+31
out0f0rder #
Зачем у вас внешний цикл, если внутренний никогда не кончится?
+4
calg0n #
эт чтоб наверняка :)
–10
XuMiX #
ну, чтобы симметрично:)
–19
XuMiX #
блин, точно%) Вот так симметрично:)
Copy Source | Copy HTML
  1. <?php
  2.     for ($i = 1;;$i++) {
  3.         file("http://placehold.it/$ix$i");
  4.     }
  5. ?>
+6
elw00d #
Для того, чтобы сформировать квадрат, не обязательно указывать через MxN, достаточно просто M.
+3
TheMengzor #
Начиная с 1000-й интерации мне станет очень интересно наблюдать за Вашим каналом :)
+2
psylostlife #
placehold.it/3999x3999

Весит 26 килобайт :)
+1
psylostlife #
Кстати, это максимальное разрешение, которое разрешено на этом сервисе.
+1
pomkaster #
+1
alexg #
и все равно работать не будет…
If a dollar sign ($) is encountered, the parser will greedily take as many tokens as possible to form a valid variable name. Enclose the variable name in curly braces to explicitly specify the end of the name.
–1
CyMpak #
Еще и zend не рекомендует использовать закрывающий "?>"
–1
XuMiX #
В данном случае — пофик
+3
Paaashka #
Как много проблем могут найти профессионалы в всего пяти строчках кода. :)
0
XuMiX #
ок, для гурманов:
Copy Source | Copy HTML 
namespace ConsoleApplication1
{
    using System;
    using System.Net;
 
    public static class Program
    {
        public static void Main(string[] args)
        {
            for (int i = 1;; i++)
            {
                var req = WebRequest.Create(string.Format(«placehold.it/{0}x{0}», i));
                req.BeginGetResponse(RespCallback, new object());
                req.Abort();
            }
        }
 
         private static void RespCallback(IAsyncResult asynchronousResult)
         {
             return;
         }
    }
}
 
–9
XuMiX #
господа минусяторы, если вы не вдуплились, я как-бы намекаю создателю сервиса, что надо от такого защититься
0
stansult #
создатели сервиса вряд ли по-русски читают :)
там на странице внизу есть ссылки на их твиттер-аккаунты (Brent и Russell)
добавлю-ка я это в пост
–19
XuMiX #
АААаааАААаа111!!! карма-карма-карма!!!)) Еще минусов еще:))
+2
Golden_Grey #
+1
stansult #
да, забавная :)
+1
Golden_Grey #
Ещё бы поддержку кириллицы — цены б не было…
0
stansult #
вот тут кириллица работает
сейчас в пост добавлю
+1
svetko #
Почему до сих пор никто не сделал российский аналог с поддержкой кириллицы?
0
stansult #
не знаю
может, им предложить, чтоб сделали unicode-поддержку?
+1
nehxby #
Да, если на чем-то понятном написано, не вопрос и самому сделать поддержку. Пусть только сырцы дадут
0
stansult #
там выше дали адрес, где всё есть, и кириллица работает
0
stansult #
то есть ниже :)
+1
nehxby #
да, ниже и я заметил. но т.к. там все работает, то и сорсы ни к чему, так ведь?
0
stansult #
ну, народ найдёт, что поправить :)
вот это, к примеру
+3
Dominic #
Простите за неосведомленность, но что за формат ".lpeg"?
+1
Spavvn #
Опечатка, наверное.
0
stansult #
да, точно :)
а я повёлся
0
stansult #
вот прикол :)
а я решил, что просто незнакомый мне формат — картинка-то проявилась как надо! и в адресе — нормально, «lpeg» этот стоит :)
но дело в том, что по умолчанию там всем даётся формат gif, и картинка в посте на самом деле — просто gif, под названием 99cccc.lpeg.gif :)

сейчас поправлю пост — видимо, у них правда опечатка просто :)
+3
k0rv1n #
Я пользуюсь dummyimage.com/
Внизу страницы, кстати, пачка ссылок на исходники для разных языков, есть даже модуль для друпала.
+4
kuzvac #

Этот удобнее.
0
stansult #
о, здорово!
отличный сервис, ещё один :)
0
stansult #
вы будете смеяться, но автор этого сервиса — тот же Russell Heimlich :)
видимо, допилил немного совместное творение и у себя повесил
+1
kuzvac #
О, точно)
0
stansult #
спасибо большое!

заменил в посте примеры на dummyimage.com
до ката оставил изначальную ссылку, чтоб нагрузка шла на оба сервера :)
+2
vadimus #
Хотите верьте, хотите нет, но этот блинки сгенерирован из заглушек 5×5












Заметно небольшое торможение, когда отображается страница. Все-таки серверу приходится генерировать сотню картинок.
+9
vadimus #
Упс, фокус не удался! Пока был предпросмотр, все было окей, а при загрузке парсер каждую картинку перенес.

Действующая модель.
+1
stansult #
классно!!!
и не лень же :)
+1
vadimus #
Следующий шаг: написание териса на JS!
+2
psylostlife #
Я, пожалуй, поверю.

P.S.
Кстати, интересны мощности их сервиса. Почему-то уверен, что картинки генерятся один раз, а потом просто берется готовый файл и отдается по идентичному запросу. По крайней мере, я бы так и сделал.
+1
vadimus #
Ну да, без кэша не обошлось. Можно либо:
− создавать картинки «физически»,
− кэшировать в MySQL,
− еще как-то.

Специалисты по производительности, расскажите, как сделать лучше?
+2
maxshopen #
Зачем здесь Mysql, да еще с такой нестандартной функцией? Просто на диск класть картинки, а потом проверять — если файл есть — отдаем его, нет — генерим и сохраняем новый. И факультативно заголовки выставляем, чтобы браузер у себя тоже закэшировал
+2
psylostlife #
Конечно физически, в мускуле хранить — извращение.
+1
stansult #
тогда, если народ увлечётся нестандартными текстами, нагрузка у них возрастёт
+2
psylostlife #
М? :)
+1
vadimus #
Да, Блинки прилег отдохнуть!

На самом деле картинка отображается корректно в моих комментариях. Почему-то в посте тег img получил свойство css display:block, или запрет на обтекание.
+1
xn__p2a #
Да это лоховский парсер Хабра в предпросмотре и в своей ленте комментов показывает картинки рядом, а при отображении на странице втыкает между ними перенос и в итоге показывает друг под другом.
+1
vadimus #
В исходном коде переноса нет. Он точно такой же, как на странице комментариев. Так что проблема именно с CSS.
+4
taliban #
Вообще, наш дизайнер пользуется гуглом :) тоже очень удобный сервис, тока вместо текста там картинки полноценные (кликабельно):
Piccy.info - Free Image Hosting
тоже в принципе удобно, и одновременно можно подобрать картинку под тематику сайта а не просто цветные квадраты…
0
stansult #
неплохо, но думаю оба способа найдут поклонников
в это удобно то, что можно в процессе работы быстро менять картинку/цвет, только меняя цифры/буквы
а на готовом макете — ваш способ, наверное, лучше (когда размеры/цвета уже точно подобраны)
+1
saver_ag #
Следует помнить, что у картинки может быть правообладатель.
0
taliban #
1 — для тестирования пофигу
2 — по первой претензии картинка уберется, так как не критичен контент
+2
maxshopen #
Удобная штука. Если кому надо — вот примерная регулярка для разбора урла:

(?ix)
(?:
  (\d+)
  (?:[x](\d+))?
  (?:[/]([a-f0-6]{6})?)?
  (?:[.](jpe?g|gif|png))?
  (?:[&]text=(.+))?
)
+1
maxshopen #
опечатался, вместо [a-f0-6] надо [a-f0-9]
+1
stas_agarkov #
а для чего?
+1
maxshopen #
Ну если захочется у себя локально такой сервис поднять, например. Там делов на полчаса. На денвере например поднять хост img и в коде писать <img src='http://img/200x300' />
+3
printf #
0
stansult #
странно, как у вас кириллица вышла?
когда я ваши символы копирую — выходит
новые пишу — не выходит…

а, или это не «Ё», а латинское Ë? :)
+1
spmbt #


(Дубль для ссылки: ) Да, dummyimage.com поддерживает кириллицу, а этот — нет
Ещё они оба одинаково не поддерживают перенос строки: %0D работает, а %0A нет (вообще обрезает строку).
+2
sa_melnikov #
Идея очень интересная
+6
AVR #
плейсхолдер = местоблюститель
+4
xn__p2a #
Мицгол?
+1
soider #
Местозасталбливатель
0
stansult #
особенно хорошо звукосочетание "лбл" :)
0
stansult #
для прикола — ничё так :)
но для статьи — я б не рискнул
+1
asolntsev #
Классно!
А всё-таки было бы неплохо, если вы упомянули в статье, зачем это надо.
0
stansult #
я там упомянул
Может пригодиться для html-верстки
подробнее, думаю, излишне — исходя хотя бы из «количества пользователей, добавивших пост в избранное» :)
0
asolntsev #
Я не ставлю под сомнение, что это полезно при html-вёрстке.
Просто я, видимо, далёк от этой темы, поэтому не совсем понимаю, как это будет применяться. Чувствую, что полезно, но как конкретно — …

Ну ладно, из-за меня одного не надо напрягаться :)
0
stansult #
я добавлю пару строчек
если у кого есть идеи — пишите, ещё добавим
0
stansult #
добавил
+1
Shugich #
Не люблю подобные заглушки…

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

А так сервис очень даже удобный.
0
stansult #
я думаю, что это больше для себя, пока верстаешь
+1
Shugich #
По сути да (хотя я даже для себя не использую такое)… Был бы я ленив, то пользовался бы с удовольствием.
+1
bolnikh #
Сделал аналог dummyimage у себя на хостинге — dummyimage.ru

пробуйте, критика приветствуется.

Пока просто генерация, без кеширования результатов
0
stansult #
отлично работает имхо

jpg явно отличается, ещё более размытый текст, чем у dummyimage.com :)
мне кажется, это хорошо, чтоб на вид отличалось

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