They chain of classes used to construct and make one single marker in OpenLayers is a bit difficult to follow, but isn’t impossible. There are three main classes in three files:

Markers.js
Layer/Markers.js
Icon.js

That’s why after tracking the code in them I noticed the library’s using appendChild in a line like that:

this.div.appendChild(markerImg);

The problem is that if you’ve a loop with probably hundreds of iterations this is really slow. What I intent to do is to return only the generated code as string, or instead of returning the element, I can return the string. Than concatenate it after the loop’s over.

That will be way faster!

• HTML
• CSS
• JavaScript
• Flash or Silverlight
• Server side scripting language, like PHP, ASP or whatever
• Database server

I’d like to add one category more and that’s the images we use in every website to construct the desirable layout. They are extremely important when optimizing a web page, because almost always they make more than half of the traffic of a page.

In few posts I’ll write what and how can be optimized, according to my experience and according to the articles I’ve read. I won’t mention again why the optimization is important – I’ve written already some posts about that and the web is full of articles.

As I can say nowadays this is the most important topic of the web development. Almost everyone’s speaking about it and I’d like to give some references in my talks, just to make it more clear and to give you some basic points from where you can start optimizing.

When a website is developed common scenario is to put all of your images used in the UI in a .css file. Yes some did not use it, which I think is too much old school, but however maybe 99.9% did make it that way. In fact in nowadays sites we’ve more and more rounded corners, more alpha in our images. But what’s a sprite at all.

Well imagine you’ve 20 of these images requested in you .css file, if we suggest we’ve only one stylesheet file. Than when your page is rendered into a browser there must be 20 requests to the server for those images. And so many requests may really slow down your page load. Using only one image with correct

background-image
background-position

properties in you css make your site load really fast.

What’s website optimization?

Most of the beginners think that a website is always fast. That’s true until you start making really big sites. Like Youtube, Vimeo, Yahoo, etc. Take a look at their css files and the background images in them. Yes, they are using sprites – those big images containing all of the background needed for the page. And than the page load may become much faster.

How a sprite can change my load time?

In my case the site loaded for 4 to 5 seconds on a normal speed connection. Than only by making a sprite from our 10 images in the background, it became between 3 and 4 sec. That’s 20%, and 1 second is not so bad in todays’ web space.

How to make it?

You must make your background images as one sprite. At all that may become good practice for the future where for sure there will be only that way. OK, but how I can make it. Well you can generate it online simply by using something like http://spritegen.website-performance.org/ or you can make it alone with some image manipulation programe as GIMP or Adobe Photoshop, it’s up to you.

For those who don’t know base64 it’s an encoding format for any data. In that case with the images we can simply say, that base64 equals to text (string) representation of the image itself. In most cases you’ve image tags with src attribute pointing to the http source of the image.

Overview of the problem

Let’s say we’ve a HTML document with 100 images into. That’s a rare case I agree, but sometimes it happens. You’ve to preload the thumbnails of an image gallery where only one image is displayed in a bigger size. As I mentioned before the progressive JPEG suits better for a large image but for the thumbnails you’ve to use baseline JPEGs.

Note: In fact the technique with base64 representation of the images is not well known. I think that’s because there are not so much examples with pages with more than 100 images.

But anyway. We’ve the HTML document with 100 images (100 <img> tags). That means directly 101 requests/responses from the server. In my tests on my localhost, which is supposed to be fast enough, that case loaded 2 MB with a simple small JPEG for the image, loaded 100 times, and approximately 3 seconds. Which yet again on the localhost is extreamly slow. The image is on my machine, the server is here… what else?

How to put the images inline?

The other way to do that is to put all you images in you HTML document. Than the first and more important rule for optimization (see more here), to make fewer requests is done. You now have only one request. And with the response you’ve all 100 images. That’s good when you’ve different images, cause every repeatable element in your CSS should be made with HTTP request once and than repeated with the CSS. In other way you risk the size of the document transfered in the web.

The results

The second case with the inline images and the only one request is giving me an average response time of 900ms. The size of the document is bigger, yes. I had 5KB for the HTML with no base64 images, and then the size increased to 45KB. That’s 9 times more. But however 45KB is nothing for the web, instead of all those 2 MB in the previous test.

How to make your images to strings?

Speaking in PHP terminology there is a function called base64_encode, which with a combination of file_get_contents(imagefile), make the files a base64 string.

Is there any issue?

Yes there is. First you cannot have your image files in a remote server, cause file_get_contents must read only from the local filesystem. Than if you process all those files before returning them to the client, where’s the point? You lose all that time you’ve spent with the technique.

The reasonable solution

I think this technique is good for cases like the one described at the beggining. You’ve a page with more than 100 images. Then you’ve the base64 representation already. Let say you have it in your database as string and don’t need to convert it everytime you return the image. That may happen on upload of the image and the image enters the database with its base64 representation, and it’s done.

In a series of articles I’ll share what’s my experience with image optimization. Of course the most images you have the most page weight you have. That’s why optimizing your images should be your primary task.

Image Formats

First, I’m gonna mention several formats, which everyone of the webdevs are using widely. There are GIF, JPEG and PNG, where PNG can be either PNG8 and PNG24 (PNG32 is also available as name of that format).

What are the differences between them and when to use one or another?

Well some of us just use one or another even without knowing the difference or without thinking about the optimization. I remember when I just put the images in JPEG with no idea what are the other formats before.

In fact all the formats has pros and cons.

JPEG

The JPEG format can be either progressive or baseline. The difference is that the progressive JPEG can be loaded directly in the browser with very low quality and then to load with better quality. Some experts insist that this is old school, but I don’t think so. When the image is not the required one (think of a wallpaper preview) the user can skip and go to another without waiting the hole image. The baseline JPEG is loading the good quality image but starting from top to bottom. With portions of the image.

IE and progressive JPEGs

Of course the Internet Explorer 6 don’t support the progressive downloading of an JPEG even if it’s progressive. Well this is no issue till the IE loads the image like a baseline JPEG.

Which JPEG is progressive and which is baseline

You can certainly make some test to determine which JPEG is progressive and which is baseline, from the loading behaviour in your browser. If you’d like to convert an image to a progressive JPEG or baseline you can use a free open source programs out there in the wild online space. Once they are converted to one or another format you can use them widely. Because most of the tools are comand line open source tools you can automate them on the server where the user uploads it’s images. Now every big image can be converted to be progressive.

When to use progressive and baseline JPEGs?

Well the tests show that for images small than 10 K best compression you get with baseline, and for bigger images the small size you get is with progressive JPEGs. There’s the rule use the baseline for thumbs and progressive for any other big image.

GIF

This format is well known from the early ages of the web. It allows transparency and animation. Actually the problem with the GIF images is that they don’t support semi-transparency which is a problem nowadays. Today the web users are used to good quality images and somehow the GIF is not suitable. But it’s still the most used format for icons and of course animations.

When should I use GIF?

Well as I’ll mention in a while the PNG8 is a better format than GIF for transparent small icons. But if you should use some kind of an animation like ajax loading circle (or bar) the GIF format is suitable for you. Than you must use a GIF.

PNG

As I said PNG can be either PNG8 or PNG24 (which is also called PNG32). Actually PNG8 acts just like GIF, with the important exception that it supports semi-transparency, but yet again on every browser except IE6. In IE6 the PNG8 is just the same like GIF which is not so bad. If you’d like to use GIF for an icon, you should make it PNG8. There are semi-transparent pixels (except IE6 and above) and you get better experience on other browsers than GIF.

PNG32 transparency?

In fact PNG32 is not transparent on IE6 (on transparent pixels IE puts some kind of gray pixels). There you can use AlphaImageLoader filter, but that can dramaticaly slow down your browser, so it’s not a good idea.

You should avoid the PNG32 transparent images and the usage of AlphaImageLoader filter.

Conclusion

For every of these formats there lots of tools that remove system information from the image crash and crunch the files so that they become smaller. They can be automated and used on the server.

Now when you use different formats you can be aware of the differences between them and to use the appropriate ones.