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

  1. casino metropol portoroЕѕ slovenia – Jak gracze obstawiaja w ruletke online slovenski spletni casino lucky block jackpot

  2. free spins no deposit casino united kingdom 2021, play free slots united states and
    5 dollar deposit online harrah’s cherokee casino
    discounts [Rhys] usa, or canadian gambling apps

  4. new zealandn online pokies au reviews, bitcoin gambling united kingdom and juki
    slot machine, or canadian online place to play blackjack
    in a casino (Napoleon)
    with $5 deposit

  5. Волхов купить закладку VHQ Cocaine 98 Bolivia Москва Молжаниновский купить Метадон чистота 99 Самара купить Afgan Kush Марихуану Кокаин Бошки Гашиш купить Кремёнки купить закладку Euro HQ Hash ЧЕРНЫЙ Коггала купить закладку эйфоретик Мефедрон Вуктыл купить закладку Ecstasy: Pink Heart 200mg

  8. Яндекс Еда приглашает курьеров с полностью свободным графиком: выходите на смену от одного до двенадцати часов выбирайте любой район и зарабатывайте до 850 рублей в час. Возите заказы пешком на велосипеде самокате или машине чаевые остаются вам полностью а у партнёров действуют скидки до 50. Ищете работа курьером? Оставьте заявку на сайте rabota977.ru и начните зарабатывать уже сейчас. Официальный партнёр Яндекс Еда только 18.

  9. blackjack double down – Blyskawiczne wyplaty wygranych online free online casino games book of ra casino igre free praЕЎiД‡i

  11. united kingdom casino slots tips gambling, 2021 online casino new zealand
    and most popular casino games usa, or how much does canada spend on pokies

    my webpage :: resurrection bingo; Allan,

  13. Рекламно-производственная компания Зенит предлагает комплексные решения по изготовлению наружной рекламы и интерьерных вывесок в Барнауле. Быстро выбрать эффективный формат и оформить заказ поможет сайт https://altay-reklama.ru/ гарантирующий честные цены и высокое качество. Собственный производственный цех позволяет выполнять проекты любой сложности точно в установленный срок без наценок посредников.

  15. проверка авто по вин узнать количество владельцев по вин

  18. Нововоронеж купить MDPV Москва Тушино Южное купить закладку Ecstasy: UPS 280mg Петушки купить закладку Марки LSD Марихуану Кокаин Бошки Гашиш купить Косяк из сигареты Конаково купить наркотики Москва Некрасовка купить закладку LSD-25 в марках 250мк

  20. Simply desire to say your article is as
    astonishing. The clarity on your submit is simply
    cool and that i could assume you’re knowledgeable on this subject.
    Well along with your permission allow me to snatch your feed to stay up to date with impending post.
    Thank you one million and please continue the rewarding work.
    xnxx

  22. скупка вейпов тольятти вейп барахолка тольятти автозаводский

  23. ruby slots casino free spins – Slovensko spletno casino spinzwin casino no deposit bonus codes kdaj je Еѕrebanje lota

  25. Кулинарный портал превращает ежедневную готовку в удовольствие: от быстрых завтраков за пять минут до изысканных горячих блюд. На платформе https://food-ru.ru/ собраны сотни понятных пошаговых рецептов с точным расчетом калорийности и времени. Это удобный гастрономический гид который вдохновляет разнообразить семейный рацион легко и с аппетитом.

  30. I’m blown away by the quality of this content! The author has clearly put a tremendous amount of effort into researching and arranging the information. It’s inspiring to come across an article that not only provides valuable information but also keeps the readers engaged from start to finish. Kudos to her for producing such a masterpiece!

  32. can i use td australia visa debit for online robinhood gambling
    (Sue), no deposit canada casino bonus and online casino
    games uk, or best slot games online uk

  36. Компания GLASSWAY — производитель потолочных перегородочных и световых систем с опытом более 10 лет. Собственное производство обеспечивает цены от завода и гарантию качества. Ищете раздвижные перегородки купить? Подробный каталог представлен на сайте glassway.group — подвесные потолки алюминиевые перегородки двери смарт стекло и остекление. Собственные монтажные бригады устанавливают системы точно в срок а доставка работает по всей стране.

  37. Компания СВАРТЕХКОМПЛЕКТ поставляет сварочные аппараты инверторы и расходные материалы для профессионалов и частных мастеров. В каталоге представлена техника проверенных производителей по доступным ценам. Ищете сайты сварочного оборудования? Полный ассортимент и актуальный прайс размещены на сайте http://www.svartk.ru — здесь удобно оформить заказ онлайн. Компания быстро отправляет товары по всей стране а менеджеры бесплатно помогут с выбором техники под нужные работы.

  38. download free slot games to play for fun – Online automaty o skutocne peniaze leovegas free spins win free slots with bonus

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>