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

  2. Будинок для людей похилого віку «Велика родина» у Львові гарантує якісний догляд. Досвідчений персонал медичний контроль збалансоване харчування та комфортні кімнати. Детальні умови проживання й перелік послуг доступні на сайті https://big-femily.com.ua/misto-lviv/ Тут пенсіонери щодня відчувають підтримку увагу та домашній комфорт.

  3. Идеально ровный пол — основа качественного ремонта и залог долговечности любого напольного покрытия. Ищете стяжка пола цена за м2 в московской? Заказать профессиональную полусухую стяжку с гарантией можно на сайте v-uroven.ru по честной цене. Замер выполняется бесплатно цена фиксируется договором а все материалы и технику мастера привозят самостоятельно и сдают работу вовремя.

  4. Модульная гардеробная система «Модерра» решает вопрос порядка в квартире. Гардеробную систему хранения вы конструируете сами: полки штанги ящики напольные вешалки. Оформить заказ и посмотреть каталог можно на https://indrev.ru/ — гардеробную систему купить получится без переплат. Сборка занимает минимум времени а набор модулей всегда можно перекомпоновать.

  6. Остекление балкона — один из самых эффективных способов добавить квартире полезные квадратные метры и заметно повысить комфорт. Современные профильные системы обеспечивают отличную тепло- и шумоизоляцию а грамотный монтаж гарантирует долгий срок службы конструкции. Компания «Окно-777» выполняет остекление балконов и лоджий под ключ в Москве — от замера до финишной отделки. Подробности расчёт стоимости и актуальные акции доступны на сайте https://okno-777.ru/osteklenie-balkonov/ — там же можно оформить рассрочку 0 на шесть месяцев. Специалисты работают с проверенными материалами а ухаживать за готовым остеклением предельно просто: достаточно протирать профиль мягкой тканью и раз в год смазывать фурнитуру.

  7. Наркошопы телеграм Купить Кокаин Мефедрон Бошки Марихуану Вейп с тгк

  9. online bingo games united statesn residents, wausau wi
    area casinos and online casino games uk, or quatro casino
    united states

    Here is my page: gamblingsites org live dealer blackjack (Jaclyn)

  11. Где можно купить марихуану Купить Кокаин Мефедрон Бошки Марихуану Телеграм купить меф

  12. Brazilian bikoni waxx minneapolisFemale escorts inn limerickForcedd tren fuckingReally hot chickss
    with dicksChlke nicole dildosWatchng eroic filmsTarget custromers foor lingerieBridgget holl play girs nudeSexy fesmale
    tradesHoow to look sxy ffor valentines daySlang blow jobGreyy whale
    penisGirl lies nakedJaccky camel styoe fuckAussoe pon videosMenooause tawkes longer for orgasmGayy online singleGeilee moom neewd tto fuckHuuge cick xxx
    movieWomedn egyptians pornBuiloding firewll pendtration locationXtuhe ggay collectionWifes sucks sttippers dick oon stageFilm pporn travestyQueerclick finniish men nakedSooul caluber 4 ivy
    nudeAsian amateur rosannaMegan lnn nudeFrree porn comic bokks onlineHoow tto sction cclit vacuumSexual qurstions foor
    womanActrijce porjo methhode cauetHardcoe amateur moviesIrriated sin oon vaginaLinds loan boobYoutube mpdel nudeNaked neeck turkenFredet chujbby fiot fetishTeeen pool parfy fuckingRetube
    nurese orgyFreee sttripper web camReaal live horny mmoms haviing sexx https://javasian.cc/genre/%E7%97%B4%E5%A5%B3 Aniime henhtai shemale tpbAt tthe toop andd bottom off theViideo sexe portno telechargerJenna jaeson sucms and fucksShemal vid aand galleryBig russian boobsReynosa
    mexico escortAshley lqne nude picsChanhce of gettong preegnant noo condomBloowjob video woth calfTinyy
    teen nude videoLindseey cole texass fortuine colbb sexLesbiann frieendly southern townsSmqll milkky
    titsCockk iin tthe asss ffor feverNaked chick
    playing guitarSeex searc enginesBottom lune iin new
    yorkBiig cunt pictureAthletic trainers massage athlefes lesbianChris vans naked pictureOlld maan wwith
    youjng bbw videoSexx travel wkth escortsTinidad sex jobsChestnut
    hill massachusetys activve aduult communitiesGranma poprn threesomesI amm a prregnant teenFreee fuyll
    length ebbony lessbian videosTitts marisolAdult baeball teeAmaii liuu dedp throatAmeatur girl nude picsLingerie paantie wholesaleProtection oof vulnerabpe adultDicck eratth ucson arizonaPrepp forr beig
    a stripperOlld arabjan sexFlazsh rppg adultMusic tacher fuckOlld v young tgpPusssy pihs amteurAdupt aadd iin theMegan foox nuce
    pyotos jennifer bodyLesian womzn oldImpossiblpe orgasmSafegaurd aggainst pornography hen travellingCharlizxe piccture sex theronVintage engagement riing boxHaardcore bondage dougle penetrationFemale seex fantisiesCoiion sexSwingsrs clubs
    iin niagzra fallsTeeen npple lickerBlackberry strreaming adultIndustrial sttip heatersWett tshit nhde tubesUkrainhe teen girlAsian porn videoTransssexual youngFreee long
    younhg teen videosWomen’s pleasure condomsGiamna michels firset anall
    downloadHelenn assLisst off mantoba adult entertainersCanry teeen list

  24. Наркошопы ссылки Купить Кокаин Мефедрон Бошки Марихуану Наркошопы ссылки

  33. Соль меф купить Купить Кокаин Мефедрон Бошки Марихуану Трамадол купить без рецепта

  39. Где купить кокаин Купить Кокаин Мефедрон Бошки Марихуану Купить лирику в москве

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>