Optimizing You JPEG Formats

Compressing image files has become a necessity due to the constrained space of hard drives, flash disks, and web hosters. This is because a common text file is comparatively smaller than an image file; an 800×600 24 bit color image file will usually take up 1.37 MB of space, and those are just small ones. One of the more popular formats to save a compressed image is JPEG which usually has an extension name of .JPG or .JPEG. It can achieve compression ratios of 10:1 with practically no lose in image quality.

There are two options with which you can compress your JPEG files. They refer to the same thing but are polar opposites of each other. Saving the file at 60% quality will mean a compression of 40%. Depending on the program you use, you will find either of these two options, but the results will always be the same: more quality will mean less compression and vice-versa.

Different programs also have different quality scale. By saving an image at 55 to 60 quality in Photoshop, it will look and have the same file size of other softwares saved at 80%. Also, never get tempted to save an image at 100% quality because this is not the highest possible quality rather it is the mathematical optimization limit, which will give you an unreasonably big file. Save the image at 95% quality for optimal results. This will be enough to prevent loss in quality and will produce the smallest file size for that quality.

Besides those options, some programs such as Paint Shop Pro and Corel Photo Paint allows you to choose the type of image downsampling or subsampling. A subsampling of 4:4:4 means that the image is not subsampled, 4:2:2 is standard subsampling, and 4:1:1 produces the lowest quality downsampling, although rarely used.

Aside from these tools, you can also optimize your image file by changing how the image data is stored . JPEG format is stored in a 8×8 pixel block and by saving the image exactly within the image block, it will produce a sharper image and save you a couple of MBs in the process. You will be able to see this if you set the JPEG quality parameter to low.

When a JPEG image is saved the image will be divided into blocks of 8×8 pixels. Each block will then be optimized independently. The image will look fuzzy if it does not fit exactly into the pixel block. Also, by adjusting the image right into the pixel blocks, you are decreasing the number of 8×8 blocks used up by the file. This way, the file will be save in to smaller size.

By doing these tips, you will be able to save up on disk space or web space when uploading your images. Every KB is precious due to the limited space it offers, and by effectively decreasing the size, even by a couple of KBs and not sacrifice any quality is well worth it.

Beautiful Vexel Art

The term vexel art was coined by Seth Woolley while he was still a technical contributor of the now non-existent popular teenage message board Nova Boards. He coined the term to describe images that look like vector graphics but are an entirely pixel based form of raster images. Its popularity stems from the fact that it actually requires little skill in drawing.

Computer images and displays are often made up of pixels, small dots that when put together and viewed as a whole will show you a designated picture or image. The smaller and closer the dots are to one another, the better will be the quality of the image. But to do this, the image will have to be stored as a bigger file. Generally when the picture is zoomed in, the pixels will become more and more distinct and the image gradually deteriorates. Images such as these are generally done by raster programs and the images are usually called raster graphics.

On the other hand, vector art is the use of geometrical shapes such as lines and points but are represented as mathematical equations to create the computer generated image. Since the data is stored as a mathematical sequence the picture is scalable and will not pixelate even up close. This is of great advantage since you can print the vector image unto a sheet of paper and reproduce the same image unto a billboard without worrying about the quality. And since the file is stored in numbers, it can be easily modified so as to add or remove detail. Vector images are known for their crisp and quality texture. Even so, there are cases where in raster or pixel images are used while sometimes vector images will be more handy—as it is a case to case basis.
Read more

Thumb Image Styling

Here are some good ideas for styling those thumbnail images. This can add a touch of uniqueness and a character to the web design. Nice collection from TutorialFeed called 12 Excellent Thumb Image Styles for Web Designers. Although these are not complicated to make, they also have  a PSD file you can download for these images so you don’t have to start from scratch.

Amazingly Beautiful & Super Efficient Website Design

MightyLeaf.com is going to be filed into the Best Of 2009 category. I can’t stop starring at it… The design of the site as a whole, then the details – photography work is just stunning, the navigation is very clean and efficient, the logo fits perfectly. This website is truly is a piece of art.

Check out the navigation, it sits there quietly, out of the way while you are not using it, then when you need to find something just hover over the main categories buttons at the top and a smorgasbord of choices come popping out, so much to choose from!

Also the sub-navigation buttons placed nicely under the main navigation is another level of choices to pick from. In all, they have eliminated many extra clicks for a visitor, turning many of then from just visitors to customers.

Source: http://www.mightyleaf.com

Awesome Way To Display Your Portfolio Using jQuery

As web designers we strive to amaze potential clients with our work and one of the ways to do that is to have a stunning portfolio. We find new ways to hook the visitor, to make him or her remember our site over everyone else.

I’ve seen sliders on portfolio sites before but have never seen one that has been flipped on it’s side and split into four and set on an offset timer. This is pretty cool to look at.

You will notice that this site I am showing here is using Flash to make the cubes flip but after digging around a bit I found a jQuery module that can be used to do the same thing. Check it out here: Easy Slider, you can see the example here: Easy Slider jQuery Plugin Demo. This module will only make one block so to make the same effect like in the site above you will need to stack four of these modules together and time them just right.

Source: http://www.tekan.com.br