Optimize Images for the Web Development

Creating graphics and posting images for your site is one fun thing to do in web development. Nothing makes your site stand out better than some great images.

Graphics and images can be used for entertainment, professionalism or a visual queue. A graphic designed properly can change your visitor's outlook and/or decision for your site. It is important to you have images ready and optimized for your website.

Optimize Your Images

One thing to remember when creating graphics and images for your site is to optimize. What do you mean by optimization?

Optimization is a way to compress data to make your file size smaller. One way optimization works is that it will read through all the color of the image and use other color combinations to make similar colors. This will then discard some colors that will not be needed for the particular image. But there is a downside with optimization. You will lose quality in your graphic and/or images.

Quality vs. Size

When optimizing your images watch the quality compared to size. You want the smallest size possible for your site, making your site load faster. This will make it easier for your visitors and search engine bots.

If you image or graphic becomes too distorted, raise your file size. You don't want a pixelated image on your site. You want your images to look good and professional. You just need to find a balance between having a clean professional picture and having a decent small file size.

Image Optimization Tools

Adobe Photoshop has put this into consideration in some of their new application versions. You can now do a File > Save for the Web Options and Adobe Photoshop has a pre-built optimizing process that is very good. You can choose what file type to save in and how much to compression and optimization. Adobe Photoshop is an expensive commercial program, another option is using Dynamic Drive's Image Optimization.

Types of Image Files

Last thing to touch on is JPEG, GIF and PNG. There are so many file types, but these are highly recommended for web development.

JPEG

JPEG is a compressed file that has very good quality standards. Because of its compression, colors and data are squeezed out of it to create smaller file sizes. This can cause some blur with images with sharp edges, which is great for photos. If you look at a photo there are no straight lines or edges. Everything is blended together, which why JPEG is great for photos. You can get great optimization out of a JPEG file.

GIF

GIF is used more for vector based graphics. A vector based graphic is when a graphic is made of lines and shapes. Vector graphic have sharp corners, edges or text. When dealing with graphics like described, it is better to use a GIF rather than a JPEG. A JPEG could case distortion on your sharp lines. GIF can also be use for animation. Frame by frame animation saved as a .gif will animate on your page. Transparency is another feature that GIF can support. You can save your images with a transparent background.

PNG

PNG is one of the newest web graphic technologies. PNG is great for quality and file size. You have the best of both worlds in a PNG. PNG can also support transparent backgrounds. The only downside to a PNG file is that some old web browsers don't support PNG. This problem is becoming less and less a concern. But keep that in mind.

Quickest Time for Web

Optimizing images and graphics is almost a must in web development. Having big file sizes could cause some of your visitors to leave your site. If your site is too slow to load, you need to optimize immediately. Rumour is that you have 3 seconds to pull a surfer in. If you site doesn't load in that amount of time, then you might lose them. Time your page in your browser and see how long it takes. If you are under a couple of seconds, you're doing a great job.