Take the 2-minute tour ×

Recently found this image:

enter image description here

Original size of image is more than 2MB.

I want to set to background of my project something like that.

I wonder, if it is possible to generate something like that without any image but with new web technologies like CSS3, HTML5 Canvas... or something like that?

If not, how can I reduce size without touching image width and height? is that possible?

share|improve this question
What format is it in and what size does it have? –  Pekka 웃 Feb 15 '12 at 20:03
more than 2m ?! 2 meters? –  Nettogrof Feb 15 '12 at 20:04
@Pekka jpg - 1920x1080 –  heron Feb 15 '12 at 20:04
@Nettogrof 2mb:)) rofl –  heron Feb 15 '12 at 20:04
add comment

3 Answers

It is absolutely possible with canvas.

See: http://js1k.com/2011-dysentery/demo/955



There's also this particle system: http://www.mrspeaker.net/dev/parcycle/

share|improve this answer
Examples has nothing to do with my image))) –  heron Feb 15 '12 at 20:10
Well, I wouldn't say "nothing". They are not your image, that's true, but they should show you how to use canvas and JS to create complex shapes and graphics. It was meant as a starting point. –  Johannes Fahrenkrug Feb 15 '12 at 20:24
add comment

You could create an SVG or canvas element, fill it with your desired pattern, set its size to width:100%;height:100%;position:absolute; and its index to z-index:-1; to push it behind your content. You can't create an image with CSS3, as CSS3 will only enables you to insert an url (img or data://url) (see http://www.w3.org/TR/css3-background/#backgrounds).

To create an image like this with canvas you should learn about the canvas primitives, you can achieve a very basic result with fillRect. Same for SVG, although both are not that well supported in the last generation browser versions. Maybe you wish to create your img by the server and use the CSS background:; property.

share|improve this answer
Seems, it will be impossible from the aspect of backward compatibility. Do you know, good way to radically reduce image size without quality loss? –  heron Feb 15 '12 at 20:25
If the image is abstract and contains the same pattern over and over, you could try PNG. If it contains a very small amount of different colors (less then 255), use GIF. Otherwise use JPEG with a quality of less than 80%, load an alternative JPEG with 100% after your website has loaded completely and replace it. –  Zeta Feb 15 '12 at 20:27
Actually, you can create complex beautiful patterns with just CSS: lea.verou.me/css3patterns But they are patterns, not just any image. –  Johannes Fahrenkrug Feb 15 '12 at 20:28
add comment

1) Yes you can draw something similar with Canvas (the matter of finding right procedures) and even apply it as a css background using Canvas.toDataURL()

background: url(<string_from_toDataURL>)

2) If this image has a lot of repetitive patterns you can try saving it as 8bit PNG. If you are on windows irfan view has a nice ability to decrease color depth.

share|improve this answer
add comment

Your Answer


