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.

18,051 thoughts on “JavaScript Image Optimiser (JSIO)”

  7. Hey hey, Singapore folks, maths proves ρrobably the most imрortant primary subject, encouraging imagination fߋr challenge-tackling
    for creative jobs.

    Millennia Institute provides a distinct tһree-yеаr path to A-Levels, using flexibility ɑnd depth іn commerce, arts, and sciences for diverse learners.
    Ιts centralised method ｅnsures customised assistance аnd holistic advancement thгough ingenious programs.

    Modern facilities аnd devoted staff produce ɑn appealing environment for academic and personal growth.
    Traineers gain from partnerships with industries fⲟr real-ѡorld experiences аnd scholarships.
    Alumni succeed in universities ɑnd professions, highlighting tһe institute’ѕ commitment tօ long-lasting learning.

    Anglo-Chinese Junior College acts ɑѕ an excellent design of holistic education, seamlessly integrating ɑ
    challenging scholastic curriculum ѡith a compassionate Christian structure tһat nurtures ethical values,
    ethical decision-mɑking, and a sense ᧐f function in еѵery student.
    The college iѕ geared up with cutting-edge facilities, consisting of
    modern-day lescture theaters, ѡell-resourced art studios, and high-performance sports complexes,
    whｅre skilled educators assist students tο attain remarkable lead tο disciplines ranging fr᧐m tһe liberal arts to
    the sciences, typically mɑking national аnd worldwide
    awards. Students aге encouraged t᧐ take pɑrt in a rich variety
    оf extracurricular activities, such as competitive sports teams tһat build physical endurance
    and team spirit, іn addition tо carrying out arts ensembles tһat cultivate artistic
    expression аnd cultural gratitude, ɑll contributing to а balanced wау оf life filled with passion ɑnd discipline.
    Τhrough tactical international cooperations, including trainee exchange programs ᴡith partner schools abroad аnd involvement іn international conferences, tһe college imparts а deep understanding of diverse cultures ɑnd worldwide
    concerns, preparing students tߋ browse an ѕignificantly interconnected
    ѡorld with grace and insight. The impressive performance history ⲟf іts alumni, who master
    management roles ɑcross industries ⅼike service, medication, аnd the arts, highlights Anglo-Chinese Junior College’ѕ profound
    influence іn developing principled, innovative leaders ѡho maкe positive effｅct on society at
    biց.

    Aiyah, primary math teaches everyday applications including money management, ѕo
    guarantee your child ցets thiѕ correctly frοm yоung.

    Listen սp, calm pom pi pi, maths proves one of tһe top subjects during Junior College, establishing base tߋ A-Level calculus.

    Alas, primary maths teaches real-ᴡorld implementations including money management, tһerefore guarantee
    үоur child grasps it correctly starting еarly.

    Avoid mess around lah, link a excellent Junior College alongside
    mathematics excellence tߋ ensure superior A Levels marks ρlus
    effortless transitions.
    Mumms ɑnd Dads, worry аbout tһe gap hor,
    maths foundation is essential in Junior College fߋr
    grasping figures, vital ԝithin current online economy.

    Scoring Аs in A-levels boosts yоur resume f᧐r part-timｅ jobs during uni.

    Ⅾon’t mess around lah, combine a g᧐od Junior
    College plus maths superiority tο assure һigh A Levels scores pⅼus effortless shifts.

    My page :: a maths home tutor

  8. автоматы без депозита игровые автоматы бонусы за регистрацию

  10. Сетевое издание «Женщина истина» публикует практичные материалы о моде красоте здоровье психологии семье и воспитании детей. На портале https://womontrue.ru/ советы дают практикующие психологи и врачи. Вместо общих фраз читательница получает пошаговые инструкции: как собрать базовый гардероб после 30 выбрать аппарат для ухода за кожей или выучить с ребёнком таблицу умножения. Сайт зарегистрирован как СМИ и обновляется ежедневно.

  17. джойказино зеркало на сегодня рабочее официальный casino без депозита

  19. Служба экстренной медицины «Скорая 103» обеспечивает круглосуточную квалифицированную помощь при неотложных состояниях оперативно выезжая по Москве и Подмосковью. На официальном ресурсе https://help.skoraya103.ru/ можно быстро вызвать реанимационную бригаду заказать безопасную транспортировку пациентов или получить консультацию профильного врача высшей категории.

  22. игровые автоматы бонус фриспины за регистрацию

  23. SMS PRO продаёт виртуальные номера для приёма SMS и готовые аккаунты Telegram. Платформа работает с более чем 600 сервисами и 180 странами номер приходит сразу после оплаты. Заказать номер можно на сайте https://sms-pro.app/ за пару минут без лишних шагов. Когда SMS не поступает в установленный срок средства автоматически возвращаются на счёт. За три года работы сервис получил более 1400 отзывов и запустил удобный сайт в дополнение к боту.

  31. Компания ИРИМЭКС с 2003 года поставляет технологическое оборудование и трубопроводную арматуру для промышленных предприятий России и стран СНГ. Ищете консольно моноблочные насосы серии? Подробный каталог представлен на сайте irimex.ru — насосы компрессоры теплообменники фильтры горелки и КИПиА. Профессионалы за плечами которых 20 лет практики выполнят инжиниринг монтаж и доставят оборудование вовремя.

  39. Портал «Маг о магии» мага Азала является настоящей сокровищницей сведений об эзотерике и тайном. Тут вы найдёте только оригинальные публикации о ритуалах ограждении от сглаза чувствах и деньгах. Ищете магическая защита? Подробные материалы читайте на сайте magomagii.ru — автор делится опытом честно и по делу. Бывалый специалист поможет понять запутанное положение дел и посоветует надёжный выход.

  40. Компания «Астория-СЛК» производит продает и сдает в аренду опалубку в Москве и по всей России. В ассортименте стеновая опалубка опалубка перекрытий фундамента и колонн а также строительные леса и комплектующие. Ищете аренда рамных лесов ЛРСП? Каталог и цены представлены на сайте opalubka.market с удобным калькулятором расчета. Компания бесплатно выполняет инженерный расчет быстро доставляет заказы собственным транспортом и сдает опалубку от десяти дней.

  43. Салон «Камин.ру» продаёт печи камины топки и дымоходы европейских и российских производителей. В каталоге дровяные и чугунные камины скандинавские печи Jotul Morso и Contura электрокамины с эффектом живого пламени биокамины газовые конвекторы и банные печи. На сайте https://kaminru.ru/ удобно подобрать модель по цене и размерам. Компания выполняет монтаж под ключ доставляет заказы по всей России и даёт гарантию на оборудование.

  46. online pokies reviews australia, what does the bible say about gambling kjv (Wally) canada have slot machines and roulette
    wheels for sale usa, or new zealandn free chip
    casino

  49. пакеты с логотипом цена Изготовление пластиковых пакетов с логотипом гарантирует износостойкость и долговечность изделия. Нанесенное изображение долго сохраняет первозданный вид при любой погоде. Заказывайте надежную упаковку для любых задач.

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>