Images, Sprites, and SVG’s, Oh my!

Images, SVG’s, and Sprites all aim to do the same thing, present an image to the user. Their end goal is the same but it is about how they get there that is so interesting.

The image is the most common form of media on the internet.  If you do a quick image search on google you can get millions of them in less than a second. Loading an image into a website simply consists of the browser following the path to the file then rendering it (calling it forward) on the screen for the user. There are many pros and cons to using basic images.

Images are very useful when it comes to displaying content because images tend to be in common formats such as jpg or png, since most computers include software to edit photos of these formats. Images also excel in the fact that they can be saved directly from a web page to one’s personal computer.

The disadvantage of images is they are difficult to scale for mobile and are slower to load than other formats. For instance, images that are low resolution tend to look very poor when the screen is enlarged. Also, for a large site, containing multiple images, will have load times that suffer since each image has a request to the server to bring it up. One format that can overcome this problem is known as ‘sprite’ format.

A sprite is a single image that contains all the images needed for your site. Imagine that all the images on your website are like a sheet of stickers and imagine that the webpage is a greeting card. If you use traditional images on a site this would be like walking across the room each time to grab each sticker and place it on the greeting card. This would be incredibly slow. Now loading a sprite would be the equivalent of walking across the room and grabbing the entire sheet of stickers walking it over to your greeting card and placing them all on right there. For just a few images the savings won’t be that drastic but as a site gets larger and images become more numerous, this can result in real page load savings.

The downside to sprites is that they are much harder to manipulate. It must possess the correct dimensions upon the creation of the sprite and cannot be manipulated after. The best cases for a sprite would be images that will not change frequently. So how can you have an image that is easy to manipulate and easy to scale? This is where Scalable Vector Graphics (SVG’s) come in.

SVG’s are great because you can scale them as large as you want and not worry about them becoming pixelated and grainy. That’s because they are made of mathematically defined shapes and vectors instead of pixels like images and sprites. SVG’s are most advantageous for simple images such as logos and icons. This is because the simpler the shapes are in the image the easier it will be to define them in vector format. Because of the way they are stored modifications can be made right in the html and CSS. If set-up properly the colors can even be changed. This is an extremely flexible format that looks great at any size.

To wrap up images are easy to implement and are best for large images that are going to be changed frequently. Sprites are best for smaller complicated images that will not be changed frequently. Lastly SVG’s are best for simple images or Icons that can be scaled or modified based on the use case. When in doubt, contact Stellar Blue to discuss the best options for your graphic design and web needs!