This article is all about Optimize Images for Faster Page loads. Images enhance the overall appeal of web pages, visitor interaction, and conversion rates; therefore, they are essential components of your visual display.
Although visual appeal is important, time and page load speeds are as well. Many web users will only wait approximately 8 seconds for a web page to load before leaving, which will increase your bounce rates and decrease your conversions. To reduce these potential barriers, I recommend optimizing your images to ensure all pages on your website load as quickly as possible.
Faster page loads are also a plus when it comes to search engines and page rankings. Google offers several tools for monitoring and optimizing your page loads (developers.google.com/speed/).
Image Optimization
1. File Type
To optimize your website images, the first attribute that you should look into is the file type. Even though images are available in several formats, it is advisable that you go for lighter extensions that are appealing, even if you compress your graphic further.
Ideally, to have promising results, your web graphics should be in either of these formats: Portable Network Graphics (PNG), Graphics interchange Format (GIF) or Joint Photographic Experts Group (JPEG / JPG) format. In addition to being light in size, you do not sacrifice quality and clarity.
PNG Extension
The PNG format is a more flexible and efficient design and patent-free replacement for GIFs. According to W3.org PNG formats compress 5 to 25 percent better than GIFs, offer variable transparency, animation, cross platform color correction and gamma correction. Based on this information, when possible, use of the PNG extension will be your ideal type. However, the PNG type is not suitable for photograph images.
GIF Extension
The GIF extension is good for optimizing images that have sharp, high contrast lines, and or illustrations. However, unlike JPEG extension images that have over 250 colors and customizations such as gradient effect do not display well in this format. Ideally, GIF optimized images are good if your website has plain color illustrations such as cartoon characters, shapes, icons, simple line drawings, and less complex images. The GIF type is not suitable for images with gradient colors or photographic images.
JPEG / JPG Extension
If you are using multicolored photographs, illustrations, and or pictures, JPEG / JPG is an optimization format to consider. Generally, JPEG /JPG format have a high color to size compression ratio, and is best for optimizing complex designs and or images that have many hues, color tones, or have a three-dimensional (3D) effect.
If you are a photo blogger or market using high-resolution photos and graphics, you will want to consider using the JPEG extension. The JPEG / JPG type is not suitable for images with large blocks of color, crisp edges, and text.
BMP Extension
The BMP Extension is an uncompressed format and will create excessively large file sizes and will take up the most space on your server; this will also cause terribly slow page loads. Although the file type is usable on the web, this file type should not be used on web pages.
In addition to using a suitable type for your images, I recommend using the same file type throughout your web pages; this also can increase your page loads as well.
2. Image Size
Image size is another vital attribute that you should consider when optimizing your web pages to load faster. Even though there are many tools available to resize and crop your images, you must use good photo editing software for better results. If you re-size your photo in your HTML or WYSIWYG editor, you may compromise the overall appearance of your photo.
Furthermore, you want to make sure you are making your image size as small as possible. You don’t want to resize your image in the HTML or WYSIWYG editor with just height and width adjustments. Doing so will affect your page load time because the file size itself will remain large and now the image is having to be resized on page load in the browser; not an ideal experience for website visitors. A couple of online tools you can use include (www.photoshop.com/tools), (picnik.com), and (tools.dynamicdrive.com/imageoptimizer/)
3. Image Colors
The color of an image not only affects in size, but also the speed with which it loads on different web browsers. Depending on the type of image that you have, you should lower its color without losing details or affecting its overall quality. A quality image editing software is essential in such circumstances.
If your images are simple, and consist solely of natural colors such as black, red, or blue, you can easily lower their level to around 4 to 8 colors without adversely affecting their quality. The key to optimizing images is experimenting. Play around with its colors to have a color to compression ratio that works best for your website.
4. Height and Width
Whenever you add an image to your webpage, make sure that you include its exact width and height attributes in your HTML. Whenever visitors open your web pages, their browsers will detect this marker and know the exact size of the image to display.
Normally, when browsers detect large images, they display the core content of the website first, and load the images slowly. When your image size is resized prior to adding it to your web page, your visitors will not experience this delay.
5. Alt Tags
The opportunity for increased page ranking can be lost when the ALT attribute is overlooked. The Google webmaster guidelines advise webmasters to use alternative text (ALT) for better rankings. Missing ALT tags will lower the page’s score. Search engines cannot see or read what an image is; therefore it relies on the web page owner to add the descriptive text so the search engines can properly label the image when indexed.
Examples of placing ALT text properly:
Not Good < img src=”website.png” alt=””/ >
Usable < img src=”website.png” alt=”website”/ >
Ideal < img src=”website.png” alt=”How to build a website” >
Overall Take Away
The purpose of image optimization is to ensure you are using the smallest file size possible without compromising quality. Smaller file sizes will use less server space, bandwidth, and will simply allow the images to load faster, making it possible for your website visitors to see the full scope of your web page content in less time, which in turn adds to positive user experiences on your site.
Article by Vishal
Meet Vishal Gaikar, the tech wizard hailing from Pune, India, who's on a mission to decode the digital universe one blog post at a time. When he's not tinkering with gadgets or diving deep into the digital realm, you can find him concocting the perfect cup of chai or plotting his next adventure. Follow his tech escapades on Twitter and buckle up for a wild ride through the world of innovation and geekery!
