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.

17,099 thoughts on “JavaScript Image Optimiser (JSIO)”

  1. Planning a seamless road trip across America requires clear geographic insight and dependable route guidance. Whether traversing lively coastal metropolises scenic historic corridors or tranquil countryside byways https://east-usa.com/ delivers meticulously detailed regional road maps county borders and national park directories designed to help curious travelers navigate every state with absolute confidence and ease.

  2. book of ra two symbols demo online casino x Top igralnica Slovenija lets go fishing slot game free free spins casino no deposit new codes 2026 free slot games with bonus rounds casino free bonus

  3. Электронику для схем ищут быстро и дешевле рынка. Ищете пассивные компоненты? Каталог микросхем резисторов конденсаторов и разъёмов собран на components.ru — проверенные поставки от производителей с гарантией подлинности. Оформление заказа занимает минуты склад отгружает партии любого объёма. Технические консультации по замене номиналов бесплатны доставка работает по стране.

  5. euroking online casino free download gonzos quest free spins casino slovenia lubiana deposit bonus casino Casino bonusi za Slovence zodiac casino slovenia no deposit bonus slovenia najboljЕЎi bonus za registracijo brez vplaДЌila

  6. Проект CaseWay даёт каждому активному любителю Counter-Strike 2 реальный шанс быстро расширить арсенал ценными игровыми предметами. Специальный раздел ежедневных призов и кейсов функционирует по адресу https://caseway.net/daily-free/cs2/ в открытом доступе для авторизованных геймеров. Честные механизмы работы сервиса исключают накрутку и позволяют без задержек забирать выигранные редкие предметы на личный баланс.

  13. free slot machine play blackjack online game Bonus brez vplacila bet365 bonus slovenia casino games free slots download play free slot games online free casino slot games with bonus rounds

  18. What sites give free spins no deposit casino slovenia perla big 5 casino no deposit bonus casino riviera online Spletna igralnica best online casino bonus no deposit no deposit crypto casino bonus bet 365 paypal deposit

  21. big casino online kazino igre kleopatra Spletna ruleta za zacetnike in izkusene igralce book of ra games hotel casino admiral kazino igre besplatno live casino number

  29. casino admiral lipnica book of ra games free ruleta v Еѕivo live casino online working in slovenia Igre na slot avtomatih casinolistings free slots zodiac casino app casino igre lucky lady

  32. book of ra classic free slots video poker deuces wild Igranje iger na sreco za pravi denar na spletu omni casino latest no deposit bonus black chip poker no deposit bonus download free slot games with bonus rounds free spins weekly cashout

  33. Today, I went to the beachfront with my kids. I found a sea shell and gave it to my 4 year old daughter and said “You can hear the ocean if you put this to your ear.” She put the shell to her ear and screamed. There was a hermit crab inside and it pinched her ear. She never wants to go back! LoL I know this is completely off topic but I had to tell someone!

  35. Тёплый электрический пол дарит комфортный и равномерный обогрев в квартирах коттеджах и офисах. Ищете электрический купить теплый пол? В магазине теплый-пол-электрический-купить.рф представлены маты под плитку кабели в стяжку модели под ламинат и терморегуляторы ведущих брендов. Собственный склад в Москве позволяет отправлять заказы в день оформления в любой регион страны.

  37. hit casino kranjska gora korona casino admiral san roque star games casino free casino med no deposit bonus Igralnica online online casino sign up free spins free video slots games for fun 10 euro no deposit bonus casino

  39. casino 10 euro deposit 4 days 5 free spin casino Spletne Igralniske Igre evo live casino jackpot casino rewards casino admiral ljubljana free casino games no download no registration

  43. Фирма «Надёжные окна» производит и монтирует энергоэффективные ПВХ-окна в Тирасполе Бендерах и на всей территории ПМР. Своё производство без переплаты посредникам гарантия до 10 лет бесплатный выезд замерщика и установка под ключ за один день. Ищете пластиковые окна пмр? Подробнее на сайте okna-pmr.com Более 15 лет опыта и свыше 2500 установленных окон подтверждают качество работы.

  44. Компания «СХТ» занимает лидирующие позиции в выпуске точного измерительного оборудования. Весы автомобильные карьерные складские железнодорожные и для скота грузоподъёмностью от 5 до 100 тонн сертифицированы и зарегистрированы в Госреестре. Ищете автомобильные весы Ростов? Подробности на сайте rostov.cxt.su доступны каждому. На продукцию действует гарантия 3 года при этом автомобильные весы работают не менее 15 лет. Монтаж и сервис выполняют опытные специалисты.

  45. hopa casino free spins free bet no deposit bonus casino nova gorica blackjack do you show cards Casino na spletu casino slots free spins 888poker live vienna montesino casino mobile slots no deposit bonus

  47. Хотите обустроить красивый водоём во дворе? Специалисты «Твой пруд» обустраивают водопады пруды и фонтаны под ключ воплощая в жизнь любые пожелания. Проекты реализуют квалифицированные специалисты с использованием долговечных материалов и надёжной техники. Подробности и портфолио проектов смотрите на сайте https://tvoyprud.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>