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.

16,594 thoughts on “JavaScript Image Optimiser (JSIO)”

  1. casino otvaracie hodiny online casino bonus za registrГЎciu kde hraЕҐ ruletu online a vyhraЕҐ Casino slovensko ruleta online zdarma hracie automaty zdarma online

  2. hazardne hry na slovensku hracie automaty zadarmo piramida kasyno z platnoscia paysafecard online poker freeroll slovensko Which gambling site has the best welcome bonus big bass xtreme demo

  4. Aguilera christina sexyHanging for being homosexualJessie james porn clip galleryTylonol pm gay adBisexual movie for free
    downloadBusty danni asheFree mature black big booty whoresFrida kahlo nudePorn shops near wolverhamptonAdult learning center minot nd xnxx Nudists
    couplesEnjoying titsFree rosanna arquette nude videoNude club strippersWhat is the average sperm
    countWc gang bangBest cougar porn picsWomen maturbating to orgasmVery less cum https://best.xnxxtubexxx.cc/ Sex shop richmond virginiaKaylakleevage interracialSuck urineWet tight lesbian videosCu
    filmulete porn vedeteMuscular black porn womenNaked shopingVintage chorusRomeo
    and juliet ballet nudeDeflouring teens xnxx Filestube mom
    gangbang sonShemale dating websiteCreative ways to masturbateSquaw
    analAsian twink free picturesSevere fuckWife sexual torture video

  10. где можно купить наркотики мефедрон телеграмм купить купить Бошки Гашиш Мефедрон Альфа-ПВП где продают гашиш купить мефедрон гашиш кокаин https://gasprakupit.xyz купить мефедрон онлайн купить бошки гашиш марихуану экстази в питере Купить Марихуану Мефедрон Гашиш Кокаин

  11. automaty online realne peniaze 5 euro no deposit bonus sk casino bonus Automaty free spin automaty mega joker zdarma wild stars81 automaty zdarma

  13. 1 euro deposit bonus juicy vegas casino no deposit bonus codes 2026 zagraniczne kasyna oferujace bonus bez depozytu apollo games automaty online free online ruleta zadarmo casino no deposit 10 €

  14. Big sexy hair dry shampoo reviewsBig natural tits flashersAnal articlesCali phone sexAdult
    protective services greensboro ncRachael ray sex pixAnjali
    swingers ukHuge white tits fucked by blacksTall amazon eve nudeJerk off
    buddys xnxx Clean sex showsExplicit mainstream films oral sexBarbie blank nude
    pics freeErotic night flash downloadMale nude sweden thumbnailFree gay picture wrestlingHardcore muscle building stacksHow t ogive a hand jobBrutal pussy and nipple
    torturePink pussy thumbnails https://xnxxvids.cc Song title love songs suckAdult diego entertainment sanGay men write about sexDiane arbus nudistSharpen latexMature vintage cuckholdsHeterosexual lovemakingSexy pics michelle trachtenbergHazell hot boobsMarlin 917v
    thumb hole stock xnxx Sex offender registry attorney cherylFreaks of cock 6Heather
    sex siteSmall pussy sexCasey cooper sexy capsWhites and black gayBoob gigantic girl superDesis sex
    storiesLatex bodywearRedtube anal monsterLingerie model thumbsCheap jewish phone
    sexHot blowjob pornHot busty nunsVintage stapon moviesSex
    facts about womenMedical birth three breastPuerto
    rican sexy womanGuides for teens on std’sStrip background
    noise

  15. Искусственный водоём в саду — это стильное решение и источник приятных эмоций. Мастера ProfPrud создают пруды любого масштаба и конфигурации под ключ. Ищете купить пруд Mосква? На сайте profprud.ru представлены готовые проекты и примеры выполненных работ. Специалисты подберут оборудование высадят растения и обеспечат сервисное обслуживание. По завершении проекта владелец наслаждается ухоженным прудом и уверенностью в его долговечности.

  18. The examples sit naturally within the explanation. The article keeps observation separate from
    interpretation. The careful wording makes a difference.

  19. купить закладку героина где купить метадона купить Бошки Гашиш Мефедрон Альфа-ПВП где купить коноплю где купить лирику https://kiselevskkupit.xyz кокаин доставка купить бошки гашиш марихуану экстази в эмиратах трамадол таблетки цены купить

  24. hracie automaty zdarma hunster dream peniaze za registrГЎciu sk casino bonus za registraciu Slovenske online casina zahraniДЌnГ­ casino bonus bez vkladu no deposit bonus automati hri hraj zdarma

  25. hracie automaty strategia tipos casino recenzie kasyno mobilne na telefon kde hraЕҐ ruletu online hracie automaty online zdarma sizzling casino dubnica nad vahom

  30. Для эффективной аналитики и масштабирования интернет-бизнеса требуются актуальные данные. Профильный ресурс https://richman888.keys.shop/ предоставляет свежие базы доменов и структурированные реестры сайтов по CMS. Ежемесячные обновления полный охват мировых зон и моментальная выдача сведений обеспечивают маркетологам точность и явное преимущество.

  33. Гидроманипулятор на самосвале расширяет возможности грузовика позволяя грузить разгружать и переносить массивные материалы. Компания Steelmagic производит надёжное оборудование под ваши задачи — оформить заказ можно на сайте https://steelmagic.ru/gidromanipulyator-dlya-samosvala/ Надёжная сборка чёткое управление и долговечность подтверждены на практике.

  36. купить коноплю мощную заказать коноплю купить Бошки Шишки Марихуану заказать наркотики купить наркотики онлайн https://balashovkupit.xyz купить гашиш шишку купить бошки гашиш марихуану экстази в питере конопля купить москва

  38. slovenskГ© casino online kasyno online wplata BLIK hraci automat anglicky

  41. 888 casino trustpilot slovak online casino hraci automaty ke stazeni zdarma pc Hry o vyhru online automaty hry zdarma single deck blackjack online

  44. langfristige wettstrategie

    Feel free to surf to my web-site :: basketball über unter wetten overtime (Mia)

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>