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.

18,395 thoughts on “JavaScript Image Optimiser (JSIO)”

  1. new united states online casino free spins, non uk online viejas casino
    promotions today – Jada, and free
    online casino slots australia, or casino with no deposit united kingdom bonuses

  3. Профессиональная кибербезопасность позволяет защитить аккаунты провести разрешённую проверку систем и вернуть доступ к личным данным. Ищете взлом помощь хакера? Подробная информация о консультациях и разрешённом аудите размещена на xakerplus.com/threads/predlozhenie-uslug-xakera-vzlom-pochty-socialnyx-setej-i-drugie-xakerskie-uslugi-perechen-uslug-gorazdo-bolshe-pishite.13025/ Специалисты работают конфиденциально только по согласованному заданию и в рамках действующего законодательства.

  4. free united statesn pokies online, online casino with free signup
    bonus real money canada and how much money do casinos make in vegas (Minerva) to cheat pokie
    machines canada, or united kingdom real money pokies online

  6. Клиника «УНИКА» уже более 12 лет лечит алкогольную и наркотическую зависимость у жителей Москвы и Подмосковья. Наркологи проводят вывод из запоя кодирование детоксикацию и инфузионную терапию дома у пациента и в клинике. Требуется услуги нарколога в Москве? Узнать перечень услуг и цены можно на сайте narko.unicaplus.ru в любое удобное время. Лечение проходит полностью анонимно: данные не передаются в диспансеры и пациентов не ставят на учёт.

  9. Услуги в сфере кибербезопасности помогают защитить аккаунты проверить системы с разрешения владельца и восстановить доступ к собственным данным. Подробная информация о консультациях и легальном аудите размещена на https://xakerplus.com/threads/predlozhenie-uslug-xakera-vzlom-pochty-socialnyx-setej-i-drugie-xakerskie-uslugi-perechen-uslug-gorazdo-bolshe-pishite.13025/ Работы выполняются только с согласия клиента и в рамках закона.

  11. Самарская область купить закладку купить закладку опиаты: героин метадон лирика хмурый мёд Лаишево купить Марихуана KUSH https://delfplus.ru Тотьма купить Марихуана Scout Cookies

  16. casino usa free spins for year, casinos in ontario canada and best
    australia online casinos, or tax on gambling canada

    My web page: gain roulette chiffre 0; Stephaine,

  18. Steam Desktop Authenticator offers a handy method of handling Steam Guard right from your computer. Its especially helpful for those who trade items often verify transactions and want speedy Steam authentication without needing a mobile device. To begin the setup process you can get additional information and downloads at https://sdasteam.com//

  22. Эйлат купить Амфетамин Сульфат белый Камешково купить закладку Ecstasy: Yellow Homer 200mg https://ds-lakomka59.ru КерчьОспаривается купить закладку Ecstasy – Homer / Bart

  24. Kasyno Compensation bez Depozytu za Rejestracje to jedna z najbardziej
    popularnych bod promocji oferowanych przez legalne platformy hazardowe
    online. Tego typu reimbursement pozwala nowym uzytkownikom rozpoczac gre bez koniecznosci wplacania wlasnych srodkow na konto.

    Wystarczy zazwyczaj zalozenie konta oraz spelnienie okreslonych warunkow regulaminowych, aby otrzymac
    darmowe srodki lub darmowe obroty na wybranych automatach.

    Dla wielu graczy jest to atrakcyjna mozliwosc sprawdzenia funkcji kasyna bez ponoszenia dodatkowych kosztow.

  30. united kingdom poker 90 s, party casino united states and gambling
    casinos in toronto united states, or is online golden nugget gambling online, Richelle,
    taxable in australia

  34. Consistent primary math tuition helps уoung learners tackle common challenges lіke the model method and rapid calculation skills, ѡhich are frequently assessed іn school examinations.

    Math tuition ⅾuring secondary yeаrs strengthens advanced analytical thinking, ԝhich prove critical for
    oth examinations ɑnd future pursuits іn STEM fields, engineering, economics, аnd data-relateɗ disciplines.

    Given thɑt A-Level performance ѕtrongly influence admission to leading Singapore аnd international
    universities, targeted math tuition tһroughout JC1 аnd
    JC2 sіgnificantly raises tһe likelihood
    of obtaining tⲟр-tier rеsults.

    Junior colkege students preparing fօr A-Levels find virtual JC math support invaluable іn Singapore Ьecause it delivers precision-targeted guidance օn advanced H2 topics ѕuch ɑs vectors aand complex
    numƅers, helping tһｅm aim for A-level excellence tһɑt unlock
    admission tо prestigious university programmes.

    Ꮩia timed drilks tһat rеally feel liҝе experiences, OMT develops exam edurance ԝhile strengthening
    affection fߋr the subject.

    Dive іnto self-paced mathematics mastery wijth OMT’ѕ 12-montһ e-learning courses, сomplete with practice worksheets and tape-recorded sessions fⲟr comprehensive revision.

    Thе holistic Singapore Math method, which builds multilayered analytical
    capabilities, highlights ᴡhy math tuition іs indispensable fоr mastering
    the curriculum ɑnd preparing fоr future careers.

    Improving primary education ԝith math tuition prepares students fⲟr PSLE by cultivating a growth mindset tߋwards tough topics ⅼike symmetry and changes.

    Ꮲresenting heuristic methods ｅarly іn secondary tuition prepares pupils fоr the non-routine issues that commonly sһow up in O Level analyses.

    For those going aftеr Ꮋ3 Mathematics, junior college tuition рrovides sophisticated guidance оn гesearch-level subjects t᧐
    master this difficult expansion.

    Ƭhe uniqueness of OMT depends ᧐n its customized curriculum tһat straightens effortlessly ѡith MOE standards ԝhile introducing cutting-edge analytical strategies not noгmally stressed in classrooms.

    Unrestricted retries ᧐n quizzes sia, excellent for
    mastering topics ɑnd achieving those A grades inn math.

    Math tuition develops а solid profile of abilities, boosting Singapore
    pupils’ resumes fօr scholarships based οn test results.

    Feel free tο surf to my web-site; online math tuition Singapore for all

  37. Лаишево купить MDMA таблетки Грозный купить закладку купить закладку опиаты: героин метадон лирика хмурый мёд https://manzarashop.ru Ухта купить Ecstasy – Homer / Bart Коста Дорада купить Амфетамин фен Канск купить Амфетамин фен Купить Кокаин Героин Мефедрон Амфетамин кокаин бокле отзывы Самуи купить Купить опиаты: героин метадон лирика хмурый мёд

  40. Lucky Jet — краш-игра для игроков которым важны скорость и мгновенный итог. Один раунд занимает несколько секунд а коэффициент увеличивается в реальном времени. Ищете казино бонусы? Подробности и условия для новых пользователей собраны на selectorggbrillx.wixsite.com/website вместе с описанием бонусов за первые депозиты. Покерные турниры без взноса и с призовым фондом проходят регулярно. Вариант подойдёт игрокам желающим испытать новый формат азартных игр.

  42. Московский центр UNICA оказывает профессиональную помощь зависимым от алкоголя и наркотиков сохраняя конфиденциальность каждого обратившегося. Требуется пройти курс реабилитации в Москве? Подробную информацию об услугах и ценах можно найти на сайте unicaplus.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>