Optimize Images for the Web Development | JPEG - GIF - PNG
Creating graphics and posting images for your site is one fun thing to do in 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. Logos and small icons are one of the best ways to use for visual cues. A graphic designed properly can change your visitors outlook and/or decision for your site.
Always Optimize Your Images
One thing to remember when creating graphics and images for your site, is to optimize images for the web. What is optimizing? Optimize is a way to compress data to make your file size smaller. One way optimize works is that it will read all your colors and use other color combinations to make similar colors. Optimizing will then discard some colors that will not be needed. But there is a down side to this optimizing. 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 makes it easier for your visitors and search engine bots. If you images or graphic becomes too distorted, raise your file size. 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.
Adobe Photoshop Web Tools
Adobe Photoshop has put this into consideration in some of their new versions. You can now do a File > Save for the Web Options. Adobe Photoshop has a pre-built optimizing process that is very good. You can choose what file type to save in. How much to compression the image and will give you results of the different options selected. If you want to create graphics and photos on a professional end, Adobe Photoshop can get your there.
Types of Web Image Files
Last thing to touch on is JPEG, GIF and PNG. There are so many file types, but what is the best for your site? There is no straight answer to this question, just some things to consider.
JPEG - Joint Photographic Experts Group
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, which is great for photos. If you look at a photo there are no straight lines. Everything is blended together, which why JPEG is great for photos. You can get really good compression out of a JPEG file.
GIF - Graphics Interchange Format
GIF is use more for vector based graphics. A vector based graphic is when a graphic is made of lines and shapes. Vector graphic have sharp corners and 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 plus side to a GIF image. You can save your images with a transparent background.
PNG - Portable Network Graphics
PNG is one the newest graphic technology. 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 browsers don't support PNG. This problem is becoming less and less of something to consider. But there are some surfers that haven’t updated their browsers.
Quickest Time for Loading
Optimizing images and graphics is almost a must in development. Having to big of file size or picture size 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 close to that amount of time, then you might lose them. Time your page in your browser and see how long it takes. If you haven't optimized your graphic and/or images, you should really consider it.
Related Articles
