What is the best image size for web images? How can you optimize images so that they won’t make the web page load slowly, and also what tools can you use to ease your image optimization work?
What you should know about image optimization for websites
1. Always size your images only as large as your content width. If your page or blog post’s width is 800px, don’t make the image larger than that. It will unnecessarily make your page load slower.
2. Never make a small photo larger. If the original image is smaller than your page content width, don’t increase its size. This will result in a pixelated image. You can only make large photos smaller, without pixelating them, not the other way around.
3. Know the difference between file dimension and file size. File dimensions are width and height, usually in pixels and file size is usually in Kilobytes KB or Megabytes MB.
4. Keep web photos under 100kb. The smaller, the better. Keep in mind, though, not to lose too much of the quality of your images, while resizing and compressing them.
5. Optimize images using the Lossless option. By choosing Lossless instead of Lossy, you will make sure your images won’t turn up grainy and pixelated after compression.
Tomorrow in part 2 of this tip, we’ll share with you 5 of the best free image optimizers you can use. Most of these can be used online, without downloading and installing any software, but we also included a useful image optimization WordPress plugin, for WordPress users.
~Ruxandra Micu
Very nice guide. I was first introduced with image optimization when I ran across this guide: http://www.paintshoppro.com/en/pages/image-optimization/ and I immediately started doing it for my wordpress website. Now, I find it essential for every website!