This is a guide on how to optimize images. While this is specifically for a wordpress site, the main principles can be applied to other site builders as well. One of the biggest reasons I see sites have issues loading slow or crashing a server is from huge page sizes. The majority of the time spent loading a site is bring up the images. Here is an example of a bad site and a better site: bad — better
The first thing you’ll want to do is review your image sizes. You shouldn’t really be uploading images that are bigger that 500×200 (or there about) for a blog or basic site. Often times, images that are 1200×800 are enormous and will slow down your site dramatically. So in your WordPress dashboard click on media.
On the right side there you see all the image sizes…they are SO BIG!!! One alone is 3 mb, that would destroy any page that’s using it. Hover your mouse over the image, then click on edit. This will take you to the image over view.
Under the left side of the image there is an edit button. Click on that. Now you will have the ability to edit the image size. Click on scale image.
Now you will be able to scale the image. For the example of this test site, I re-imaged each of them to about 500’s x 200’s It automatically adjusts the correct aspect ratio of the image, so you just need to put 500 in the first box and then press scale. Then do that for each of your images. More so for the images bigger than 75 kb. Here is a look at those images after scaling them.
One of the reasons having properly scaled images on your site is due to wordpress re-scaling the images being rescaled in HTML or CSS and causing the page size to be bigger and slow down your load time. From this screenshot you can see that resizing the images can provide a 75% reduction in the image size for that page.
Another image optimizing tool you may run into is when using gtmetrix it will tell you the image needs to be optimized. Often this can happen if featured images, or thumbnails are 1080P HD images squished into a thumb nail. It will even give you the option to view an optimized image and you can download it, then upload them to wordpress and replace those images.
That makes a huge difference in page size. After you have re-scaled your images, you’ll want to enable a good image optimizing plug in. One that I recommend is ewww image optimizer. Go ahead and install the plugin and activate it.
Once you have it installed and activated, then go to settings and click on ewww image optimizer. Go to Optimization settings. You’ll want to check delete originals and then check enable PNG to JPG conversion, and then save.
Then go to media and then select bulk optimize. You’ll want to run all your images through the optimizer. Both your media library and everything else.
Now your images are optimized and this will help decrease your page size. At times I have found that I have to re insert the image into the post or page after doing all of this, in order to get the proper image/look on there.