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.

7,832 thoughts on “JavaScript Image Optimiser (JSIO)”

  1. В этом исследовании рассмотрены методы лечения зависимостей и их эффективность. Мы проанализируем различные подходы используемые в реабилитационных центрах и представим данные о результативности программ. Читатели получат надежные и научно обоснованные сведения о данной проблеме. Как достичь результата? – наркологическая клиника в твери

  2. flats for rent in al wasl dubai for rent Why Investing in Dubai Real Estate how to start a small business in uae opening real estate company in dubai

  3. dubai international real estate po box 3 Bedroom Apartments For Sale In Dubai opening real estate company in dubai weekly rental villas in dubai

  4. Этот обзор сосредоточен на различных подходах к избавлению от зависимости. Мы изучим традиционные и альтернативные методы а также их сочетание для достижения максимальной эффективности. Читатели смогут открыть для себя новые стратегии и подходы которые помогут в их борьбе с зависимостями. Что скрывают от вас? – капельница от запоя цена

  6. Awesome blog! Is your theme custom made or did you download it from somewhere? A design like yours with a few simple adjustements would really make my blog stand out. Please let me know where you got your theme. Kudos

  7. list of properties in dubai houses for sale in dubai palm island 1 bedroom apartment for rent in al rigga dubai rent a apartment in dubai long term

  8. Эта информационная публикация освещает широкий спектр тем из мира медицины. Мы предлагаем читателям ясные и понятные объяснения современных заболеваний методов профилактики и лечения. Информация будет полезна как пациентам так и медицинским работникам желающим поддержать уровень своих знаний. Нажми и узнай всё – клиника плюс

  9. ashley real estate agent dubai Property For Sale In Dubai cheap studio for monthly rent in dubai moon realty real estate dubai

  10. Этот краткий обзор предлагает сжатую информацию из области медицины включая ключевые факты и последние новости. Мы стремимся сделать информацию доступной и понятной для широкой аудитории что позволит читателям оставаться в курсе актуальных событий в здравоохранении. Тыкай сюда — узнаешь много интересного – clinica plus в твери

  11. В этой статье мы рассматриваем разрушительное влияние зависимости на жизнь человека. Обсуждаются аспекты такие как здоровье отношения и профессиональные достижения. Читатели узнают о необходимости обращения за помощью и о путях к восстановлению. Посмотреть подробности – капельница от наркозависимости

  12. off plan property dubai advertisement villa for sale in meydan dubai family room for rent in al karama dubai capri realty real estate broker llc – dubai

  13. grosvenor house apartments in dubai Studio for Sale in Dubai weekly villa rental dubai lion properties to rent in dubai

  14. emaar new project in dubai Property For Sale In Dubai current property value dubai villas for sale in dubai for 1 million villanova

  17. arab contractor dubai al ghurair properties 2 bedroom apartment for sale in jbr dubai villas for rent near me arabian ranches 3 handover date

  19. В этой статье рассматриваются различные аспекты избавления от зависимости включая физические и психологические методы. Мы обсудим поддержку мотивацию и стратегии которые помогут в процессе выздоровления. Читатели узнают как преодолеть трудности и двигаться к новой жизни без зависимости. Заходи — там интересно – клиника плюс

  20. alamgir agent real estate dubai Villa For Rent In Al Barsha apartments to buy in jlt dubai furnised studio apartment for rent in marina dubai

  22. one bedroom apartment for rent in discovery gardens dubai Apartment For Sale In Discovery Garden Dubai jumeirah beach property for sale buy and sell properties in dubai

  24. Этот обзор сосредоточен на различных подходах к избавлению от зависимости. Мы изучим традиционные и альтернативные методы, а также их сочетание для достижения максимальной эффективности. Читатели смогут открыть для себя новые стратегии и подходы, которые помогут в их борьбе с зависимостями.
    Ознакомиться с отчётом – наркологическая клиника в твери

  25. В этой статье рассматриваются способы преодоления зависимости и успешные истории людей, которые справились с этой проблемой. Мы обсудим важность поддержки со стороны близких и профессионалов, а также стратегии, которые могут помочь в процессе выздоровления. Научитесь первоочередным шагам к новой жизни.
    Продолжить чтение – вывод из запоя на дому тверь

  26. flats for cheap rent in dubai Apartments for Sale in Dubai Emaar luxury affordable apartments in dubai london agents selling dubai property

  27. Эта публикация раскрывает психологические механизмы зависимости и их роль в развитии расстройств. Читатель узнает о том, как психология влияет на формирование зависимостей и как профессиональная помощь может изменить ситуацию.
    Как это работает — подробно – помощь вывода из запоя

  28. rental yields dubai villas Townhouse for Sale in Dubai real estate investment visa 1 bhk apartment in dubai

  29. mint international real estate dubai 1 bedroom apartment for sale in dubai best furnished apartments in dubai luxury off plan properties dubai

  30. доставка порадовала быстро качественно . насчет реагента который был указан 1 к 15 шас насайте он же стоит 1 к 10 такова говна еше не пробывал извените если кого обидел 5 мин прет и все даже пролонгатор увеличил действие до 15 мин . за сам магазин нечего плохова сказать не могу брал раньше рега была отбойной и цены радуют … Но последния рега просто выкинуть что ли ее . сегодня попробую конечно 2 к 10 сделать если не поможет просто выкину .. спср только растраивает такие деньги берут и че то нифига не делают. Посыль уже 3 день лежит в г. Ё-XX. Хотя должны были привезти в близлежащий город. Но тут я узнал то что у нас нет в городе филиала ихнего. Вот и не понятно толи сами привезут толи ехать до них надо. https://muz-instr.ru пробвал уже…классный магазин

  31. ЗАО «Техносвязь» — российское предприятие-изготовитель печатных плат, уже второе десятилетие совершенствующее производство для выпуска продукции высочайшего качества. Подробнее на сайте https://www.techno-svyaz.ru/ — здесь применяют современные технологии и материалы от мировых лидеров. Компания одинаково чётко выполняет серийные и единичные заказы, гарантируя короткие сроки и внимательный подход к каждому клиенту.

  32. house rents after vat in dubai One Bedroom Apartment For Rent In Dubai bayut properties for sale Marina Promenade guide

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>