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

    Сегодня мне кинули ссылку на прикольный сервис для быстрого генерирования изображений-заглушек. Может пригодиться для 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) пишут там внизу, что сделали его для того, чтобы (как они надеются) сэкономить кому-то немного времени.
    AdBlock похитил этот баннер, но баннеры не зубы — отрастут

    Подробнее
    Реклама

    Комментарии 119

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

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

                    мне вообще вначале показалось, что это прикол такой
                    потом посмотрел — правда
                    но там немного различаются толкования
                    сам dictionary.com говорит, что это человек, назначенный на госпост в обмен на услугу/поддержку
                    а wordnet толкует мягче — что-то типа временного и.о.
            +2
            «Заниматель места» :)
              0
              да, он и есть :)
              но заглушка как-то звучит естественнее — а смысл тот же
                +3
                Мицгол наверное проникся-бы :)
                0
                Столбитель =)
            • НЛО прилетело и опубликовало эту надпись здесь
                +3
                не за что :)
                это мне подсказал коллега (безынвайтный пока)
                  +1
                  о, инвайт! всем спасибо, пошлю коллеге!
              +2
              Удобная штука, но сразу мысли что лучше на своем хосте так :)
                0
                я думаю, не должно быть сложно разобраться, как они это сделали
                  +3
                  Тут все примитивно на уровне реализации, но сама идея — очень ценная.
                +1
                А я обычно просто использую параметры width и height + background. Пожалуй, попробую твой сервис, интересно.
                  +3
                  тут, мне кажется, удобство в том, что можно размеры видеть (если нужно),
                  а также цвета подбирать, меняя числа — и смотреть, как выглядит

                  p.s. это не мой сервис, я просто разместил… :)
                    +1
                    Ну да, я понял. :)
                      –22
                      Это не его матароллер. Он просто разместил объяву. ))
                        –18
                        Народ, какие могут быть предъявы? Сервис не его, он просто разместил объяву.
                    –1
                    Интересно, как они монетизируются. Рекламу чтоли вставлять будут на бэкграунд? :))
                    • НЛО прилетело и опубликовало эту надпись здесь
                        +28
                        Не все в этом мире должно быть монетизировано
                          0
                          only for fun
                            +2
                            на главной странице title — «Quick and simple image placeholders»
                            h1 — "… A quick and simple image placeholder service."

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

                            а теперь внимательно смотрим на банер внизу главной страницы — реклама фрилансерского сервиса.
                            Вполне очевидно, что кто-то из фрилансеров может искать «Quick and simple image placeholders», которые часто необходимы в работе, например, верстальщика.
                            +1
                            полезный сервис, спасибо
                              +22
                                –49
                                Хотите ДОС?:)
                                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
                                  — Ну и зараза же ты, родной…
                                  — Он хуже. Он просто кю!
                                    +31
                                    Зачем у вас внешний цикл, если внутренний никогда не кончится?
                                      +4
                                      эт чтоб наверняка :)
                                        –10
                                        ну, чтобы симметрично:)
                                        –19
                                        блин, точно%) Вот так симметрично:)
                                        Copy Source | Copy HTML
                                        1. <?php
                                        2.     for ($i = 1;;$i++) {
                                        3.         file("http://placehold.it/$ix$i");
                                        4.     }
                                        5. ?>
                                          +6
                                          Для того, чтобы сформировать квадрат, не обязательно указывать через MxN, достаточно просто M.
                                            +3
                                            Начиная с 1000-й интерации мне станет очень интересно наблюдать за Вашим каналом :)
                                            +1
                                            и все равно работать не будет…
                                            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
                                                В данном случае — пофик
                                                +3
                                                Как много проблем могут найти профессионалы в всего пяти строчках кода. :)
                                                  0
                                                  ок, для гурманов:
                                                  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
                                              господа минусяторы, если вы не вдуплились, я как-бы намекаю создателю сервиса, что надо от такого защититься
                                                0
                                                создатели сервиса вряд ли по-русски читают :)
                                                там на странице внизу есть ссылки на их твиттер-аккаунты (Brent и Russell)
                                                добавлю-ка я это в пост
                                                –19
                                                АААаааАААаа111!!! карма-карма-карма!!!)) Еще минусов еще:))
                                                +2
                                                  +1
                                                  да, забавная :)
                                                    +1
                                                    Ещё бы поддержку кириллицы — цены б не было…
                                                      0
                                                      вот тут кириллица работает
                                                      сейчас в пост добавлю
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                    0
                                                    не знаю
                                                    может, им предложить, чтоб сделали unicode-поддержку?
                                                      +1
                                                      Да, если на чем-то понятном написано, не вопрос и самому сделать поддержку. Пусть только сырцы дадут
                                                        0
                                                        там выше дали адрес, где всё есть, и кириллица работает
                                                          0
                                                          то есть ниже :)
                                                            +1
                                                            да, ниже и я заметил. но т.к. там все работает, то и сорсы ни к чему, так ведь?
                                                              0
                                                              ну, народ найдёт, что поправить :)
                                                              вот это, к примеру
                                                      +3
                                                      Простите за неосведомленность, но что за формат ".lpeg"?
                                                        +1
                                                        Опечатка, наверное.
                                                          0
                                                          да, точно :)
                                                          а я повёлся
                                                          0
                                                          вот прикол :)
                                                          а я решил, что просто незнакомый мне формат — картинка-то проявилась как надо! и в адресе — нормально, «lpeg» этот стоит :)
                                                          но дело в том, что по умолчанию там всем даётся формат gif, и картинка в посте на самом деле — просто gif, под названием 99cccc.lpeg.gif :)

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

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

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












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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

                                                                                                    Самое читаемое