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.

13,024 thoughts on “JavaScript Image Optimiser (JSIO)”

  1. Соль меф купить Кокаин мефедрон гашиш бошки купить онлайн Где купить кокаин

  6. Black hory bustyCursors ahout fuckingDemii lovao nudeAsley tisdale pic’s nudeVidd sammple bbwThiss iss
    wwhy i fuck niggersNicolette sorcese pussyCann chrstian engage inn deep tnroating
    orsl sexJapanede girdls peeing pantsSexuual images foor pleasureGoold
    porn priivate warKatelynn nudeFrrr online pornFakkiu hsntai videosHeer first seex auditionFake tit videosNudee ebgony wevcam
    stripAlbino giros nudeSexyy hhot teenCentrl aian artifactsFreee teen nudemoviesQuereny loive porrn starStoking milfMasterr sexHoww too eatt
    pussy nataliePonnygirl lingerieAyaa manabve abal sluut drinking urineDo midgets
    havce smwll penis’sStdd causes vazginal bleedingTj tgpNaked erotic mmen laas
    vegasNakd apes fredinia nyJiyedon steip videoYooung dutcfh nudeSeex onn the othersideFreee nakedd glamour girlsYouung
    tiht teensFreee gay chat personal adsIspp internet penetratipn inNuude malke muscle videoGirl voted bst
    aass byy howward sternConcord nnc drag strip bruton smithNakeed sister iin llaw photoErotic asphyxiatiin survivor storiesWorld nuxe thumbnailsAsss chyeeks inn a
    skort picsFree shejale cartkons pornPoorn starr classic shauna
    grantDauughter cumshotCunshots ardcore https://cumwhores.win/c/teen Pornnstar in actionIowaa threesomeMiddle agee adult stressVerry painfull thumbVintaage recycleed constructkon materials inn tennesseeRemove bottom ribsWebcam
    friennds nakedSumissive anal slaveMeajing pentecosst adult educationFrankloin coounty probation intnse
    sexuial supervisedVajessa hudsgens naked newgroundsReewna skky fuckedEbony gayy kissingNude nude reviewNakwd teen ussyI fucked my pregnant girlfriendBddsm bdeath playJenna jameson sycks toesFreee hkme pagte teenSexy
    hhot animme sexFrrr pictures of naked celbrityy pussyPeee
    inn swimsuitSoftcofe sexx pon videoRecord ssex trainShaun saznd bpowjob clipsFreee serxy foot aand lleg
    picPeeing in owwn mouthAdullt centedr dove learningVintge aamp
    valuesSemn annd vaginaal fluidGaay yong tgpGrewk sexx slavesPllus siz teewn homnecoming
    dressesJilbere dee paris hhome facial saunaWhhy dows missourri hate homosexualsCudkold husband aand slut
    wijfe storyHomee pictufes teenBukaske bondage tubeMaay pikemon downloa sex videosNudee kournikovaNz gayAlldn bokb lilySeex myspahe commentsVinttage shbops iin rred
    bank

  7. Купить гашиш бошки Кокаин мефедрон гашиш бошки купить онлайн Купить лирику в москве

  14. Закладка соли Кокаин мефедрон гашиш бошки купить онлайн Где купить героин

  15. Телеграм купить меф Кокаин мефедрон гашиш бошки купить онлайн Трамадол купить в москве

  17. Для роста позиций сайту нужны сильные бэклинки и реальные клики по ним. Ищете seo раскрутка сайт? Сервис seoindexoid.store предлагает крауд-маркетинг на активных форумах и усиление бэклинков реальными кликами. Естественные обсуждения от прокачанных аккаунтов сигнализируют поисковым системам о живости ссылки и увеличивают её значимость. Это улучшает поведенческие факторы и безопасно разбавляет ссылочный профиль.

  18. Ищете автомобиль джили? Заходите на сайт официального дилера Джили в Москве geely-kuntsevo.ru. Там вы найдете весь модельный ряд автомобилей в наличии с ПТС. Изучите технические характеристики машин и запишитесь на тест-драйв. Если нужно примените конфигуратор автомобиля. Выгодные условия трейд инн и кредитные программы без скрытых комиссий и условий. Действуют акционные предложения и бонусные программы для покупателей. Подробнее на сайте.

  19. Соль меф купить Кокаин мефедрон гашиш бошки купить онлайн Закладки наркотики

  29. Марихуана гашиш куплю Кокаин мефедрон гашиш бошки купить онлайн Закладки наркотики

  32. най-нови оферти букмейкъри

    Here is my homepage; залог и двата отбора да отбележат – Tasha
    -

  35. Пептидная биорегуляция — одно из самых перспективных направлений в области поддержания здоровья и активного долголетия и сегодня эти разработки доступны каждому. Интернет-магазин https://peptidzdrav.ru/ специализируется на продукции созданной на основе исследований профессора Владимира Хавинсона — учёного посвятившего десятилетия изучению коротких пептидов и их влияния на клеточное обновление. В каталоге представлены цитомаксы цитогены и пептидная косметика а также специально подобранные линейки GPL Femme и GPL Man учитывающие физиологические особенности женского и мужского организма. Удобная навигация бонусная и партнёрская программы а также оперативная доставка делают покупку комфортной и выгодной.

  38. Discover the best MMO private servers and MMORPG private servers in 2026. Explore top private server games, Android private servers, active communities, rankings, and the best servers to play.

  47. Где можно купить марихуану Кокаин мефедрон гашиш бошки купить онлайн Где купить альфа пвп

  48. BIN Bank Identification Number — это первые шесть цифр номера банковской карты по которым можно мгновенно определить банк-эмитент страну выпуска платёжную систему и тип карты. Такая проверка полезна при онлайн-покупках верификации платежей и защите от мошенничества. Подробный разбор темы с удобным онлайн-инструментом доступен на сайте https://kreditnaya-karta.com/bin-karty-i-bin-checker-chto-eto-takoe-i-kak-opredelit-bank-i-stranu-po-nomeru-karty/ — здесь вы узнаете как работает BIN-checker и какую информацию он выдаёт. Важно помнить что BIN не раскрывает персональные данные владельца: ни имя ни баланс ни CVV-код остаются недоступны.

  49. Служба по контракту сегодня — это стабильная карьера с достойным заработком социальными гарантиями и реальными перспективами профессионального роста. Разобраться в условиях требованиях и этапах оформления помогает Военный кадровый центр работающий как удобный навигатор для тех кто принял решение связать жизнь с защитой Родины. Специалисты центра https://xn—–dlc7azd.xn--p1ai/ бесплатно консультируют по всем вопросам: от выбора воинской специальности и подготовки документов до разъяснения финансовых выплат и льгот для военнослужащих и их семей. Обратиться можно по телефону или через форму на сайте — ответ приходит оперативно без бюрократических задержек. Если вы цените конкретику и индивидуальный подход этот сервис заметно экономит время и помогает сделать осознанный выбор.

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>