Optimizing images for the web is a tricky business. You have to get the right balance between filesize and picture quality. It is an essential step though. Look at any webpage, and you will see that most of its load time comes from images. Your website will be needlessly slow if you don’t drop the sizes of these images.

There are three key areas where bytes can be shaved off your graphics: bit depth (number of colors), resolution, and dimension.

Minimalist design is a definite trend in the high-traffic. Something that many people forget is that the best way to optimize your images is to not use them at all. Cutting out needless graphics is the easiest way to optimize your pages. So, you should always be looking for ways to lessen your graphics-usage, and to get more out of every one that you simply must use.

Which Format?

One of the more common mistakes which lead to bloaty images sizes is people using the wrong file format for the job. The simple rule to follow is this:

• GIFs should be used for the bulk of your images. Simple line drawings, shapes, small icons, nothing too complex. You won’t lose any detail because GIFs are ‘loss-less’, but you can drop the palette down to cut a GIF down to size, and maybe up the dithering if you don’t like the blocks of color you’re left with. Often, however, dithering will increase the filesize, so get the balance between colors and dithering right.
  Horizontal blocks of color compress better than vertical ones in GIFs (to understand this, have a look at this » example). If your image is going to be big no matter what you do (like most images with big dimensions), save the GIF as interlaced. This serves a blurry version of the graphic first, and gradually paints over with the finished image. This increases the filesize by a bit, but causes the perception of faster downloading.

• JPEGs should be used for photographs and blurry background tiles where little of the intended look will be lost by the JPEG’s compression. If a graphic needs to be accurate or sharp, stay well away from JPEGs. Just remember, most people would rather have a slightly bigger download than a messy graphic, so try not to sacrifice too much quality. Sometimes a nice effect can be had from compressing an image as a JPEG - mess around and see what you can get. Again, for big images use the progressive option when saving for the apparent speed-boost it causes.

• Never use bitmaps  for anything.

Chop and Replace

Some of the images on your site can be dumped without much trouble. Fancy animations that add nothing to the page and only serve to distract; graphical links (replace with text links); image rollovers; and big headings for a page can be lost in favor of large text headings with an appropriate font face and color.
Now we come to one of the worst crimes in images: GIF text. This is when you use a special font and put it in an image, because the reader may not have that font and so wouldn’t see the words as you intended. This is bad. Never put text in GIFs (or do it as little as possible). It is needless excess. Very rarely does it benefit a page to have a certain font in place, usually a fancy font can be replaced by a more common font and it will look just as good. If you need text over an image, set the graphic as a table background, then put the text in the table.

Palette size

Often, a small sacrifice can lead to big gains. Drop back the colors used in your GIFs, bump the dithering up a bit to make up for the missing colors and you can cut the file size in half with little noticeable effect on the image quality.
Using the web-safe palette is often the easiest route to small file sizes. Because with that palette, you can export an image in Paint Shop Pro stripped down to just 2 colors, where other groups only allow you to go as low as 17 for instance. If you have no idea what I’m talking about, get yourself a copy of Paintshop Pro.

Making your own images instead of ripping other people’s is a good idea too, because you can design them to be faster (not to mention the copyright stuff). Also, always have the images you’re using with the rest of your files on your server. Don’t link to other people’s images, because this is slower than using your own (the browser has to go off looking, plus the other person’s server might be slow).

Check what resolution you’re creating your images at. The same size image can change drastically in size if it is at a higher resolution.

Use the crop tool in your image editor to cut out everything but the essential parts of the image. As a bonus, these essential parts of the images take up less space on your page, and your readers will be thankful that they didn’t have to see any rubbish.

Another way of achieving this is to use a thumbnail image to link to the main image. This means you make a smaller (in physical size and filesize) image, and make it a link to the full version, which gives the user the choice whether to download the full graphic if they like the look of it.

Stating the height and width

You should always, always include both the height and width attributes in your graphics. It means the browser knows what size the image is going to be, so it can continue on loading the rest of the page without having to worry about the graphic suddenly loading and pushing everything else around. The page will look far more developed if everything is laid out correctly straight away, increasing the apparent speed of the page. It also means that if a reader is in the middle of reading something, the text won’t suddenly shift down when a graphic above begins loading, as the browser will have given it all the space it needs.

Another bonus is that anyone with images switched off will still get the same layout as people who have them on, avoiding the possibility of the page looking messed up without images.

Never use these attributes to make an image appear smaller. Your readers will be downloading massive pictures when they only need small ones. That’s just crazy… If you want a smaller image, resize it in your graphics program. A smaller-looking image will not be any smaller in filesize.

To increase the effect more save as many of your graphics as interlaced as possible. This will make them download a rough version first, and then add detail later. This is great because a page with a pile of half-loaded graphics looks a lot more alive than a page with one or two finished images. This option is more useful for big graphics.

Using the Cache

A browser’s Cache is an area on the hard drive where it stores recently used images. If you go to a new page and your browser sees the same image file being called on, it can just pop it back up from the Cache, skipping the download process altogether. This means super-quick loading for many of your common images. This is why using the same images site-wide is great for speed - they download once and you can use them a hundred times without having to do it again. You could also try pre-loading some images for quick display. 

Check your server

As with all things to do with optimization, your work will be pointless if the server your pages and images are on is slow. Not only do images take time to download, but a slow server will make your reader wait before they can even start downloading it (only four things can download simultaneously, as far as I know). This can add loads of ‘empty’ time, where nothing is actually being added to your page. If you aren’t sure, ask some people on a newsgroup or something about a fast host, or ask them for their opinion on the one you’re currently using. The slowest images are the ones that aren’t there. When you call for an image in your HTML, but the image isn’t at the specified location, the browser does a few checks to make sure. This slows a page load down a lot, as all the browsers power is transferred to this search. Only once it has confirmed the file is missing can the browser continue the loading of the page. Don’t let this happen. Not only is it slow, but a user loses a lot of trust in a site that lets this happen. Get a link checker and make regular passes over your site.

Another thing to remember: when you optimize an image, and cut down its file size, you might think the difference in download speed will be negligible and you shouldn’t bother. But then think about this: if you cut 40% off the file size of every image you optimize, you have cut almost 40% off the combined size of your entire page for every reader (That’s a lot of extra speed).

By Jeremy Thompson 

About the poster: Jeremy Thompson is an Interactive Web & E-Commerce Consultant for Revolution Web Studios, consulting on web technologies for small business. You can reach him via email at Jeremy @ revolution web studios dot com.

Internet and human feelings, where will it lead and what will it mean for you, for us. 

Recently I was taking a break here at work and decided to check one of my favorite channels on Dish Network, Current TV. They were doing a Internet Pod on a couple of gentlemen, (Jonathan Harris and Sep Kamvar) who created a website that records human feelings from around the world. Being on the internet constantly and consulting clients on small business website technologies all day long,  I decided to check out this www.wefeelfine.org for my self.

Jonathan has done some pretty outragious work combining elements of computer science, anthropology, visual art and storytelling, designing systems to explore and explain the human world. He has made projects about human emotion, human desire, modern mythology, science, news, anonymity, and language, and documented an Alaskan Eskimo whale hunt. He was commissioned by Yahoo! to build the world’s largest time capsule, and by MoMA to build an interactive installation about online dating. He studied computer science at Princeton University, and was awarded a 2004 Fabrica fellowship. The winner of two 2005 Webby Awards, his work has also been recognized by AIGA, Ars Electronica, and the State of Vermont, and exhibited at Le Centre Pompidou and New York’s Museum of Modern Art.  He lives and works in Brooklyn, New York. See website.

Sep Kamvar is a consulting professor of Computational Mathematics at Stanford University and chairman of Wildflower Capital, a seed-stage venture fund focused on technology and renewable energy.

His research focuses on information management in large-scale adaptive networks such as the web, peer-to-peer and social networks, and markets. He also is interested in using large amounts of data and accessible media in the study of human nature through art. See website.

The thing that intrigued me the most about the website www.wefeelfine.com is the equations of compounded personal information. Information that is a mixture based on atmosphere, human emoitions while involving massive thought processes. Then creating a working website that brings all that together. I find myself visiting it often, I think the attraction for me is the factor of humans wanting to experience what other random humans are feeling and or experiencing.

We discuss the We Feel Fine website at work and sometimes getting into debates on whether it is psychological science or a applied science. Some feel that it has absolutley nothing to do with psychology and that is is just a random collection of peoples feelings from around the world.

That is a truth, but what it does is cause a person to mentally pilfer through their own human experiences and what they are feeling and experiencing while seeing the feelings and experiences of others. The key point in me writing about this website is the fact that James and Sep took the idea of real human feelings and emotions and created a internet portal totally based on human factors and environment. It will be interesting to see what this leads to and how this kind of human emotional measuring is used in the future.

 Payment

Online shoppers commonly use their credit card for making payments, however some systems enable users to create accounts and pay by alternative means, such as:

•  Debit card
•  Various types of electronic money
•  Cash on delivery (C.O.D., offered by very few online stores)
•  Cheque
•  Wire transfer/delivery on payment
•  Postal money order
•  PayPal
•  Reverse SMS billing to mobile phones
•  Gift cards
•  Direct Debit in some countries

Some sites will not allow international credit cards and billing address and shipping address have to be in the same country in which site does its business. Other sites allow customers from anywhere to send gifts anywhere. The financial part of a transaction might be processed in real time (for example, letting the consumer know their credit card was declined before they log off), or might be done later as part of the fulfillment process.

While credit cards are currently the most popular means of paying for online goods and services, alternative online payments will account for 26% of e-commerce volume by 2009 according to Celent.

Product delivery

Once a payment has been accepted the goods or services can be delivered in the following ways.

•  Download: This is the method often used for digital media products such as software, music, movies, or images.
•  Shipping: The product is shipped to the customer’s address.
•  Drop shipping: The order is passed to the manufacturer or third-party distributor, who ships the item directly to the consumer, bypassing the retailer’s physical location to save time, money, and space.
•  In-store pickup: The customer orders online, finds a local store using locator software and picks the product up at the closest store. This is the method often used in the bricks and clicks business model.

Shopping cart systems

• Simple systems allow the offline administration of products and categories. The shop is then generated as HTML files and graphics that can be uploaded to a webspace. These systems do not use an online database.
• A high end solution can be bought or rented as a standalone program or as an addition to an Enterprise resource planning program. It is usually installed on the company’s own webserver and may integrate very well into the existing supply chain so that ordering, payment, delivery, accounting and warehousing can be automated to a large extent.
• Other solutions allow the user to register and create an online shop on a portal that hosts multiple shops at the same time.
• Open source shopping cart packages include osCommerce, Magento and Zen Cart. Virtuemart is a shopping extension for the extremely popular CMS Joomla.

Commercial systems can also be tailored to ones needs so that the shop does not have to be created from scratch. By using a framework already existing, software modules for different functionalities required by a webshop can be adapted and combined.

Let Revolution Web Studios combine your vision and our experience to design the custom web site and provide all the services you will need to succeed.  Revolution Web Studios uses the most sophisticated software, programming, research and knowledge to create your ‘dream’, online store.  We at Revolution Web Studios will make sure your vision is kept strong with the design you want.  Here at Revolution Web Studios, we design custom websites and provide dependable services and stay true to our words. With a wonderful pool of talent and Revolution Web Studios‘ top-notch management, our custom website design company is providing some of the best turn-around times for any website project.  We will hold your goals and objectives as our very own.  Combine Revolution Web Studios’ high standards with our high quality service and affordable pricing and your search is over.  Let Revolution Web Studios bring your idea to life.  We can and will make it happen.

NOTE: Some definitions in this article were taken from Wikipedia, a free-content encyclopedia on the Internet.