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.

17,528 thoughts on “JavaScript Image Optimiser (JSIO)”

  2. black jack 21 kako dobiti brezplaДЌne vrtljaje brez depozita best casino games to play casino igre za slovenijo Katera je najboljsa spletna igralnica za igralce iz Slovenije slot game free online casino happy hour free spins bet 365 bonusi

  5. Покупка или продажа жилья в Подмосковье требует безупречной юридической точности и агентство «Гарант Плюс» успешно работающее с 1998 года в Балашихе и Железнодорожном выступает надежным проводником на этом рынке. Изучив актуальную базу проверенных объектов на https://garant-plus.ru/ – клиенты получают полное экспертное сопровождение любых сложных сделок с гарантией безопасности.

  7. Майрхофен купить Molly: MDMA HQ Волосово купить Шишки HQ АК47 Межгорье купить закладку MDPV Купить Кокаин Марихуану Бошки Мефедрон Кораблино купить Ecstasy Rolls Royce Психоделики своими руками Купить Кокаин в Буйнакске

  8. Освоить престижную профессию в индустрии красоты помогает известная московская школа парикмахерского искусства J-Center Studio. Практическая отработка всех техник на моделях начинается буквально с первых дней а подробные программы прикладных курсов колористики и стильных стрижек представлены на https://j-center.ru/ – опытные наставники ставят руку и готовят востребованных мастеров.

  10. Печи Прометалл — выбор тех кто ценит долговечность и реальный жар. Чугунные печи для дома серии Бахта держат тепло часами а печь для бани Атмосфера прогревает парную за 40 минут. Ищете печь чугунная купить? Купить чугунную печь недорого можно на сайте prometall.shop — здесь же дымоходы Феррум и Крафт из нержавейки. Выбрать чугунную печь легко: модель подбирают по объёму помещения за пару минут.

  12. energy casino book of ra casino kranjska gora restaurant ЕЎtetje kart blackjack blackjack online real money Igralnica za pravi denar perla casino slovenia email free slots book of ra are online casino slots rigged

  18. Нюрба купить закладку Метадон HQ Германия Москва Сокольники купить Чистейший Метадон Москва Тропарёво-Никулино купить Марихуана KUSH Купить Кокаин Марихуану Бошки Мефедрон Катайск купить Гашиш Hash Спайс в Могоча Анадырь купить закладку Ecstasy

  21. caesars casino free slot machine games deposit 1 get free spins pontoon vs blackjack book of ra two symbols Igraj v casinu za prave denarje spletni casino na peysafe sol casino bonus code bet365 casino best game to win

  25. Москва Дмитровский купить закладку Триптамины Слюдянка купить Гашиш Hash остров Родос купить закладку Марихуана Widow Купить Кокаин Марихуану Бошки Мефедрон Москва Печатники купить закладку Марихуана Haze Дудинка купить закладку бошки Ипатово купить Марихуана Scout Cookies

  29. book of ra online casino real money green casino online hopa free spins Which online casino has the best no deposit bonus Casino bonusi blackjack po slovensky casino bonus brez depozita 20 € bet365 poker bonus

  30. Компания «Компэл» через портал https://components.ru/ предлагает широкий выбор электронных компонентов от ведущих мировых и российских производителей. Здесь вы найдёте микросхемы датчики разъёмы источники питания и модули для любых задач — от прототипа до серийного производства. Удобный поиск техническая поддержка инженеров актуальные складские остатки и оперативная доставка делают закупку простой и надёжной для профессионалов рынка.

  32. Primary-level math tuition is essential fօr sharpening logical reasoning ɑnd pгoblem-solving abilities
    neеded t᧐ tackle tһｅ increasingly complex ѡord prοblems encountered in upper primary grades.

    Regular secondary math tuition equips students
    tօ overcome persistent challenges — including speed ɑnd accuracy
    under timed conditions, graph analysis, ɑnd multi-step logical reasoning.

    Іn Singapore’s education ѕystem where H2 Mathematics іѕ eitһｅr required
    օr highly advantageous fߋr a wide range ߋf prestigious faculties, math tuition functions аs a forward-thinking educational
    decision tһɑt safeguards and maximises future tertiary ɑnd
    career prospects.

    Ϝor JC students targeting highly sought-ɑfter degree programmes іn Singapore, online math tuition рrovides exam-specific
    methods f᧐r application-heavy pгoblems, often providing the decisive edge Ьetween a pass аnd а higһ distinction.

    Ᏼy commemorating smalⅼ triumphes underway tracking, OMT supports а favorable partnership ԝith math, inspiring students fⲟr exam quality.

    Dive into seⅼf-paced math mastery ѡith OMT’s 12-m᧐nth
    е-learning courses, tօtal ԝith practice worksheets
    ɑnd recorded sessions fߋr thorough modification.

    Singapore’ѕ emphasis օn crucial thinking tһrough mathematics highlights tһe significance of
    math tuition, ᴡhich assists trainees develop tһe analytical skills required by thｅ country’s forward-thinking curriculum.

    Ꮤith PSLE math progressing tο include moге interdisciplinary elements,
    tuition кeeps trainees updated ߋn integrated concerns mixing mathematics ԝith science contexts.

    Secondary math tuition lays а solid groundwork for post-O Level researches, ѕuch aѕ A
    Levels oг polytechnic programs, ƅy succeeding іn foundational topics.

    Junior college math tuition fosters critical thinking skills
    neеded to solve non-routine ρroblems tһat usᥙally appеar in A Level mathematics analyses.

    OMT’ѕ customized mathematics syllabus distinctively sustains
    MOE’ѕ bʏ supplying prolonged insurance coverage оn topics ⅼike algebra, with proprietary
    shortcuts fοr secondary pupils.

    Ꭲһe seⅼf-paced е-learning system from OMT is incredibly flexible
    lor, maкing it ⅼess complicated to manage school аnd
    tuition fоr higher mathematics marks.

    Tuition highlights tіmе management strategies, critical fߋr designating initiatives carefully іn multi-sectіon Singapore math
    exams.

    ᒪoοk at my blog :: secondary 2 exam papers (https://psle-math-tuition-singapore.s3.us-east-005.backblazeb2.com/primary-2-online-math-tuition/tuition-tips/checklist-evaluating-online-math-tuition-for-moe-exam-readiness.html)

  33. Waltzprof — производитель стальных профилей для оконных дверных фасадных и перегородочных конструкций из оцинкованной и нержавеющей стали. Ищете стальной профиль купить? В каталоге на сайте waltzprof.com представлены фасадные системы и профиль с терморазрывом ВП372. Продукция отличается точной геометрией высокой прочностью и долгим сроком службы. Покупателям доступны заводские цены быстрая комплектация заказа и доставка по всей стране.

  35. Иркутская область купить Амфетамин фен Прокопьевск купить Амфетамин фен Купить Хмурь Курган Купить Кокаин Марихуану Бошки Мефедрон Новоульяновск купить закладку Ecstasy: Red Stars 280 mg Владикавказ купить закладку Мефедрон купить закладку Лучший эйфоретик Сахалинская область купить Марки LSD 170мкг

  36. Заклинил замок или пропали ключи — ситуация исправляется в кратчайшие сроки. Профессионалы службы работают по всему Воронежу и области открывая двери любой конструкции без ущерба для замка. Ищете вскрытие замков воронеж левый берег? Оформить срочный вызов можно на сайте вскрытие-замков36.рф буквально в пару кликов. Мастера также поменяют личинку или смонтируют новый надёжный механизм.

  38. Avrin Group с 2017 года переводит и локализует сайты игры приложения документы и видео более чем на 40 языков силами носителей. Ищете перевод фильмов? Оформить заказ и рассчитать стоимость в онлайн-калькуляторе можно на avrin.group/ru за несколько минут. Юридическими медицинскими и экономическими текстами занимаются отраслевые эксперты а игры и интерфейсы дополнительно проверяются лингвистическим тестированием до выпуска.

  39. casino book of ra game no deposit bonus casino 10 euro no deposit casino bonus 10 euro europa casino no deposit bonus codes Ponudba casino bonusov Slovenija migliore casino slovenia pharaoh fortune slot machine free play hopa casino slovenia

  40. Создать безопасную безбарьерную среду и безупречный микроклимат в интерьере помогают современные умные двери. Инновационные выпадающие врезные механизмы на https://smartporog.ru/ эффективно изолируют помещение от сквозняков уличной пыли неприятных запахов и резких шумов при закрытии полотна. Это долговечное отечественное инженерное решение сохраняет эстетику пола и гарантирует ежедневный комфорт.

  42. Петрозаводск купить закладку Чистейший Метадон Картинки амфетамина Полярные Зори купить закладку VHQ GanBang Cocaine 98 Peru Купить Кокаин Марихуану Бошки Мефедрон Болотное купить закладку Триптамины Москва Савёловский купить LSD-25 HQ 170мкг белый курительный порошок

  47. free online blackjack free chip online casino no deposit 100 flamantis casino no deposit free spins blackjack strategy card casinos online slovenia free spins luxury casino online

  48. Голицыно купить закладку MDMA Pills Правдинск купить MDPV Нефтекумск купить Марки LSD 170мкг Купить Кокаин Марихуану Бошки Мефедрон Оха купить LSD 220 mkg Хургада купить закладку Героин РОЗНИЦА 999 VHQ Афганистан Испания купить закладку Гашиш

  50. Бесперебойность промышленных линий требует надежных компонентов и точных инженерных расчетов. С 2003 года компания «ИРИМЭКС» обеспечивает заводы передовой трубопроводной арматурой насосами и компенсаторами. На портале https://www.irimex.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>