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,154 thoughts on “JavaScript Image Optimiser (JSIO)”

  2. casino kranjska gora besplatne casino igre joker slot Bonus brez depozita 2026 online casino for slovenia casino online besplatno 365 online casino casino bled hotel

  3. book of ra games house of fun free spins free poker bankroll besplatne casino igre rulet Kje igrati casino slot igre za pravi denar online austrian casino mobile casino free spins casino bonus money

  4. Грамотное обслуживание современного автомобиля требует бескомпромиссного качества деталей и профессионального подхода к их поиску. Специализированный онлайн-магазин https://mobizap.ru/ предоставляет автовладельцам обширный каталог оригинальных запчастей надежных аналогов моторных масел и расходников. Удобная система подбора по VIN-коду выгодные цены и оперативная доставка гарантируют уверенность в каждой поездке.

  9. bet365 it bonus william hill online casino Seznam bonusov brez depozita casino online where can i pay with paypal 1€ casino bonus online casino slots live streaming buffet mania slot machine free games

  10. Planning an unforgettable road journey across North America requires dependable geographic tools and https://pacific-map.com/ delivers precisely that with its rich repository of free high-resolution road and topographical maps. From picturesque Pacific coastal routes to vibrant US cities and national parks every thoughtful traveler easily gains reliable comprehensive cartographic insight.

  11. Kaiser воплощает немецкую инженерию в быту: встраиваемые духовки варочные панели вытяжки и холодильники с узнаваемым ретро-дизайном и аккуратной сборкой. Ищете смеситель для кухни kaiser? Полный каталог с описаниями моделей и характеристиками собран на kaiser-russia.su — здесь легко подобрать комплект в едином стиле. Производитель даёт гарантию а сервисная поддержка работает по всей стране.

  12. Ищете вскрытие замков? Посетите spb-open24.ru – работаем в Санкт-Петербурге и Ленинградской области аккуратно и без повреждений а мастер приезжает очень быстро. Хотите вызвать специалиста – просто позвоните по телефону размещённому на сайте. Посмотрите список замков с которыми мы имеем дело и стоимость их вскрытия. Платить нужно только тогда когда работа полностью выполнена.

  13. Техника Miele славится надёжностью но со временем требует профессиональной диагностики и качественного сервиса. Ищете miele waschmaschine storung waterproof? Сервисный центр miele-servise.ru устраняет неисправности стиральных машин и холодильников быстро и с гарантией. Мастера используют только оригинальные запчасти и восстанавливают заводское качество техники надолго.

  14. casino online multipla chiuse casino min deposit 5 € blackjack not real money free slot machines to play for fun Hell Spin casino pregled casino cezar cash game vrhunske kazino igre book of ra deluxe 10 demo

  17. spletni casino za pravi denar slovenija bet365 app android https://zooactive.si sweet bonanza live casino new casino bonus pravila za blackjack Does Casinobit IO have a no deposit bonus

  18. Бошки в Сергиеве Посад-7 Емва купить закладку VHQ Cocaine 98 Colombia Новоржев купить Molly: MDMA HQ Купить Кокаин Мефедрон Марихуану МДМА Бабушкин купить закладку Лирика 300мг Прегабалин Закладки спбе Париж купить закладку DMT

  19. secrets of the phoenix free spins kazino igre book of ra blackjack pragmatic play free poker video Spletna igralnica online unibet live casino konami free slots g2a pay online casino

  21. casino igre kleopatra free casino slot games download https://makingart4point0.com best online casino free play boogie bet casino no deposit bonus gunsbet casino free spins promo code zodiac casino free bonus

  22. Сервис «Железнодорожная Логистика» помогает быстро рассчитать маршрут и стоимость доставки грузов по железнодорожной сети РЖД. Здесь собрана актуальная информация о тарифах станциях и планировании отправок. Оформить доступ и получить точные расчёты можно на сайте https://gdlog.ru/ — всё прозрачно и понятно. Инструмент сокращает временные затраты сотрудников и позволяет строить логистику без просчётов.

  23. reputable online casinos casino admiral kozina slowenien bitcoin live casino live casino gratuit Spletni casino casino igre slotovi casino bonus brez depozita 10 euro casino calzone no deposit bonus

  24. Кейс батл CS 2 на CASEWAY — это динамичная схватка за скины между реальными соперниками. Участники открывают одинаковые кейсы а весь выигрыш забирает сильнейший. Ищете батл кейсов на caseway? Создайте свой батл или присоединяйтесь к чужому на caseway.net/case-battle/cs2 за пару кликов. Форматы 1v1 2v2 и 3v3 позволяют биться одному или в команде — до шести игроков в одном батле.

  26. Geo-Power выполняет проектирование и установку тепловых насосов на объектах любого типа: от частных домов до офисов и коммерческих зданий. Инженеры компании подбирают технику исходя из площади и бюджета монтируют её под ключ и берут систему на обслуживание после запуска. Ищете принцип работы геотермального отопления? Подробные условия и расчёт стоимости доступны на сайте geo-power.ru. Отзывы клиентов подтверждают точность сроков и грамотные консультации на каждом этапе работ.

  27. casino bonus 500 poker free bonus registration https://queen-b.si the best online casino blackjack vs 21 best online casino in world casino withdrawal paysafecard online

  28. Interdisciplinary ⅼinks in OMT’s lessons
    ѕh᧐w mathematics’ѕ flexibility, stimulating inquisitiveness аnd inspiration fⲟr exam achievements.

    Unlock ｙouг child’s fսll potential in mathematics ѡith OMT Math Tuition’ѕ expert-led classes, customized tо
    Singapore’ѕ MOE curriculum foｒ primary school, secondary,
    аnd JC trainees.

    Singapore’ѕ woｒld-renowned mathematics curriculum emphasizes conceptual understanding օveг simple computation, making math tuition crucial fоr trainees
    tо understand deep ideas ɑnd stand out іn national examinations lіke PSLE аnd O-Levels.

    Tuition іn primary mathematics іs essential for PSLE
    preparation, аs it presents sophisticated strategies fоr managing
    non-routine issues tһat stump ⅼots ⲟf prospects.

    Building confidence viia constant tuition assistance іs crucial, as Օ Levels can Ƅe difficult, and positive students execute fɑr better undeｒ pressure.

    Tuition оffers strategies fⲟr time management ⅾuring tһe lengthy А Level math exams,
    permitting students tо allot efforts ѕuccessfully аcross areas.

    OMT’s exclusive mathematics program matches MOE requirements Ьy stressing conceptual mastery
    оveг memorizing knowing, bгing ɑbout deeper lasting retention.

    Gamified elements mаke revision enjoyable lor, urging more method аnd
    leading to quality enhancements.

    Tuition facilities mаke uѕe օf innovative devices ⅼike aesthetic һelp, improving understanding fоr bettеr retention іn Singapore mathematics exams.

    my site :: super math tutor

  30. купить закладку в Кизилюрт Калачинск купить Кокаин Супер Качества Долинск купить Героин ОПТ Купить Кокаин Мефедрон Марихуану МДМА Москва Академический купить закладку Мефедрон в мелких камнях/муке Тавда купить Чистейший Метадон Купить экстази в Ессентуки

  32. free slots download perla casino online governor of poker 2 free download casino casino no deposit bonus code Book of Ra v spletnem casinu ra gold slot free demo slots brezplaДЌni vrtljaji brez depozita

  35. side bets blackjack the online casino https://lili-app.com villa fortuna casino no deposit bonus codes 2026 igre kazino automata bet 365 alternativ link oshi casino no deposit bonus codes

  37. Нижний Новгород купить Метадон VHQ Липки купить закладку шишки Обоянь купить закладку Гашиш Cube Купить Кокаин Мефедрон Марихуану МДМА Кызыл купить Героин в камнях Черепаново купить Ecstasy – UPS Шахунья купить LSD 220 мг

  39. alf casino no deposit bonus best casino for slovenia players high noon casino no deposit bonus happy hour casino admiral Igraj Book of Ra bet 365 restricted account mobilne igre za sluzenje denarja live casino igre za pravi denar

  42. free casino slot games with bonus rounds mobile slots no deposit bonus https://yadaktimche.com casino slovenia perla uwin live casino book of ra two symbols free play 100 free spins no deposit

  44. Апрелевка купить закладку Ecstasy Rolls Royce Енисейск купить закладку Порох 999 HQ Афган Бологое купить закладку HQ Гашиш NO NAME Купить Кокаин Мефедрон Марихуану МДМА Макушино купить закладку Кокаин HQ Сочи купить закладку Амфетамин фен Задул соль что делать

  47. f1 casino bonus online casino list welcome bonus 100 spins free best of online game casino cashout slovenia п»їNajboljsa spletna igralnica v Sloveniji free casino slot machines casino bonus brez depozita eu book of ra volatility

  50. Greetings from Idaho! I’m bored to tears at work so I decided to browse your site on my iphone during lunch break. I really like the info you present here and can’t wait to take a look when I get home. I’m amazed at how fast your blog loaded on my mobile .. I’m not even using WIFI, just 3G .. Anyhow, awesome site!

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>