Hi, my name is Greg.
I'm a web & graphic designer.
I love to design and develop websites
using modern techniques like HTML5, CSS3 and jQuery.
Image Compression Tips
I find myself most commonly using the following file types:- jpg – Lossy Format, great for photographs
- png (8-bit) – Lossless Compression type, limited color range
- gif – Lossless with limited color range like .png 8, but .png is usually the better choice.
JPEG Compression
The .jpg image format is best suited for images that have a wide range of colors where there aren’t sharp transitions or fine edges. With .jpg compression you have the ability to pretty freely adjust the quality in exchange for file size. With images, you’ll probably find 60% quality to work just fine. If there is text in the image, you may notice more artifacts given the sharp edges, and may have to bump up the quality.GIF and PNG Compression
The .gif and 8-bit .png image formats are better suited for images with limited color ranges (they can display up to 256 colors), where there are large areas of uniform color. In these instances, .png and .gif will usually produce a close-to-perfect representation of the original image while saving at a higher rate than .jpg. Typical uses of these formats include interface items, icons, and images where text needs to be represented accurately. More often than not, the 8-bit .png format will compress better than .gif. Both formats support transparent pixels.Layerstyles.org
Like Photoshop’s Layer Styles, but in your browser & generates CSS.
Surfing the web, I came across layerstyles.org - A web-based alternative to the creation of CSS, Layer Styles turns a process that involves a certain structural mastery into a process that any person who has the time and the imagination can handle more than satisfactorily. Using this supple tool, everything boils down to choosing the style that applies from the many that are provided (IE, drop shadow, inner shadow, background, border, border radius) and then tweaking with the colors and opacity of that style until you have what you need.
Obviously, you can also set down parameters such as the actual size of the style and (where applicable) the distance of elements, their angles and how much blur you want them to have (that is the case when you are working with boxes, for example).
And in addition to functioning on the browser and being really easy to use, Layer Styles is a free tool. You can use it to put as many styles as you need together, and you can use it for as long as you want too.