Media Library »Image Optimization
When you decrease the file size for images before you insert them, uploads and pages will load faster.
This pigeon is around 235kb in size.
The pigeon below is only 72kb – less than a third of the above.
See any real differences?
Optimizing your images does 3 things:
- It makes images quicker to upload.
- It makes your page load faster for people looking at it.
- You can fit more images into a limited space.
Simply making an image smaller while editing a page does not necessarily make the file size smaller.
You need to optimize the image. The original image of that pigeon is 1.2MB so that top image is already 1/6 of the size and the bottom image is 16% of the original size. But it still looks good online.
Types of Images
- JPG works best for images with gradients such as photographs.
- GIF are best for blocks of repetitive color including logos, line art, and illustrations with type.
- PNG should be used to preserve partial transparency and a large amount of colors. PNG images often take up more space, so try the GIF format first to see if it works well for your image.
Retina displays have a much higher pixel density than regular displays, which can cause images with a regular pixel density to appear as fuzzy. To prevent this, if we detect a Retina display we serve the image at double the size so it displays with maximum sharpness, but that only works if the image that appears in your media library is larger than the size that appears on your site. Even at double the maximum display size on your blog an image file should still be significantly smaller than at the full resolution used by your camera, so you can optimize your images and have them look good on Retina displays.
Image Editing Software
Some have easy options to size and compress a batch of photos very quickly. Packages such as Photoshop / Paint Shop Pro will do it, but there is no need to spend money on doing this. These are free: