Рубрика «img»

image

tl;dr

  • GIF — это круто, но в плане качества и производительности они ужасны.
  • Замена GIF на video хорошая идея, но есть недостатки: они не подгружаются предварительно, используют range запросы.
  • Сегодня вы можете использовать img src =".mp4" в Safari Technology Preview.
  • Предварительные результаты показывают, что mp4s в тегах отображаются в 20 раз быстрее и декодируются в 7 раз быстрее, чем GIF-эквивалент — в дополнение к тому, что размер файла равен 1/14!
  • Фоновые CSS-видео и адаптивные видео теперь могут быть «вещью».
  • Наконец, синемаграфы будут без недостатков GIF.
  • Теперь мы ждем, когда другие браузеры пойдут следом: этот пост весит — 46 МБ на Chrome, и всего 2 МБ в Safari TP.

Особая благодарность: Эрику Портису, Джеку Ноблу, Джону Дэвису, Дорону Шерману и Йоаву Вайсу.
Читать полностью »

image

NCSA Mosaic был одним из первых кросплатформенных браузеров на рынке. Встретили его с огромным благоговением. Всего за несколько месяцев после выхода летом 1993 года Mosaic изменил представление не только о браузерах, но и о WWW в целом. Гэри Вулф писал в Wired, что Mosaic «производил сильное впечатление не информации, а личности».

Mosaic сделал веб более приспособленным для сотен тысяч людей, впервые выходящих в онлайн. Конечно, Mosaic было легко установить на любой операционке. Он был чрезвычайно прост в использовании. Но большую роль в этих изменениях наверняка сыграл тег IMG.

Конечно, за несколько месяцев до его выхода никто не знал, насколько браузер станет популярным. Mosaic был разработан в Национальном центре суперкомпьютерных приложений [National Center for Supercomputing Applications, NCSA] в Иллинойском университете в Урбана-Шампейн. Разработкой руководил упорный Майк Андриссен, в ту пору ещё бывший студентом, вместе с сотрудником NCSA Эриком Бина. Андриссен интересовался вебом с тех пор, как за два года до этого впервые познакомился с ним.
Читать полностью »

Однажды автор этого поста работал над одним заказом по разработке простенько сайта и тогда появилась идея — придать всем страницам некой уникальности и запоминаемости — использовать уникальные фоновые текстуры или элементы дизайна (активно использовался parallax-scrolling). Так как в тот момент дедлайн был довольно близок, а идея — в зачаточном состоянии, было реализовано намного проще — простыми заготовками, но идея выброшена не была.

Спустя некоторое время случайно наткнулся на мертвую ссылку, которая вела на несуществующий Tumblr-блог, и страница ошибки сразу привлекла внимание. Обновив страничку фоновое изображение (в виде gif-анимации) сменилось — внимание ещё более усилилось. Почитав исходники стало понятно что все изображения «прописаны» статично, но это натолкнуло на другую идею, о которой вы узнаете под катом.

Псевдо случайное изображение (на примере страницы 404 й ошибки)

Читать полностью »

Всем привет! Сегодня задача у нас следующая: необходимо создать интерфейс для загрузки картинок, который бы генерировал перед загрузкой превьюшки небольшого формата. На данный момент HTML5 вовсю шествует по планете, и, казалось бы, как это реализовать должно быть предельно ясно. Есть несколько русскоязычных статей на эту тему (вот, например). Но тут есть одно но. В рассматриваемом там подходе не уделено никакого внимания расходу памяти браузером. А расход может доходить до гигантских размеров. Разумеется, если загружать одновременно не более 5-10 картинок небольшого формата, то все остается в пределах нормы; но наш интерфейс должен позволять загружать сразу много изображений формата не меньше, чем у современных фотоаппаратов-мыльниц. И вот тогда-то свободная память начинает таять на глазах.

Читать полностью »

Большинство многопосещаемых площадок позволяют размещать у себя картинки с внешних ресурсов. Это очень удобная и полезная фича не только для простых пользователей, но и для людей, собирающих информацию о вас.

Большой брат следит за тобой

Вы хотите узнать больше информации о самых действенных методах? Вам интересно, как с помощью маленькой картинки определить разрешение экрана, локальное время и сменить парочку паролей? Добро пожаловать под кат!Читать полностью »

Свободный движок WebKit теперь поддерживает srcset атрибут изображений, IMG элементов (официальная спецификация от W3C). Это позволяет вам, как разработчику, использовать картинки с высоким разрешением для пользователей использующих ретина-дисплей без ущерба для остальных пользователей. Также важно отметить о наличие изящного решения для браузеров, которые еще не поддерживают данный функционал.

Обратите внимание, в необходимости использовать последние ночные сборки WebKit.

imageЧитать полностью »

Рисуем логотип
20-летнему юбилею тега IMG посвящается

25 февраля 1993 года Марк Андрессен (Marc Andreessen) написал:
Предлагаю новый опциональный HTML-тег: IMG
При нем должен обязательно указываться аргумент SRC=«url».
Тег отсылает к файлу растрового изображения (bitmap или pixmap). Браузер будет запрашивать этот файл в Сети, распознавать как изображение и вставлять в текст сообразно месту тега в коде страницы .

Допустим, вы нарисовали в Corel Draw! логотип компании и собираетесь разместить его на сайте не как-нибудь, а формате HTML5. И, соответственно, размещать картинку не в растровом формате, а в .SVG

Зачем мне картинка в SVG?

Что это дает, понятно – при любом масштабировании на планшете или любом другом гаджете мы имеем идеально точно отрисованную картинку, насколько детализированной она бы ни была.
Читать полностью »

Ни для кого не секрет, что TextView в Android поддерживает HTML-теги. Среди них поддерживается и тег , а для его обработки используется класс ImageGetter. И если с отображением локальных графических файлов никаких проблем не возникает, то при попытке программно подгрузить удаленный рисунок в TextView мы получаем NetworkOnMainThreadException на Android версии 3.0 и выше. Как выяснилось, в поисковиках информации для решения этой проблемы находится мало, да и далеко не все из предлагаемых решений работоспособны. Тем не менее, рабочее решение существует.Читать полностью »

Помощник для Демо-контента

Многие веб студии, занимающиеся разработкой сайтов испытывают трудности во время демонстрационного показа продукта, а именно, когда необходимо показать готовый сайт содержащий демо-контент. Тут приходится всячески крутится и выискивать множество изображений, подгонять их под нужные размеры, а в некоторых случаях и придерживаться одной цветовой гаммой.
Тут на помощь выходит online сервис Cambelt (в переводе на русский — ремень ГРМ), который для Вашего проекта на лету сгененрирует необходимые вам картинки.

image

Нужно лишь указать в качестве источника изоюражения адрес URL (например, cambelt.co/468x60) с указанием нужного размера. Также можно использовать текст для формирования надписи и разные цвета.
Читать полностью »