How to Optimize Images in WordPress Without Plugin & With Plugin

  1. How to Optimize Images in WordPress Without Plugin
  2. How to Optimize Images in WordPress With Plugin

1. How to Optimize Images in WordPress Without Plugin

The more the contents we are trying to display in homepage is affecting the Page size. So, we have to think like we will upload limited contents on a home page so that it will not affect the Page Load.

  1. During uploading a big images in Revolution Slider or Product Images keep the actual dimension but we can decrease the image size.
  2. Lossless Compression: This is process to Strip unused data & compress images without affecting image quality.
  3. All Product Image / Slider Images / Banner Images should be in JPG format. It is much lighter than the PNG format.
  4. Optimize & compress up to 50 images by using a plugin with one click.
  5. By saving images like this we can save much storage in the Server and the site will be Optimized. We should keep the Big images like Slider Images, Big Banner Images within 150kb to 200kb Max (Always less value should be Compromised). The Product image size can be 50kb to 100kb Maximum (Always less value should be Compromised).
  6. Incorrect Size Image Detection: Quickly locate images by using a plugin that are slowing down your site.
  7. Automatic optimization using Cron
  8. In homepage Carousels Sections should be limited. Each Section of Carousels should calling only 10-12 product images . e.g. If each tab loading 20 to 30 Product images. If we assume 30 images then 430 = 120 Images are loading in this Section.
  9. Make your website faster by reducing the weight of images
  10. Optimize images if they are not located in the media library.
  11. Grid Style is better instead of Carousels, we can set a View More Button at the Right or Bottom side of Each Section which can lead to the Category Page.
  12. Serves images from a global CDN for free
  13. imagecompressor.com bh

(1). Example of Image Size

Woocommerce.com mentioned, Original images you upload should be at least 800 x 800px or higher for most themes. It depends on theme. I have mentioned some example below –

  • Alibaba: 1000x1000px =240kb, 2448x2448px = 1.39Mb, 800x1066px = 474kb, 800x800px = 109kb
  • Amazon: 679x848px = 7kb, 679x847px = 21kb, 1500x1471px = 165kb, 1302x1500px = 156kb

2. How to Optimize Images in WordPress With Plugin

kraken.io Plugin (bh)

How to enable lazy image loading & How to add lazy load to images

2.1. Install and configure Jetpack Boost

2.2. Install and configure Jetpack

  • Enable Lazy Image Loading
  • Enable site accelerator
  • Speed up image load times
  • Enable Lazy Loading for images

2.3. Install and configure Shotpixel

  1. Sign up 
  2. Input API key
  3. Configure
  4. Convert all JPEG, PNG or GIF to WebP and AVIF
  5. Convert the next generation images (WebP and AVIF) into the front-end pages by using the <picture> tag instead of <img>, independent from generating them through the plugin
  6. Compatible with WP Retina 2x – all retina images are compressed automatically
  7. CMYK to RGB conversion
  8. Can run ShortPixel on multiple websites or on a multisite with a single API Key
  9. Bulk optimize all images in Media Library with one click
  10. Option to deactivate auto-optimizing on upload for images
  11. Integration with CloudFlare, by API Key or a Token
  12. Uploaded images can be automatically optimized in Media Library.

2..4. Install and Configure WebP Express

Install and Configure WebP Express
  1. HTML, replacing image tags with picture tags
  2. HTML, replacing image URLs so all points to webp
  3. Cache Enabler, the same as above can be achieved, but with page caching
  4. Much faster load time for images in browsers that supports webp
  5. Better ranking in Google searches
  6. Less bandwidth consumption

FAQ

Question: How can I measure the impact of Imagify on speed score?

Answer: We can use GTMetrix/Google PageSpeed to test the following metrics before and after the image optimization:

Total Page Size (GTMetrix), Optimize images (GTMetrix), Serve images in next-gen formats (PageSpeed Insights) and Efficiently encode images (PageSpeed Insights)

Questions: I am operating as ecommerce website developed by WordPress. I have imported 857 products. All product has one image.  Sometimes I delete some products and sometimes I add some products. But I don’t delete image. So now I have 857 products. But in media library I found around 2463 images. Will unused image slow/affect my website?

Answer: Yes . These unused images will cause load on your website slow down the website functionality.
As you keep on uploading the images, the website keeps on building up the CPU usage, cache and other processes, until it reaches its peak and breaks down. (S5)

Answer: Unsued images should not be affecting your site in terms of performance as those are not being used. They are, however, using the allocated disk. (dp)

Question: Which image format is better for website? E.g.JPG/PNG/WebP

Answer: WebP format is best as it dies not consume much resource but resolution is not that great! (S5) I’d say WebP. (dp)

Question: You are talking about  wordpress.org/plugins/rocket-lazy-load. Will this plugin convert JPG/PNG to WebP format? I have jetpack so will  Jetpack does not work as Lazy load since it has option.    

Question: What is the best image conversion plugin?

My recommendation would be to follow the steps in an article like this one decwinser.com/article/webp-redirects-with-a-http-proxy-cache . We uses a HTTP Proxy Cache so I think you can do the conversion using the suggested plugin in that above article.

Answer: wordpress.org/plugins/rocket-lazy-load

TopicsLink
Shotpixel Officialyoutu.be/5EbX0Hsy6j4
Dreamhost Jetpackhelp.dreamhost.com/hc/en-us/articles/115006051887-Using-Jetpack-with-DreamPress
Configure WebP Expressdecwinser.com/article/webp-redirects-with-a-http-proxy-cache