Images have an important role in web design, but on the other hand unoptimized images could be a nightmare for your bandwidth. We need to optimize image size for our web design. Please bear in mind that your visitors love fast-loading web pages rather than fancy ones that take a long time just to load the home page. There are a lot of tools to optimize image size, but only some of them are good at keeping image quality. We are not just reducing the image size; we need to optimize the image quality as well.
Optimize Image Size
There are a lot of tools to reduce image size online, but I found that Adobe Photoshop is easy to use and can do all image processing. Photoshop can reduce image size a lot while keeping the image quality. See the screencast below to optimize your image for web pages:
Image File Format
Before you begin to optimize image size, you need to know some basics of image file formats and compression. These are the most commonly used image file formats for web pages:
1. JPEG (Joint Photographic Experts Group)
JPEG is a widely and commonly used image compression format in digital photography and web pages. JPEG compression is (in most cases) lossy compression. The degree of compression can be adjusted, allowing a selectable tradeoff between storage size and image quality. JPEG typically achieves 10:1 compression with little perceptible loss in image quality. So far this compression is the best for optimizing image size.
2. PNG (Portable Network Graphics)
PNG is a bitmapped image format and video codec that employs lossless data compression. PNG allows image transparency, which is often used to overlay the background image. PNG image size is slightly larger than JPEG image size.
3. GIF (Graphics Interchange Format)
GIF is lossless compression limited to an 8-bit palette, or 256 colors, suitable for storing graphics with relatively few colors such as simple diagrams, shapes, logos and cartoon-style images. GIF supports animation and is still widely used to provide image animation effects. GIF image size is the smallest among other image formats, but the color is limited to 256 colors.
I’m using both JPEG and PNG formats in all my websites. If I need a good quality image, for example for repeated background images, small images, transparent images for overlay, or CSS sprite images, I choose PNG. But if I need a high-dimension image I choose JPEG.
Image Dimension
After you know which type is best for you, now you need to find the best image dimension. Image dimension unit for web pages is pixels (px). The image below shows the commonly used display resolutions:
Using a very high image dimension such as larger than 2000px is too big for a web page as it has a larger image size and wastes bandwidth. So wisely knowing your image dimension is important and highly recommended.
That’s it. If you have any feedback or a better idea to optimize image size, feel free to use the comment box below. Thanks.