The Increasing Importance Of Optimizing Your Blog’s Images

Bandwidth consumption is a common problem for large websites attracting a large number of visitors. Whenever you experience a site that used to be fast, and now it’s slow, it’s most probably due to the bandwidth being used to its limits. Whenever you get an error that says the browser can’t fetch the site at all, it could be because the bandwidth (server) is hit with too many requests, and the server simply can’t handle the load. For a growing website, like Bit Rebels, it’s important to make all the adjustments possible in order to lighten the load on the servers. There are plenty of ways to optimize your website to run smoother during high traffic times, such as when you, for example, get a Digg front page for one of your articles.

It’s important to understand that the server is handling a lot of requests during high traffic times, and it is not all due to the images you have attached to your articles or design. It has as much to do with the coding, WordPress theme, plugins, etc… as it has to do with images. But, if you’re using a lot of large images, the server is working overtime to fetch those images and without optimization, your website or blog will most likely run slow or not load at all until the traffic is down again.

There are many ways to optimize your website, as mentioned, but we will concentrate on the importance of optimizing the images you have on your website.

1. Image Format

Most people don’t understand the difference between a JPG, BMP, PNG, GIF or any other Internet compatible image and what their impact is on the overall site. All of the different formats are, simply put, different kinds of compression of the data the images are built up of. They are all part of the Lossy Compression Format directory.

You might have seen the format RAW on some high end digital cameras. It’s a format that takes in a lot more data (which in turn makes your images look better if printed out on paper), which means they take up several times more memory on your flash memory card than, for example, a JPG image. It’s a Lossless Compression format.

Here is a short description of each of the most popular formats which are directly taken from Wikipedia just to show you what each format stands for as well as what they do to your images.

JPEG (Joint Photographic Experts Group) – is a compression method; JPEG-compressed images are usually stored in the JFIF (JPEG File Interchange Format) file format. JPEG compression is (in most cases) lossy compression. The JPEG/JFIF filename extension in DOS is JPG (other operating systems may use JPEG). Nearly every digital camera can save images in the JPEG/JFIF format, which supports 8 bits per color (red, green, blue) for a 24-bit total, producing relatively small files. When not too great, the compression does not noticeably detract from the image’s quality, but JPEG files suffer generational degradation when repeatedly edited and saved. The JPEG/JFIF format is also used as the image compression algorithm in many Adobe PDF files.

TIFF (Tagged Image File Format) – format is a flexible format that normally saves 8 bits or 16 bits per color (red, green, blue) for 24-bit and 48-bit totals, respectively, usually using either the TIFF or TIF filename extension. TIFF’s flexibility can be both an advantage and disadvantage, since a reader that reads every type of TIFF file does not exist. TIFFs can be lossy and lossless; some offer relatively good lossless compression for bi-level (black&white) images. Some digital cameras can save in TIFF format, using the LZW compression algorithm for lossless storage. TIFF image format is not widely supported by web browsers. TIFF remains widely accepted as a photograph file standard in the printing business. TIFF can handle device-specific color spaces, such as the CMYK defined by a particular set of printing press inks. OCR (Optical Character Recognition) software packages commonly generate some (often monochromatic) form of TIFF image for scanned text pgs.

RAW – refers to a family of raw image formats that are options available on some digital cameras. These formats usually use a lossless or nearly-lossless compression, and produce file sizes much smaller than the TIFF formats of full-size processed images from the same cameras. Although there is a standard raw image format, (ISO 12234-2, TIFF/EP), the raw formats used by most cameras are not standardized or documented, and differ among camera manufacturers. Many graphic programs and image editors may not accept some or all of them, and some older ones have been effectively orphaned already. Adobe’s Digital Negative (DNG) specification is an attempt at standardizing a raw image format to be used by cameras, or for archival storage of image data converted from undocumented raw image formats, and is used by several niche and minority camera manufacturers including Pentax, Leica, and Samsung. The raw image formats of more than 230 camera models, including those from manufacturers with the largest market shares such as Canon, Nikon, Sony, and Olympus, can be converted to DNG.^[2] DNG was based on ISO 12234-2, TIFF/EP, and ISO’s revision of TIFF/EP is reported to be adding Adobe’s modifications and developments made for DNG into profile 2 of the new version of the standard.

As far as videocameras are concerned, ARRI’s Arriflex D-20 and D-21 cameras provide raw 3K-resolution sensor data with Bayern pattern as still images (one per frame) in a proprietary format (.ari file extension). Red Digital Cinema Camera Company, with its Mysterium sensor family of still and video cameras, uses its proprietary raw format called REDCODE (.R3D extension), which stores still as well as audio+video information in one lossy-compressed file.

PNG (Portable Network Graphics) – file format was created as the free, open-source successor to the GIF. The PNG file format supports truecolor (16 million colors) while the GIF supports only 256 colors. The PNG file excels when the image has large, uniformly colored areas. The lossless PNG format is best suited for editing pictures, and the lossy formats, like JPG, are best for the final distribution of photographic images, because in this case JPG files are usually smaller than PNG files. Many older browsers currently do not support the PNG file format; however, as with Mozilla Firefox or Internet Explorer 7, all contemporary web browsers now support all common uses of the PNG format, including full 8-bit translucency (Internet Explorer 7 may display odd colors on translucent images ONLY when combined with IE’s opacity filter). The Adam7-interlacing allows an early preview, even when only a small percentage of the image data has been transmitted.

PNG provides a patent-free replacement for GIF and can also replace many common uses of TIFF. Indexed-color, grayscale, and truecolor images are supported, plus an optional alpha channel.

PNG is designed to work well in online viewing applications, such as the World Wide Web, so it is fully streamable with a progressive display option. PNG is robust, providing both full file integrity checking and simple detection of common transmission errors. Also, PNG can store gamma and chromaticity data for improved color matching on heterogeneous platforms.

Some programs do not handle PNG gamma correctly, which can cause the images to be saved or displayed darker than they should be.^[3]

Animated formats derived from PNG are MNG and APNG. The latter is supported by Firefox and Opera and is backwards compatible with PNG.

GIF (Graphics Interchange Format) – is limited to an 8-bit palette, or 256 colors. This makes the GIF format suitable for storing graphics with relatively few colors such as simple diagrams, shapes, logos and cartoon style images. The GIF format supports animation and is still widely used to provide image animation effects. It also uses a lossless compression that is more effective when large areas have a single color, and ineffective for detailed images or dithered images.

BMP (Windows bitmap) – handles graphics files within the Microsoft Windows OS. Typically, BMP files are uncompressed, hence they are large; the advantage is their simplicity and wide acceptance in Windows programs.

Imagine that you are using a BMP image and there is suddenly a burst of traffic where 10,000 people are trying to load your blog post. The blog post contains 5 BMP images each measuring 5 MB in size. That means that just one person is adding a 25 MB load on your server bandwidth. It quickly rises from there. Imagine there are 10,000 people and all of them are trying to download 5 images that are measuring 25 MB, that means these people all together are putting a load on your bandwidth of 250 GB in a short period of time. As you might understand, the image format you use on your blog or website has a huge impact on your overall bandwidth speed and also your website’s availability.

Conclusion: Use a well compressed image format if you have large traffic on your blog or website. You’d be surprised what kind of decent quality you’ll get even though your images are heavily compressed and optimized. You have the option to chose what quality you like, of course, but it always comes down to what kind of bandwidth and traffic load you have. If your server can take a high bandwidth load then there is no reason not to go with the better quality.

However, you should also remember that speed has become almost a commodity these days as more and more search engines are calculating the time it takes for your site to load and using that information to determine where to put you in the search listings. The faster your site is, the better it will position itself. However, don’t put all your energy into making your site fast. There are still people that are visiting your website, and if it looks all funky due to the use of horrible quality images, then you won’t attract much traffic anyways. Balance is the key here.

2. CSS Instead of Images

Sometimes designers use a single colored image instead of just coding the color using CSS. It’s a common mistake that a lot of designers make, including me, and it’s at the expense of your bandwidth. Sure, if there is a design element that requires the use of an image, like a simple shading, then an image is the way to go. However, the compression could most likely be harder without the quality suffering from it.

In the event that an image is not necessary, you could just use background-color: #000 or background-color: #0f0f0f (depending on the color you want of course).

Understanding the layout and design you want to create is crucial before you start, and it could possibly mean you could take on much heavier traffic when it happens in the future without worrying about your site becoming frozen for a while. However, it’s important to point out that all websites go through growing pain stages when you need to simplify, boost or even change an entire feature or two just to allow for more traffic to flow through the site.

Conclusion: Make sure you thoroughly study your design before you start creating it. That way, you will be able to compress your design into a way more bandwidth friendly website that will withstand a higher load of traffic. You will be surprised about how much you can do with CSS instead of using images. And, even though it’s sometimes easier and faster to use images, it is not always the best route to take.

3. Disable Hot Linking

It is more common than you think that people are using your bandwidth without you knowing about it. It’s called Hot Linking in pure geek. It’s a common problem and could possibly render your website crippled and slow. However, just like with everything, there is a simple solution that you can do to counter the Hot Linking on your site.

By using a .htaccess file prepped to disable the use of your images more than on your own website, you will stop leechers in their tracks before they cause you a loss of bandwidth. All you have to do is to create a file using the .htaccess Generator from Basix and put the file in the image folder where you keep your images. Instead of the images showing up on their site, they will see the red cross show up just like when an image is no longer available or missing.

For a more comprehensive tutorial you can also check out altlabs .htaccess Tutorial. There you will find additional information and instructions on how to keep your images safe from being leeched.

Conclusion: The .htaccess approach is a really effective way of keeping leechers out of your bandwidth consumption. However, there is also a downside to it that you should know about. If you decide to put your images in a secure .htaccess area, then you also prohibit sites like Digg, StumbleUpon and other social media sites to include images when they list your articles or posts.

This can sometimes lead to less traffic if you’re not careful. You have to weigh the benefits with the losses so to speak. It usually boils down to what kind of site you’re running. If you want people to spread your content, securing your images from people is not exactly the way to go about it. However, if you’re running a photography site, maybe it is the best way to keep your material in one and the same place, making sure people go to your site to check it out.

4. Hosting Service

Another really important aspect when it comes to “saving” bandwidth is also, of course, to have the right hosting service that gives you exactly what your site requires. Choose a service that enables you to attract the visitors load your site is meant for. Starting out small isn’t always a bad choice, but make sure you are able to upgrade when the time comes and your bandwidth can no longer keep up with the traffic that your site is attracting.

A common mistake is to go for what is the cheapest on the market only to realize later that you have no way of upgrading, and instead, you have to switch hosting services in order to further grow. Migrating a website can be both annoying and costly, and even though the service you are migrating to is well-equipped, it might not have the same features your website or blog requires, thus rendering it crippled and slow anyway.

Here’s a list of great hosting services that enable you to upgrade without hassle when time comes and you need better and faster servers and more storage space:

VPS Hosting

“SherWeb’s high performance VPS bring you the control of a dedicated server with the affordability, flexibility, and simplicity of shared hosting. Our virtual server technology allows you to grow your server seamlessly as your requirements increase without ever needing to buy additional hardware.”

MediaTemple

“Media Temple hosts websites. Big and Small. For years we’ve taken complex technology and simplified it for the everyday website owner. Our products are designed to be powerful, affordable and relevant. Please take a look around; perhaps (mt) is a good choice for your next project.”

InMotion Hosting

“Our web hosting network is based on the fast and reliable Linux and Unix operating systems. It is monitored 24/7 for any unusual activity and benchmarked continuously for performance. This allows us to immediately respond to short term issues as well as grow our system optimally – keeping it broadband ready and economical at all times.”

BlueHost

“Our technology is really what sets us apart from other companies. We have our own datacenter, we build our own servers, we have our own nationwide fiber network, we build our own custom Linux kernel. In short, because we handle every aspect of your hosting, you can feel confident that if there is a problem you won’t have to deal with 5 different companies to get your problem solved.”

Rackspace

“Fanatical Support® has made Rackspace the world’s leader in hosting. We deliver enterprise-level hosting services to businesses of all sizes and kinds around the world. We got started in 1998 and since have grown to serve more than 99,000 customers, including over 80,000 cloud computing customers.”

Conclusion: Make sure you take in consideration what kind of visitors (audience) your website is aiming to please. That usually enables you to determine what kind of hosting service you should start out with and what the growing pains might be before they occur. Also, be sure about what kind of features you need to best run your website since they have much to do with the use of bandwidth you are going to allocate.

Disregarding the core features will lead to heavy implementation problems later on and should be considered before hand. If you are determined to have the very best service suited for your needs, just sit down and lay out visually what you are looking for and what might be implemented on your site in the long run. This way, you will have a clear picture of your website’s future needs and progression.

Image Sources: [Blend Images / Shutterstock] [Kheng Guan Toh / Shutterstock] [Sergei Chumakov / Shutterstock] [JANULLA / Shutterstock] [luchschen / Shutterstock] – In the order they appear.