JavaScript Image Optimiser (JSIO)

Posted on by

So, I’ve embarked on a new mini project. It is kind of inspired by image sprites.

Image sprites are a great idea, but come with a whole bunch of issues that make them a bit of a pain to work with.

Firstly, most of the time you have to use markup to create an element in html to “hold” the image you wanted to display from your sprite. This is because if you actually set a sprite as the background image for a large html element you’re likely to see other images in the sprite as well. Because of this, you actually lose useful functionality that CSS gives you, like the ability to position, repeat and scale an image. Also, the markup you’ve created to hold the image exists for style purposes, which is bad.

Secondly, sprites can be a massive ball ache to maintain. If you’ve closely packed your images in a sprite for maximum efficiency and then one of your images needs to change size, you’re either going to have to move ALL images surrounding the image you have to update (and obviously then change all background-position properties for the images you’ve moved) or leave a space and put the updated image in a new position in your sprite.

How do you know which images in a sprite are used and which ones are dead? Since your images are referenced by coordinates, this sort of clean up becomes a nightmare and is actually a bit lot of a nightmare to create image sprites in the first place.

The goals of the project are to

  1. Reduce the number of http requests (and their associated header traffic) to the server and hence reduce the time it takes to load all images on a website and bandwidth footprint the site requires
  2. Create a solution that’ll alleviate some of the problems surrounding the creation and use of image sprites
  3. Do something cool

The JSIO project website has a pretty good explanation of how it works so I won’t bore you with the details here. However, as a brief overview, it packages all your image data in data uri format and you reference particular images by their filename rather than their coordinates.

The site actually uses the HTML5 file api to generate your resources file for you, which makes creating and maintaining your JSIO “sprite” really really easy.

I read *somewhere* that data uri encoded images can be up to 1/3 larger than corresponding image files, however with gzip encoding they can be only 0-3% larger (or less). My thesis is that for a site with many small images, JSIO could be more efficient and easier to maintain than having separate files or even an image sprite.

…I’m yet to prove or disprove this and I’ll be conducting some tests whose results I’ll post up here (even if they do prove JSIO to be useless).

Disclaimer: This is the first ever ALPHA release of JSIO – it works on the latest Firefox and Chrome but I haven’t even checked it in IE yet. It probably won’t work in IE yet. Also, the website needs some work for optimal display on mobile devices.

8,999 thoughts on “JavaScript Image Optimiser (JSIO)”

  1. При выборе квартиры важна не только планировка но и окружение и Vesper Шаболовка предлагает доступ к паркам образовательным учреждениям и культурным объектам столицы: жк шаболовка 31 vesper

  3. slots best uk, new usa gambling sites and new zealand bingo
    how far is colusa casino (Johanna) to play,
    or 100 slots bonus usa

  4. casino chains uk, united kingdom roulette free download and online gambling canada
    banned, or usa only online casinos

    Also visit my page – blackjack for sale leather, Eleanore,

  5. Looking for where to buy crypto? Visit foreck.info for detailed information on the forex, crypto, and stock markets, with in-depth analysis and development prospects. In-depth news analysis keeps you informed and current with the latest happenings. The site also features the best crypto exchanges with professional evaluation parameters, analyzed across eight weighted categories. Discover all the details by visiting the website.

  6. а сюда заглянуть влом ? //legalrc.com/threads/Трипы.588/page-2 мефедрон купить кокаин купить онлайн Я вот перед заказом почитала хуеву кучу отзывов и не нашла ни одного хуевого. Но опять же смотри отзывы были не об эйфоре а о самом магазине. Давай друг советуй что-нибудь в личку

  9. всё отличноровносупер мефедрон купить Из 6 операторов именно оператор этого магазина отвечал быстрее и понятнее всех остальных. Я увидел здесь хорошееграмотное отношение к клиентам сразу видно человек знает свою работу.

  10. australia casino online state united, free pokie games nz
    and free bet offers no deposit (Gordon) online casinos in united kingdom, or united kingdom civil war poker tables

  13. люблю мелких подхалимов мефедрон купить Оперативность 5

  14. Корпоративное питание с доставкой в Алматы для ваших работников – стоимость от 1350 тг. за комплексный обед. https://bvd.kz/ это лучшее корпоративное питание, кейтеринг, доставка. Полная информация о ценах и составе комплексных обедов доступна на веб-сайте. Готовим и привозим комплексные обеды по Алматы с учетом всех ваших пожеланий и требований! Возможна доставка готовых обедов из нашего меню не только в офис, но и на домашний адрес.

  16. casino in british columbia united kingdom, usa pokies online and free bonus no deposit uk slots,
    or casino tax recovery united kingdom

    Also visit my page lost all my money on roulette (Dedra)

  17. Понимающий меня поймёт. мефедрон купить По многочисленным восторженным откликам мн-001 тестировал его и был немного огорчен.

  18. Ну х.з с отправками тут все оперативно2 дня и тебе уже все идет мефедрон купить Брал пару раз все было чотко всем советую

  20. Это фейк что тут вам не понятно то. мефедрон купить ну да как скажут так и делают я уже говорил 11 из 10

  22. Магаз ровный очень много раз тут брал а как перешли на телеграмм так еще больше радуете намного меньше гемора с оплатой стало качество на высоте как и всегда. Сегодня убедился что оператор не сидит без дела очень сильно помог мне с моим вопросом при чем оперативно все сделал. Оцениваю данный магазин 10 из 10. Кокаин даже MQ оказался лучше чем я до этого покупал HQ в другом магазе. Делайте по чаще закладки в центре Питера. мефедрон купить да конспирацию отработали ; стараемся

  23. fast withdrawal casino usa 2021, 2021 online casino new zealand and online casino available how much do you win in russian roulette; Deborah, australia, or canadian poker
    free online game

  25. Ищете тяговый аккумулятор 24 в? Зайдите на сайт elhim-iskra.com.ru и убедитесь, что тяговые аккумуляторы для складской техники всегда есть в наличии. У нас более 2000 аккумуляторов, которые готовы к отправке прямо сейчас. Удобный выбор аккумулятора осуществляется по бренду, требуемой ёмкости или необходимому напряжению. Елхим-Искра — это магазин тяговых аккумуляторов с богатым ассортиментом, где квалифицированные эксперты при необходимости подберут идеальный аккумулятор под ваши задачи, принимая во внимание все технологические особенности используемой техники.

  27. Этот информативный текст сочетает в себе темы здоровья и зависимости. Мы обсудим, как хронические заболевания могут усугубить зависимости и наоборот, как зависимость может влиять на общее состояние здоровья. Читатели получат представление о комплексном подходе к лечению как физического, так и психического состояния.
    Узнайте всю правду – лечение алкогольной зависимости в стационаре

  29. В этой статье мы рассмотрим современные достижения в области медицины, включая инновационные методы лечения и диагностики. Мы обсудим важность профилактики заболеваний и роль технологий в улучшении качества здравоохранения. Читатели узнают о влиянии медицины на повседневную жизнь и ее значение для современного общества.
    Ознакомиться с отчётом – наркологическая клиника в находке

  30. В этой статье рассматриваются различные аспекты избавления от зависимости, включая физические и психологические методы. Мы обсудим поддержку, мотивацию и стратегии, которые помогут в процессе выздоровления. Читатели узнают, как преодолеть трудности и двигаться к новой жизни без зависимости.
    Получить дополнительные сведения – вывод из запоя в Нижнем Новгороде

  32. В двух пакетах мефедрон купить такая же фигня продован сказал что некоторые только начинаю мониториться вообщем спср дерьмово работает

  33. В этом исследовании рассмотрены методы лечения зависимостей и их эффективность. Мы проанализируем различные подходы, используемые в реабилитационных центрах, и представим данные о результативности программ. Читатели получат надежные и научно обоснованные сведения о данной проблеме.
    Получить полную информацию – novokuzneck clinica plus

  35. Этот текст посвящён сложным аспектам зависимости и её влиянию на жизнь человека. Мы обсудим психологические, физические и социальные последствия зависимого поведения, а также важность своевременного обращения за помощью.
    Получить дополнительную информацию – вывод из запоя цена

  36. Публикация знакомит читателей с различными подходами к реабилитации. От традиционных методов до современных программ — вы узнаете, как выбрать оптимальный путь к выздоровлению и преодолеть препятствия на этом пути.
    Раскрыть тему полностью – прокапаться на дому от алкоголя цена

  37. Желаете сократить расходы на покупки в сети — обратитесь к проверенному сервису актуальных скидок и купонов https://padbe.ru/ который собирает актуальные купоны и спецпредложения от ведущих интернет-магазинов. Платформа абсолютно бесплатна, работает с лучшими магазинами электронной коммерции и постоянно обновляет базу эксклюзивных промокодов. Достаточно найти нужный магазин, скопировать купон и получить скидку при оформлении заказа.

  38. видел тут в ветке пару сообщений о том что заказчикам вместо нормального товара какую то муть присылали так вот хотелось бы узнать у владельцев магазина в связи с чем возникают такие накладки и как часто такое случается а то почтой итак заказ долго дожидаться а если ещё подобный косяк выйдет с возвратом то это будет полный п… мефедрон купить Спасибо за продосатавленные вещества

  39. Эта медицинская заметка содержит сжатую информацию о новых находках и методах в области здравоохранения. Мы предлагаем читателям свежие данные о заболеваниях, профилактике и лечении. Наша цель — быстро и доступно донести важную информацию, которая поможет в повседневной жизни и понимании здоровья.
    Как это работает — подробно – прокапать от алкоголя на дому

  42. В этой статье рассматриваются актуальные вопросы, связанные с развитием медицинской науки и её внедрением в повседневную практику. Особое внимание уделено вопросам профилактики, ранней диагностики и использованию технологий для улучшения здоровья человека.
    Изучить рекомендации специалистов – tver clinica plus

  44. ДОБРА ТЕБЕ ЭСКИМОСИК мефедрон купить Не знаю как в этом магазеа вот у всеми так уважаемой Мануфактуры тоже весной всплыло такое гавницо.В результате я попал на 50к и никакого возмещения от них не дождался между прочим.

  45. Компания «Штабстрой» — надёжный подрядчик в сфере ремонта и отделки коммерческих и жилых помещений. Клиенты отмечают профессионализм команды: выезд на замер, прозрачная смета и старт работ уже в течение недели. На сайте https://shtabstroy.ru/ можно ознакомиться с услугами, портфолио и реальными отзывами заказчиков. Компания работает строго по договору, без предоплаты, а все процессы автоматизированы ради быстрых расчётов с клиентами. Персональный подход, помощь в подборе материалов и контроль прораба на объекте — стандарт работы «Штабстроя».

  46. Искали в Варшаве классное место, где готовят на углях, и наткнулись на отличный гриль-бар с сочным шашлыком, хачапури и пиццей. Посетители охотно хвалят и кухню, и сервис — к тому же с парковкой у ресторана всё в порядке. Меню и адрес точки можно посмотреть на сайте https://grillpappa.pl/ , у них там всё подробно расписано Ценителям настоящего мяса на огне и уютной атмосферы однозначно рекомендуем заглянуть лично или воспользоваться доставкой на вечер.

  47. Лаборатория «Сила Света» — научно-практическая организация, специализирующаяся на точных фотометрических измерениях и исследованиях светотехнической продукции. Здесь проводят испытания источников излучения, анализируют параметры светодиодов и полупроводниковых излучающих структур, а также устройств сигнальной и осветительной техники. Подробнее об услугах и возможностях лаборатории — на сайте https://silasveta-lab.ru/, где можно задать вопросы специалистам. Работают с понедельника по пятницу с 10:00 до 20:00.

  48. Visit the YouTube channel https://www.youtube.com/SERGGURU07 – he tells quiet stories that encourage you to slow down and turn your attention inward. If even for a moment while watching you smile softly feel something tirring inside or simply sit in silence and understand then this story is enough. The videos are created using artificial intelligence tools and the creators imagination. These are fictional works and have no connection to historical fact.

  49. Мечтаете получить востребованную специальность и практиковаться на настоящих клиентах? Школа-студия парикмахеров приглашает на курсы для начинающих и практикующих мастеров. Ищете обучение парикмахеров? К практике на клиентах вы приступаете уже после трёхдневной теории — обучают на сайте j-center.ru дипломированные специалисты. В программе мужские, женские и детские стрижки, свадебные укладки, плетение кос, химическая завивка и углублённая колористика с нуля.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>