How to Optimize Images for the Web

Whilst web designers do not have control over their visitor’s internet connection speed (or possible sluggish speed during peak times), optimizing images for the web is an essential step to ensure that web pages load at a reasonable speed for most of their visitors. This will always be a question of trade-off between quality and file size.

Whilst there are plenty of image formats, only a few of them can be used safely (compatibility or speed) for the web. The three most used format used to save images for websites, which we are going to compare here, are called “JPEG”, “GIF” and “PNG”.

What does “lossy” and “lossless” image compression mean?

Image formats can be divided into2 categories: lossy and lossless.

With lossy compression, the image data is compressed so it means that your image won’t match the original image quality. However, with the appropriate compression parameters, images can still look reasonably good enough on a screen while using a relatively small amount of memory.

On the otherside, lossless means that, once the image is decompressed, you get the same image as the original, without any loss of quality. The drawback is that the file will usually be bigger than with lossy compression so it may take longer to load on your web page.

What determines the best way to optimize images for the web?

The main factors which determine how to properly optimize your images for the web are:

– the dimensions of the final image: regardless of the format used, the larger an image is, the bigger the file size will be, which means increased loading times.

– the amount of details required. This largely depends on your web pages objectives and the technology used by your visitors. For example, if most if your visitors are technologically minded or live in an area where the internet infrastructure is excellent, you may decide to have a less conservative approach than if some of your users have a slow connection or still use old technology: a tool such as Google Analytics can give you some clues about these aspects and much more.

– the quality of your web host: if your web host is slow (in which case, it may be as well to contact them to ask them why it is the case and, if that fails, to change your web hosting company), you will need to make sure that your images are well optimized so that they load at an acceptable speed.

– the web hosting costs: web hosting bandwidth costs money, so if your website is large and has lot of traffic, it may actually save you money to optimize your images the best you can.

– the image placement: images near the top of the site are more visible than images near the footer so you may decide to compress the less visible ones more, because, viewed or not, they all still need to load on your page!

JPEG

JPEG (pronounced jay-peg) is the most common image format for the web. It was created by the Joint Photographic Experts Group and its extension is.jpg.

JPEG uses lossy compression but its degree is selectable. It is usually best for complex or “realistic” pictures, such as photographs, with lots of continuous tones (where adjacent pixels often have very similar colours, like a blue sky with many shades of blue). It is possible to finely tune the degree of compression in order to get the best balance between the image size (expressed in kilobytes or kB) and image quality. Good images editors will allow you to compare original and optimized images side by side and finely tune the image compression using a slider, for example. If the compression is set too high, you will start noticing artefacts so it means you will need to slowly decrease the compression until you’re happy with the results.

The lossy compression has an advantage though: for photographic images, JPG file sizes are almost always smaller than PNG’s, which means that JPEG works well in terms of best compromise between photo quality and file size. So, if you’re putting up a photographic image on a web page, JPG is almost always the best choice.

With graphics though, JPG is usually best avoided as artefacts are often created in the hard edges of graphics or text, which is not pretty, so you will be better off using either the GIF or the PNG formats.

One warning when working with JPEG images, however: because the format is lossy, every time you save a jpeg image, you will lose some quality, so it is good practice to always work on a copy of your original as what is lost in successive savings cannot be restored.

GIF

GIF (Graphics Interchange Format) was developed in 1987 at the request of CompuServe and is still a very common format for the web. The extension for GIF is.gif. It is actually lossless (unlike JPEG) but colour fidelity is not preserved because, being an 8-bit format, you only have a choice of 256 colours or fewer.

Because of its colours limitations, GIF would be the worst choice for photographic images because of their complexity.

On the other hand, GIF works reasonably well with graphic images with fewer distinct colours (simple drawings, charts, bullets or website buttons).

GIF can also do transparency, but not variable transparency like the PNG format, as it only allows one out of the possible 256 colours to be fully transparent: this will work fine with uniform or nearly uniform backgrounds below.

Lastly, GIF has the ability to store several images in one file, to create animations – or “animated GIFs”.

However, unless you want to use GIF for background transparency for older browsers (Internet Explorer 6 and below) or create animated GIF’s, GIF is now obsolete due to the development of a more modern format, PNG.

PNG

PNG (or Portable Network Graphics, pronounced “ping”), is a bitmapped image format that employs lossless data compression so there is no loss of image data. The extension for PNG is.png.

PNG was created to improve upon and replace GIF because the latter is patented (LZW compression, patented in 1985 by Unisys corporation) and not free (commercial developers who include the GIF encoding or decoding algorithms would pay royalties). So, unlike GIF, PNG is a universal format which does not have any patent restriction and is endorsed by the World Wide Web consortium (W3C).

Being a more recent format, PNG compression is superior to that of GIF. The PNG format is very flexible as there are fifteen possible colour options (up to 64 bit true colour).

The most common PNG formats are PNG-24 (24 bits, best for complex images) and PNG-8 (8 bits only, which means fewer colours are available: this usually works well with graphics and simple colours, such as icons, logos or menu buttons).

The PNG format offers binary transparency equivalent to GIF transparency but also alpha transparency (or variable transparency). Alpha transparency is supported by all modern browsers (so, no, it does not work in Internet Explorer 6, but you can still run some JavaScript PNG fix libraries should you need to make it work as well in this antiquated browser).

Like GIF, PNG has a some animation support, called MNG: however, at the time it was developed, Flash was already so widely used that MNG never really took off so it is not well supported and is best avoided.

A very interesting option with PNG is interlacing: this setting will be of most use with large images or on a slow connection: with interlacing, the image is allowed to appear gradually from the top to the bottom rather than waiting for the images to be fully loaded to suddenly appear.

PNG supports image attributes, which can be stored in PNG files and include gamma values, background colour, and textual information.

For unquestionable great quality with photographs (at the expense of file size though) or when you need to achieve full or partial transparency, PNG-24 is the one.

With simpler images (logos, icons, bullets, buttons), PNG-8 is often a solid option as the difference with PNG-24 may not be noticeable but the image size is much smaller; for these kind of images as well, unless your image is extremely small, PNG-8 is also preferable to GIF.

For web designers, smaller images means faster web pages and less bandwidth consumption. There are no best formats to save images for the web but depending on each image type and its use, picking the right format is essential.

Cropping and Resizing an Image on the Mac

While Macs don’t come with a specific image editing application, you can use both iPhoto and Preview to perform some basic tasks. Preview is very useful for quickly cropping, resizing and compressing images. A typical need is to open an image, crop it to a certain area, resize it, and then save it out as a compressed file suitable for email or Web display.

You can find Preview in your Application folder. Run it and open any image file. The image will open up and display in a window. You will find a simple toolbar at the top of the window. Click on the Select tool, and make sure it is set to select a rectangular area. Then click and drag a rectangular area matching the portion of the image you want to keep. Then select Tools, Crop or use the keyboard shortcut Command+K. This will get rid of the part of the image outside the selection.

Next, to resize the image, choose Tools, Adjust Size. You will get a control over the window that lets you set the new width and height of the image. You can choose to use different units, such as inches or pixels. You can also check or uncheck “Scale proportionally” to lock the width and height and maintain the same proportions of the original image. DO not worry, however, about the “Resolution” option, as it is not a factor in email or Web-based images. Use 72 pixels/inch as a standard measurement.

After you have cropped and resized the image, you can save it using a standard image format like JPEG. This format will shank the image’s file size considerably, only sacrificing a little quality. Choose File, Save As from the menu bar. At the bottom of the file dialog controller, look for the “Format” pull-down men and choose JPEG. Under that, set the quality. Somewhere between halfway and “Best” is usually a good choice.

Save the file out with a new name, keeping the “.jpg” file extension. You can now use this cropped, resized and compressed image to send in an email message or upload to a Web site. In many cases, this file will be considerably smaller than the original image, making it easier for others to download and view it. For instance, a photo taken with a modern digital camera may start out at 3MB, but once cropped, resized and compressed can be as little as 100KB or less, or about 3% of the original file size.

Eight Great Image-Based Tips for Your Website

Almost every single website you’re going to visit has some type of images used in its construction. Whether it’s a header or logo or some other picture, you will find that every site, from the most successful to the least known, uses images.

Images need to be properly formatted for viewing, and their quality has to be good enough to view them. For example, if you have a JPEG that’s 200×300 saved on your computer, you might want to avoid loading this up to a size of 400×600 on the site. It will create blur and it won’t be of a quality worth showing.

A lot of designers have made a habit out of loading up too many pictures and not utilizing text enough. You might be surprised to learn, but text on a site is actually more effective than imagery, so always be light-handed with the use of images on your site. If you need to explain something via text, do it. Don’t rely solely on images.

It’s not at all uncommon for website owners to be punished or even banned from their hosts after the host receives a complaint that they have used copyrighted content. You might not even realize you’re doing it. But an image doesn’t need that circled C to be copyrighted. As long as you don’t have permission to use it for free, you’re basically stealing it. So be careful.

Depending on any one of a number of circumstances, someone visiting your site may not be able to access the original image path from your server. This could be due to location, bottlenecks, or a host of other reasons. This is where the ALT tag comes in handy. Use it and give your visitors a viable alternative in case the original image doesn’t want to load. Don’t leave them staring at that white box with the red X.

Your logo is going to be the number-one image on your website, and you should treat it as such. No matter where you’re placing this image on your site, you should always put more care and thought into your logo than in anything else you’re loading up in terms of an image. Your logo is ultimately going to become synonymous with your business brand.

Stock images are images that you will find for free from any one of a number of different websites online. These images can sometimes be very unique and very appealing, but if you’re using them, you can bet that someone else is using them too. You should take it easy on these images and try to keep things original.

Image links can become broken when you’re first loading them up, or perhaps you make changes to another area of the site and something gets twisted, or it could even happen if the server drops the image. The point is that you need to check your images often to make sure that they’re loading. If they’re not, there’s a broken link somewhere.

Any image you’re using should be loaded directly to the server. You will always want to keep a backup, but always avoid using free hosting sites. If there’s a problem at that site with your account, the images on your site won’t be displayed. Keep everything in-house.

Images are going to be a very important part of your overall design, so make sure that you use these tips above to help you when formatting, loading and storing images. Your visitors will definitely notice your site more if you handle your images properly.

How to Mask Images With the Cutout Lab in Corel Photo Paint

In this tutorial we’re going to be working with the Cutout Lab. At some point when working with images you’ll realize that you want to isolate an image from the background. As a result, you’ll have to create what is called a mask and this allows you to use the object in a variety of compositions.

Fortunately, PHOTO-PAINT offers you a wide variety of tools that you can use, of which the Cutout Lab is one. We’re going to start cutting this image out from the background in a moment, but before we do, I want to draw your attention to the Objects docker on the right. You’ll notice the background image, there’s an Object that I’ve filled with green and a copy of the background that we’re going to use as our working Object, or layer, when we’re creating the mask.

The purpose of the green layer is for when we finish the masking process and we’ve exited the Cutout Lab. What I do at this point is I zoom into the image and look at the edges of the mask, which I check against this high contrast background, to make sure that there are no artifacts, or holes in the image. Once that’s done I’ve completed the masking process.

At this point I’ll turn the top background object (layer) on and make sure it’s activated. And now we’re ready to access the Cutout Lab. One last point, when cutting out an image, you can use a mouse, but it’s unwieldy and clumsy, a bit like painting with a baseball bat. I recommend that you use a drawing tablet instead. I use the Wacom 6×8 Intuos 3 tablet.

So let’s get into it. The first thing to do is to go to Image: Cutout Lab. In the Cutout Lab dialog we’re ready to start masking the image, but before we get into it, we need to zoom in more closely so we can see what we’re doing. I click on the Zoom icon and zoom into the Cactus.

The next thing to do is to make use of the highlight tool and using it to define an edge around the cactus. The default tip is a bit too small, so I’ll dial it up a bit, to 19. So now I highlight the edge, which lays some color over the cactus and the background. And this is needed in order to create a mask. When working around the spines, there’s are a bit unwieldy with a tool tip of this size, so I’ll dial down the size of the nib. If you mak a mistake in the the image, simply click on the Eraser tool and remove what you’ve done.

To work your way around the cactus, use the Pan tool or the scrolling bars, defining the edge. In some cases, you’ll find areas where the detail is critical. In that case, zoom in. Of course you’ll have to make the nib a bit smaller.

Once we’ve defined the edge of the mask, we’re ready to zoom out and apply the fill, in preparation for previewing. To do so, zoom out to see the entire image and click on the paint bucket. The fill color is blue, which is the default, but it could be any other color. Now, click on the center of the cactus to fill it.

Now we’re ready to create an image preview. At this point the background is set to None which will give us a checkboard pattern when I click on Preview. Now we want to zoom into the image and start cleaning up the edge. In some cases this checkerboard pattern might be a bit difficult to work with, so we can choose from one of several options: gray matte, black matte or white matte. In this case we’ll start off with grayscale matte and I’ll zoom into the image.

Now you can see what’s happening with the edge, which is some artifacting and raggedness of the edge. Parts of the mask appear to have holes in it, as well. We need to tidy this up by way of the touchup tools, which add detail or take it away. To begin, I’ll click on the Remove Detail tool, dial up the size, and start removing some of this artifacting. You’ll need to do this around the entire image. You can do some of this after the fact with the high contrast layer, but I try to do as much of it as possible here. In the event that parts of the mask look ragged on the inside, or incomplete, click on the Add Detail tool to fill in the gaps.

In some cases, the gray matte might not give us enough information as to what’s happening with the edge, so we can toggle to a different option, such as black matte. This allows us to see more of what’s happening with edge and also if there are any holes. This is what you need to do around the entire image.

Now that the cleaning up is complete, we’re ready to make a cutout, which you can then use with other compostions. To do so, you have three options: Cutout, Cutout and Original Image or Cutout as click mask. For our purposes, I’ll choose Cutout and original image, then click on OK. The end result is a new object at the top of the Objects docker, the cutout image and the original below it.

This is where my acid test comes into play. We turn off the object below the new cutout and now we see straight through to my green high contrast object. We can look at it in more detail and see if it needs further retouching. To do so, zoom in to the edge and see what’s happening. In this case the edge is still a bit ragged, which we can improve by using the eraser tool. And we slowly work our way around the image, erasing those bits as necessary.

Here, the edge is fairly sharp. If you want to soften it a bit, we would use feathering, but that’s the subject of another video.