Comments 96
супер, больше сказать даже нечего.
Идея не нова
www.google.com/search?q=image+to+html+converter
www.google.com/search?q=image+to+html+converter
Отлично!
Кстати, практическое применение вполне может быть, слишком хорошая и простая идея, чтобы быть бесполезной :)
Кстати, практическое применение вполне может быть, слишком хорошая и простая идея, чтобы быть бесполезной :)
Ну вообще я предполагал что это так, но решил проверить на каком кол-ве divов станет плохо браузеру.
Чтоб картинка была видна с отключёнными изображениями, ещё легче вставить в виде base64 кода в src.
Спасибо за тесты. Моя, более больная идея сделать джаваскрипт редактор изобращений тока что немного обломалась. Будем искать…
Спасибо за тесты. Моя, более больная идея сделать джаваскрипт редактор изобращений тока что немного обломалась. Будем искать…
Из тойже истории, когда было нечего делать, наваял небольшой графический редактор на raphael+js: pihel.jino.ru/canvas/
По сравнению с Гомером Симпсоном (http://www.romancortes.com/blog/homer-css/) как-то слабовато ;)
sciphone n19+android 1.5+opera mini — первый хард ресет за 3 месяца=)))
телефон просто высрал кирпичами — «ЗА ЧТО??»
телефон просто высрал кирпичами — «ЗА ЧТО??»
не новая вещь. друг писал такое вот http://braingears.ru/myfiresoul.html
1) Одинаковые цвета в идущих подряд пикселях нужно объединять в один элемент.
2) Вместо div лучше взять что-то покороче, b или i.
3) Конвертировать нужно не JPG, иначе много шума и первый пункт будет без толку.
4) RGB(255,255,255) длинее, чем #fff.
5) Gzip! Gzip! Gzip!
2) Вместо div лучше взять что-то покороче, b или i.
3) Конвертировать нужно не JPG, иначе много шума и первый пункт будет без толку.
4) RGB(255,255,255) длинее, чем #fff.
5) Gzip! Gzip! Gzip!
> 4) RGB(255,255,255) длинее, чем #fff.
еще рациональнее сделать цсску с каким-нибудь классом
.w{
background: #fff
}
еще рациональнее сделать цсску с каким-нибудь классом
.w{
background: #fff
}
после того как сервер ляжет я думаю все это сделается )))
ЗЫ забавно но ФФ быстрее отрисовал ЭТО на неакктивной вкладе, чем на активной *SCRATCH*
ЗЫ забавно но ФФ быстрее отрисовал ЭТО на неакктивной вкладе, чем на активной *SCRATCH*
Спасибо, я примерно такие же действия думал проделать.
1)Попробую продумать более эффективный алгоритм оптимизации
2)div на i или b — думал об этом, но экономию в 4 символа сначала посчитал незначительной, но практика показала что стоит это применить.
3)Спасибо, об этом не думал.
4)думал, но чтобы получить 6-ти значный hex каждый раз надо вызывать функцию по преобразованию rgb в hex — и я решил сервер пожалеть. Но вообще попробую.
5)Тоже хороший совет, спасибо!
1)Попробую продумать более эффективный алгоритм оптимизации
2)div на i или b — думал об этом, но экономию в 4 символа сначала посчитал незначительной, но практика показала что стоит это применить.
3)Спасибо, об этом не думал.
4)думал, но чтобы получить 6-ти значный hex каждый раз надо вызывать функцию по преобразованию rgb в hex — и я решил сервер пожалеть. Но вообще попробую.
5)Тоже хороший совет, спасибо!
Она у вас каждый раз чтоли генерируется? А кеширование?
Ну пока все вообще допотопно — для чистоты эксперимента, но прочитав все комменты, думаю надо сделать продвинутую версию, на этот раз чтобы не пределы браузеров оценивать, а чтобы получить более менее приемлемый результат по размеру файла и скорости его загрузки.
это видимо нагрузочное тестирование железа )))
Исходный код страницы на FF 3.6 так долго грузился, что я не поленился уйти заваривать чай.
В качестве оптимизации можно тащить с собой base64 от gif (ну или lzw от bmp) а рендерить в div'ы джаваскриптом через DOM, да и много как ещё можно.
А вообще, забавно.
В качестве оптимизации можно тащить с собой base64 от gif (ну или lzw от bmp) а рендерить в div'ы джаваскриптом через DOM, да и много как ещё можно.
А вообще, забавно.
Еще при оптимизации можно использовать цвет бордера.
Даже какой-то спортивный азарт появился — во сколько раз получиться уменьшить код ))
Даже какой-то спортивный азарт появился — во сколько раз получиться уменьшить код ))
еще, как уже писали выше — вынести цсс
плюс к этому использовать разные односимвольные теги (a i b p u)
плюс к этому использовать разные односимвольные теги (a i b p u)
можно вообще отказаться от кодирования цветов через параметр style, прописать палитру в css и использовать классы — так код сократится почти вдвое.
также можно жать хтмл-код gzipом :)
хмм, еще можно подумать об альфа-канале ))
также можно жать хтмл-код gzipом :)
хмм, еще можно подумать об альфа-канале ))
Любой «экстрим» помогает узнать границы технологии.
Я не ожидал, что такой относительно небольшой файл будет так тормозить.
Он notepad'ом++ открывается еле-еле (~816KB). А другой файлик (~9,6MB) просто летает в нем.
Может быть попробовать дивы выводить не в одну строку?
Я не ожидал, что такой относительно небольшой файл будет так тормозить.
Он notepad'ом++ открывается еле-еле (~816KB). А другой файлик (~9,6MB) просто летает в нем.
Может быть попробовать дивы выводить не в одну строку?
Спасибо, вы подвесили мой нетбук на 2 минуты
товарищи!
зато мы теперь все знаем зачем нам нужны 128 ядерные процессоры! )))
зато мы теперь все знаем зачем нам нужны 128 ядерные процессоры! )))
рано или поздно, обычно очень поздно (под утро), такие идеи приходят каждому =) но реализовать не у всех хватает нервов, или просто вовремя задают себе вопрос «Зачем? Лучше спать пойду»
Вашу б энергию, да в мирное русло… :)
Свежая аццкая идея: можно делать на этой основе капчи! :D
Я уже автору в личку это предложил, даже посильную помощь :)
А что автору нужно сделать, так это каждый див на новую строку поставить. Это будет куда легче для редакторов :)
А что автору нужно сделать, так это каждый див на новую строку поставить. Это будет куда легче для редакторов :)
Да ну. Берусь написать за полчаса скрипт, который не основе тех div'ов будет генерить растровую картинку обратно.
Более того, для успешного машинного распознавания капчи цвета не обязательно должны быть такие, как в оригинале. Поэтому можно спокойно забить на то, что часть цветов будет описана в CSS
Более того, для успешного машинного распознавания капчи цвета не обязательно должны быть такие, как в оригинале. Поэтому можно спокойно забить на то, что часть цветов будет описана в CSS
желательно чтобы это был Chrome, он точно справится.У меня, кстати, в хроме открывается намного медленнее, чем в Опере. Еще и глючить при изменении масштаба страницы.
А разве с использованием таблицы работать быстрее не будет?
Firefox 3.6, всё хорошо, но опосля закрытия вкладки сборщик мусора собирает долго.
Перенесите в Я безумный =)
Перенесите в Информационная Безопасность — это же готовый эксплоит для Firefox )
при помощи php и библиотеке GD2
Ммм… Новый способ склонять слова :)
пробегаем по всем его пикселя
Афтар скушал букву
узнаем код цвет
Мощно. Узнаём и код, и цвет. Хотя речь явно про код цвета. Опять букву скушал, афтар очень голодный :)
такойже
наслождаться
Сахар — слОдкий
Афтар в ударе. Желаю чтобы в следующий раз ему приснился словарик :0)
Идея — баян. Даже не оптимизировали код с помощью CSS (то что Вы сделали в атрибуте style каждого div-а я затрудняюсь назвать, но это явно не оптимизация, а ерунда на постном масле)
PS: топику поставил минус, но за полученное мной удовольствие (от разбора текста по винтикам) ставлю в карму плюс. С искренней надеждой не увидеть больше такого на Хабре )))
Ммм… Новый способ склонять слова :)
Афтар скушал букву
Мощно. Узнаём и код, и цвет. Хотя речь явно про код цвета. Опять букву скушал, афтар очень голодный :)
Сахар — слОдкий
Афтар в ударе. Желаю чтобы в следующий раз ему приснился словарик :0)
всегда раздражали люди подобного типа — умники которые пытаются изящно пошутить, но получается натянутая хуита.
PS: я грамотный. Поэтому болезненно реагирую на ошибки и коверканье русского языка. Сам ошибок практически не делаю, зато опечатками страдаю
раз ты такой граммар-наци, че ж ты «автора» коверкаешь?
Это было не коверканье. А тонкий намёк на толстые обстоятельства. Вам не понять
хреново потому что намекаешь может быть?
а то, что щас заявляешь, что публично с издевкой обращался к автору топика, то ты вдвойне мудак.
ты там снизу ответил:
у тебя по ходу совсем все плохо с головой, поэтому претензий к тебе больше не имею
а то, что щас заявляешь, что публично с издевкой обращался к автору топика, то ты вдвойне мудак.
ты там снизу ответил:
А теперь, пожалуйста, огласите мои ошибки. Публично, я разрешаю :))) Заинтриговали, серьёзно
у тебя по ходу совсем все плохо с головой, поэтому претензий к тебе больше не имею
публично с издевкой
Вот только не надо искажать факты, хорошо? Не надо ля-ля
Если бы я издевался, у меня не было бы ни одного смайла и комментарий был бы совсем в другом тоне
у тебя по ходу совсем все плохо с головой
К чему это цитирование? Что тут не так в моей просьбе «огласите мои ошибки»? Мне говорят про МОИ ошибки, я их у себя НЕ замечаю и прошу их огласить
То бишь я хочу узнать свои ошибки, которых не вижу, задаю вопрос — и это нынче называется «совсем плохо с головой»? Обалдеть. Суровые времена
PS: ах да. Минусуйте, минусуйте, я из принципа не буду ставить Вам минус в карму
PPS: если надумаете давать ответный комментарий, не забудьте указать свою дату рождения. Интересно же. Я так вот хоть и «мудак», а не скрываю данную информацию. Вы же вешаете таблички на других, скрывая сведения о себе
PPPS: и тыкать мне тоже не надо, мы с вами на брудершафт не пили. В связи с этим «тыканьем» мне тем более интересно узнать Ваш возраст
Зато я наелся! Жалко, что не вы были моим учителем в школе; столь доходчивые объяснения, я уверен, принесли бы мне куда больше пользы!
Вы бы сначала на свои ошибки обратили внимание, чтобы потом стыдно не было. О таких вещах, к слову, принято писать лично автору.
А теперь, пожалуйста, огласите мои ошибки. Публично, я разрешаю :))) Заинтриговали, серьёзно
(«афтар» не в счёт, я это слово прокомментировал чуть выше)
В личку я пишу, вместо того чтобы предавать опечатки публичной огласке (да-да, поверьте), но не всегда. Данный случай был слишком тяжёлым и поэтому я решился на более болезненную процедуру, предвидя весь поток критики в мой адрес
(«афтар» не в счёт, я это слово прокомментировал чуть выше)
В личку я пишу, вместо того чтобы предавать опечатки публичной огласке (да-да, поверьте), но не всегда. Данный случай был слишком тяжёлым и поэтому я решился на более болезненную процедуру, предвидя весь поток критики в мой адрес
Ну, за примером далеко ходить не надо — www.thematicmedia.ru/
Можно круто сократить, если сделать картинку в виде json массива с цветами в hex, а потом с помощью javascripta выводить.
Какая хорошая капча.
Новый шаг к созданию векторного гипертекстового самизнаетекого? :)
Вообще круто, жаль что сравнительно долго грузиться.
Вообще круто, жаль что сравнительно долго грузиться.
Хм… А если это использовать при оптимизации загрузки страницы сделав в таком виде, к примеру, иконки 16x16px? Меньше запросов к серверу — быстрее грузится страница
Если я правильно посчитал:
минимальный — видимо это наименьший возможный размер кода для одного пикселя, если не рассматривать вариант с объединением в один блок одинаковых цветов, то 17 символов (в UTF) умножим дважды на 16 — получим 4352 байта для одной иконки. При этом, картинка, даже в PNG, весить будет около 450-500 байт.
минимальный — видимо это наименьший возможный размер кода для одного пикселя, если не рассматривать вариант с объединением в один блок одинаковых цветов, то 17 символов (в UTF) умножим дважды на 16 — получим 4352 байта для одной иконки. При этом, картинка, даже в PNG, весить будет около 450-500 байт.
так, HTML съелся. Вот что хотел написать — {р class=«a»}{/р} — видимо это наименьший возможный размер кода
А если оптимизировать как тут предлагали?
-задать класс
-использовать тэги короче
-объединить близлежащие дивы
-цвета перевести в HEX
-задать класс
-использовать тэги короче
-объединить близлежащие дивы
-цвета перевести в HEX
или даже не class, а id
Ну id точно нет, т.к. для иконок 16X16, в рамках одного дизайна, впринципе можно выделить каждый цвет в отдельный однобуквенный класс, и потом использовать повторно. А id — это для каждого пикселя (читай блока) нужен будет свой класс, что повлечет за собой еще css-ину куда большего размера.
Хм… А разве #w {background:#fff;} не имеет место быть?
ну так элемент с ID «w» может быть только один на странице. Поэтому, в лучшем случае, css получиться примерно таким #w1, #w2, #3 {background:#fff;}. А если мы создадим просто класс .w{background:#fff;} и для всех белых пикселей будет указывать его, то это даст большую экономию, если рассматривать итоговый результат.
Пожалуй, да.
А если вернуться к вопросу оптимизации страницы и предположить, что наши иконки имеют, в основном, одну цветовую гамму то тут можно добиться экономии в размерах (не только в запросах на сервер). Такой способ можно использовать наряду с тем, который предлагают на webo.in
Попробовать бы конвертер на примерах…
А если вернуться к вопросу оптимизации страницы и предположить, что наши иконки имеют, в основном, одну цветовую гамму то тут можно добиться экономии в размерах (не только в запросах на сервер). Такой способ можно использовать наряду с тем, который предлагают на webo.in
Попробовать бы конвертер на примерах…
Боже мой! Зачем изобретать уже существующий велосипед?
ru.wikipedia.org/wiki/Data:_URL
webo.in/articles/habrahabr/46-cross-browser-data-url/
p.s. почему то не работают здесь html тэги.
ru.wikipedia.org/wiki/Data:_URL
webo.in/articles/habrahabr/46-cross-browser-data-url/
p.s. почему то не работают здесь html тэги.
Кстати, в тему про капчи, можноли с помощью php генерить анимированный gif? Если можно, тогда надо сделать чтобы символы в капчи появлялись поочередно. Причем скорость появления была различной.
А еще такие картинки должны отображаться даже если в браузере выключен показ изображений
А можно как-то покомпактней такой код сделать? Штука-то хорошая, для использования в качестве подставления ОЧЕНЬ нужной на сайте картинки — может и пригодиться.
Еще можно сделать неплохой тест на скорость ренедеринга. Опера вот показала, даже не подавилась — только картинку построчно несколько секунд прорисовывала (проц Turion 64 X2 1.61Ghz, Win7), исходник вообще не задумываясь вывела даже с огромным JS от AdMuncher. А вот IE8 намертво загрузил систему… Уже 10 минут думает.
Еще можно сделать неплохой тест на скорость ренедеринга. Опера вот показала, даже не подавилась — только картинку построчно несколько секунд прорисовывала (проц Turion 64 X2 1.61Ghz, Win7), исходник вообще не задумываясь вывела даже с огромным JS от AdMuncher. А вот IE8 намертво загрузил систему… Уже 10 минут думает.
почти офтопик — я бы поменял тэг html-вёрска на html-вёрстка
Самое прикольное, что на этой идее можно сделать капчу, которую генерить различными тегами и прогеры задолбаются писать парсары-распознавалки таких капч.
Sign up to leave a comment.
Делаем фотографию только средствами php+css+html