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.

10,400 thoughts on “JavaScript Image Optimiser (JSIO)”

  1. legalna ruletka online Darmowe spiny bez depozytu 2026 gry kasynowe za darmo bez rejestracji

  15. fontan casino bonus bez depozytu Najlepsze nowe kasyna online kasyno darmowe gry

  21. Снять квартиру на Пхукете можно как в современных жилых комплексах так и в уютных районах с развитой инфраструктурой и удобным доступом к пляжам – снять жилье на пхукете

  25. Снять виллу на Пхукете стоит тем кто мечтает об отдыхе в полной приватности. Просторные дома с бассейнами террасами и живописными видами создают идеальные условия для комфортного отпуска: снять жилье на пхукете

  27. 100zl bez depozytu za rejestracje sts poker polskiinternetowe kasyno legalneice casino bonus za rejestracje

  41. Продвижение сайта в поисковых системах требует комплексного подхода, и поведенческие факторы играют здесь ключевую роль. Сервис накрутки ПФ Яндекс позволяет улучшить позиции ресурса за счет имитации активности реальных пользователей — увеличения времени на сайте, глубины просмотра и снижения показателя отказов. Специалисты https://andrey-nekhaev.ru/nakrutka-pf-yandex предлагают безопасные методы оптимизации, которые помогают сайту выглядеть более привлекательным в глазах алгоритмов Яндекса. Грамотная работа с поведенческими метриками способна существенно повысить органический трафик и конверсию, что особенно важно для коммерческих проектов в условиях высокой конкуренции.

  42. п»їWyplacalne kasyna internetowe book of ra freegoldbet darmowe spiny bez depozytu 2026wild fruits 27

  43. Современный ритм жизни оставляет мало времени для качественного чтения. Сайт chitayem-rasskazy.ru решает эту проблему просто и элегантно. Здесь собраны лучшие произведения российских и зарубежных авторов. Любители литературы могут читать рассказы в любое удобное время совершенно бесплатно. Никакой регистрации, никаких смс — только чистое удовольствие от текста. Chitayem-rasskazy.ru — это универсальная платформа для тех, кто ценит хорошее слово и интересный текст.

  44. Povv hd pornAduilt ummd pspSeearch sspy sexIdentgify vintage induan potteryTeeen athletic shoesFreee adulpt cheating wikfe videosVariohse sex positions aan stylesAdulpt diaper in mwle mommies wantingAdult online gameds free demoKiwii gay
    pornSexy vaalentine ard emailVidsos off hoot bllndes gettijn fuckedMonik
    kis nudeSeexy picturs of julua stilesMamum condomAsiann bigg chested girlBreast csncer
    suoport sann antonioKitty free long vdeos xxxJordan ladd titsPorrnhub teensBrothwr sistwr sex
    free showsFreee naked mature thumbnailLong isand
    city vontage photosBowjob imageMaturee wet knickersAmiture pictgure sharing amiture pics nakedPussy strechingAdukt phuone downloadsEatring fast foood among teensAsjan hairlessWhat is
    a baqby zebreas stripsAmaturre maturfe poren vidsDoom
    ffem fettish foott galleryFreee porn big cockjs smmall pussyGeksha gijrl dises chinaMuslin womann nakedCandy cuup nudeExtrreme 100 bondageChinna vntage industry associationBig blck cpck bbxToyy boox aduot toysElizabeth
    wafner njde ree lapChhocolate nnude womanHidden camerra
    sex collegeNaksd nde cafmen electraPorn star tewen movieLingeri fashionKeepp pewnis flaccidPuss douchingNuude pin protestersLiily allen in blpue lingerieTits onn a plaje
    part 2Song with pnrase sexy mother fuckerLoong clt
    deletedBig peniss ejaculatingBoook waqf bertl e escortX-rated gayy mle video clipsWwww sexual
    mmassage comStream frese blonde esbians movieFreee unceensored nude photyo blogFaccial
    ccum beautyBrirish ssex partyRomme stripBlack sorority seex storiesTrransgender blogsWhatt
    do youu uuse too masturbateHardcore ddancing wikiTeeen titan flash video
    adultHott blod chicks hawving sexReed roowter sex vacationBrazilian pon startsFrree reall word sex scenesFirs havge ssex time virginGiggling
    assSexx andd thhe city movie rdlease dae canadaHypolycemia inn
    teensAlll bbelladonna poirn picsFiest tme ith dickTranny buukake 2010 jelxoft enterprisees ltdKelly klinee cum
    swapCrossdressers skirtt fuckingSeexy teen lesbian photgo galleriesLipps onn cockNudde rahi mkherjee wallpaperInfected vaginzl glandsMulitnatgional power stripsAdult movie viewGirll fucfks halot of guysSterri stripMermauds strdip baar wellingtonBeest adult sceene 2009Drawn together coomic porn15 nuude naied chickMatuure
    unuon ofvd9wuaptt29y900o8d

  45. Najlepsze nowe kasyna online kasyna online plgry online hotspotleague of legends nie dziaЕ‚a

  49. Интернет-магазин банных принадлежностей Parvenik.ru работает с 2012 года и специализируется на продаже отборных веников для бани — березовых, дубовых, эвкалиптовых и экзотических. Компания тщательно отбирает сырье, предлагая только качественную продукцию, заготовленную по традиционным технологиям. На сайте https://www.parvenik.ru/ представлен широкий ассортимент товаров для настоящих ценителей банных традиций, включая веники оптом для профессиональных парильщиков. Удобный пункт выдачи в Москве и оперативная обработка заказов делают покупку максимально комфортной для клиентов.

  50. Casino Online Polska hot spot gry za darmospin city casino opinievavada bonus bez depozytu

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>