The benefits of image optimization
- Faster website
- Higher rankings in Google PageSpeed
- Smaller bounce rate of potential prospects
1. Choose the Right Format
In 90% of the cases you will need .jpg format for your images - it gives you the best quality vs size ratio and is widely used throughout the web. For logos and other detailed files use .png
2. Resize Early
The average size of the images for your website shouldn't be more than 900px x 600px at 72 ppi (pixel per inch) unless you are using them for a specific purpose and need a higher resolution. Figure out what looks good and keep the image size consistent for the same elements! For instance, if you start uploading 600x400 px images for your events calendar, keep all of them at the same ratio - everything will look better at the end!
The free application for Windows - Paint and Preview for Mac do a great job with that task. Of course Photoshop is the best tool out there in my opinion, but could be a bit overwhelming, if you are not familiar with it.
Resize A Photo With Microsoft Paint
Resize A Photo With Preview on Mac
3.Compress Your Images
The best practice out there is to compress your images after you resize them so you "shave off" even more from their size. You’re aiming for a balance of the lowest file size with the highest possible image quality.
TinyPNG does a great job while it preserves really high quality. The free version allows 20 images per upload, but you could just refresh the page and upload another 20 and so on.
A great plugin to use on your Worpdress websitein, addition to the above techniques, is reSmush.it Image Optimizer - it automatically compress the images you upload.
4. Optimizing Your Images for SEO
This one is definitely worth to be part of your image optimization workflow and the extra effort will pay off in the future. You could do these two basic steps:
Change filenames: change the meaningless generic names to something descriptive. For instance, use “4th-off-July-celebration.jpg” rather than “as731dfa.jpeg”.
Use dashes instead of empty spaces in the filename. Example: "red rose" vs "red-rose". Browsers do not like "empty spaces".
Add alt tags: add a meaningful alt tag for each image. For instance, “alt=’4th of July celebration event'”.
More details on optimizing images for SEO could be in this great article.
Advanced BONUS: Make Your Images Ready for Retina
Retina Display is soon going to be the new norm all devices. To make your images appear crystal clear on retina devices, you will have to do an extra step.
You would need to output two versions of your images: one at your base pixel size and a 2x version for retina. For instance, a 250px x 250px JPEG would also be output at 500px x 500px.