Consolidating images - sprites vs Base64 - javascript

On Google some time ago I read an article on optimizing image use. Basically there is a way to combine multiple images...say small icons into one larger image and then use a method to display the part you need for ecah part of the page. Can anyone point me in the right direction on how to do this. Cant' seem to find it on google at the moment. Thanks!

The technique is called CSS Sprites, knowing that will make it easy to find information about it.
You can read about it for example here:
CSS Sprites: Image Slicing’s Kiss of Death
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

This is the best website for this. http://spriteme.org/
It will analyze your website and advise you on what images can be 'sprited' (is that the correct term?) and will generate the new CSS for you and the image(s) sprite(s)

Related

Why does Google include a lot of icons inside their result page's logo? Is it an optimization technique?

A moment ago I found out that the Google logo image of the results page contains a lot of icons (you can see this simply by dragging or inspecting the logo).
I don't think this is a bug so, what's its purpose?
Is it an optimization technique? If so, how it works?
It's called a CSS sprite. It is a performance technique as requesting many small images is costly as it requires a lot of HTTP requests. This only requires one.
Here is a short guide on how to make and use them.
In short: CSS Sprites are a means of combining multiple images into a
single image file for use on a website, to help with performance.

Dynamic pattern in javascript

I am curious as to where to start to make something similar to HERE as I cannot find any information about it. It may be fairly simple and im sorry if it is.
What I am hoping to replicate is the colour grid that generates based on the colours and size of the lines. I am looking to replicate the functionality of the application whereby when the user selects a line and changes the width of that line and it will then calculate the image. I have been looking around but cannot find information about how to replicate it. I may be searching for the wrong thing as javascript is not my strongest language.
I know of a roundabout way to do it with svg but where would I start for javascript/jquery?
I know of a way to do it with svg but where would I start for javascript/jquery?
Well, SVG would involve javascript as well, wouldn't it? You're just looking for different ways to display an image. None is native the javascript, that is just a programming language, you'd have to consider which API to use:
There's nothing wrong with SVG! It even seems to be the easiest solution, maybe wrapping DOM code in some nice drawing library.
It has been demonstrated that such is possible with CSS3 background patterns, although I would consider this rather unusable
Use the <canvas> element! This would be the most genuine HTML5 approach, and even though the api is rather simple there exist mighty libraries.

Image manipulation - Creating characters on fly

I have set of designs needs to be applied to an image and saved. So if you are a user, you come to my page and add mustachio or any other face elements like hair or eyebrows to a face and save your image.
Im looking for a plugin where I can use this kind of techniques and also allow me to save it as an image on fly.
I can see a lot of masking techniques/ plugins used but I'm not sure if these techniques are capable enough to handle such a thing,
Could you please share your thoughts on this?
Thank you all in advance
You may want to look into the element for creating and saving the image.
a good library that can handle multiple canvas's as layers is EaselJS or FabricJS. Both have pros and cons but can handle multiple layered images as output to one.

Javascript 360 degrees panorama

Hi I'm looking for a way to create a panorama view with a 360 degrees photo. I need a solution to do create something like QTVR. There is a lot flash based software out there (I'm trying to avoid that) and also some javascript/prototype/jquery solutions. But none of the solutions I've found have the behaviour I'm looking for. I want to eanable users to look around (just horizontal). Furniture objects on the pictures should react on mouseover, so that I might have multiple "layers" to distort. Is there a way to manipulate images in pure javascript or with jquery so, that it looks like they where bent cylindrical? Or does anyone know good libraries that support that kind of image manipulation? Might webgl be a good solution? I don't really know how to start. Is there anyone who could give me a hint. I'm just looking for a direction. google didn't bring me usable results.
Check out three.js
http://mrdoob.github.com/three.js/examples/webgl_panorama_equirectangular.html
Also, you could possibly do some of the image manipulation via canvas.
https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas
It might be easier (with canvas) to just have a fully processed panoramic image, and figure out which pixels represent your interactive object. Then listen for mouseovers on those pixels.
try out http://panorado.com/en/PanoradoJs.php
There you'll find an excellent HTML5/JS based Viewer.
There are lots of tool to do that. Have you tried www.vtility.net ? Im not sure if it had mouse over layering. But it was the only SEO friendly that I have found.

how to load a huge image on the style of google maps?

i would load a huge image in my web page (8Mpx x 5Mpx). I thought of creating a simple mechanism on the style of google maps..
But, honestly, I do not have very clear ideas on how to implement it.. any advice on how to structure it?
in particular, I have many doubts about how to handle the drag with the asynchronous loading of the image to vary the portion of the images displayed
Thank you in advance for your help : )
An easy answer would to be use Google Maps.
It's a rather advanced topic, but it shouldn't be any harder than doing it by hand.
Here is more information
I've used Zoomify's products in the past to accomplish this. I work on a team that manages a few datacenters, so we have some gigantic floor maps (drawn up in CAD, exported as a huge image). I take those maps and convert them to what I consider a "Google style map" using Zoomify Express (free).
More info here: http://www.zoomify.com/express.htm
I realize this is an old question, but I'd like to suggest http://leafletjs.com/.
I can only think of some sort of tiles. You break down the image in several parts ( tiles ). Then you only draw the one that are in your viewport.

Categories