8

How to optimize image here? my site loading can be faster.

Improve this question
4

7 Answers 7

Reset to default
9

Here are 3 approaches to image optimization for magento or any other site for that matter:

1. Command line

You will need command line tools: gifsicle, jpegtran and optipng. Your hosting might probably have it already you just need to check. Once installed use the following bash script to optimize images:

#!/bin/bash
find ./media -iname '*.gif' -exec sh -c ‘gifsicle -b -O3 -o "{}.out" "{}"; mv "{}.out" "{}"' \;
find ./media -iname '*.png' -exec optipng -o5 -keep -preserve '{}' \;
find ./media -type f -iname '*jpg' -exec sh -c 'jpegtran -outfile "{}.out" -optimize "{}"; mv "{}.out" "{}"' \;

Run it from magento root folder. It will optimize all your images automatically.

2. Google PageSpeed Module

Google & Co developed this great web server extension Google PageSpeed Module. It might be a little difficult to install and configure but once setup it will optimize your images on the fly. Here is apache packages for you to download and install.

3. Google PageSpeed Insights

This one involves some manual work. Go to Google PageSpeed Insights and run your page through it. Once completed you can download your optimized images (the link will be at the bottom). Repeat this step for your main pages.

Originally published by me as 34 ways to speed up Magento 2 and 1.

For me the command line approach is the best one.

Improve this answer
2
  • I used this command: find ./pub/media -type f -iname '*.jpg' -exec sh -c 'jpegtran -outfile "{}.out" -optimize "{}"; mv "{}.out" "{}"' \; in my Magento 2.3.1 and I received the following response: mv: replace './pub/media/catalog/product/k/o/image1.jpg', overriding mode 0644 (rw-r--r--)?. What can I do to make the script respond by itself?
    – Despotars
    Oct 23, 2019 at 8:14
  • for magento 2 you have to cd into your pub folder and then run the command.
    – Bovolio
    Jul 14, 2020 at 17:33
4

I suggest taking a look at this post: https://www.keycdn.com/blog/speed-up-magento/ Just looking at your PageSpeed Insights, besides the images, there are a lot of optimizations you could be making to improve your speed.

There are a couple extensions for Magento which work good for image optimization. And like Mohit said above, you want to get an extension which works around the Magento cache.

Also, I always recommend compressing your images before you upload them to Magento, and size them according to scale so CSS isn't resizing.

Improve this answer
1

You can take help of Google Page Speed tools and GT Metrix

to get list of images and other resources which can be optimised.

GT Metrix and Google Page speed tools also provide optimised resources to download.

Note: You should not try to optimise product images (and any other images which are being used from magento's cache), otherwise these images will be overridden as soon as you clean magento cache.

Please let me know you have any other problem.

Improve this answer
4
  • But i want to optimise all product image bcoz those images are in very high resolution. So how to do it?
    – Puspalata Panigrahi
    Jul 25, 2016 at 10:29
  • There are some extensions available for it, if you have lot of products and image optimization manually is not possible.
    – Mohit Kumar Arora
    Jul 25, 2016 at 17:14
  • Is that free extension or premium one.
    – Puspalata Panigrahi
    Oct 4, 2018 at 10:38
  • @PuspalataPanigrahi, you can directly download optimized images from Google page speed tool. Please see screen capture nimb.ws/vFjAW2
    – Mohit Kumar Arora
    Oct 4, 2018 at 10:59
1

If you're looking for a tool to optimize all your images to reimport them into Magento, I would suggest you check the Batch Process Option of Irfanview (Windows) or XnView (OSX/Linux), both are available for a small fee. I used IrfanView for over ten years before having to switch to OSX recently, it lets you optimize, resize, crop... in batch very easily. it's a great little software. Don't forget to clear the image cache after importing all images.

The optimization of images is surely a concern and has to be done but it's only one thing among a lot of others regarding the performance of a Magento website using Google Page Speed and GT Metrix. So the second problem identified by Google Pagespeed (Reduce the response time of the server) might be more profitable (but more difficult) to resolve.

Improve this answer
0

Why don't you try ImageKit? If you are looking for improving your page load speed and applying all the recommendations suggested by Google Page Speed Insights, then you should try it. You can integrate your Magento store with ImageKit in 5 minutes. It provides real-time image optimization, resizing, unlimited transformations and automates your image management process.

Google recommends optimizing website images to improve your website SEO ranking and performance. That's why its Page Speed Insights tool suggests you having a faster website on all platforms.

So, check it out.

Improve this answer
0

An image CDN is a very easy way to optimize your images in Magento without modifying your source images.

One option is ImageEngine, which will pull from where your images are currently hosted and serve them optimized for the end users device.

Here is a guide for implementing a tool like ImageEngine in Magento: https://www.scientiamobile.com/4-steps-to-adding-image-compression-to-magento/

Basically you are configuring your origin in the CDN and replacing your origin in your base media URL with the one provided by ImageEngine.

This enables you to do things like serve WebP and JPEG-2000 for supported devices and automatically fallback to standard image formats for devices that don't support next-gen formats.

Improve this answer
0

As a starter I would suggest to upload locally optimised images, here are apps for all operating systems that do the job.

In Magento 2 I would suggest to edit the following file to render the images in the size that is suitable, see reference here:

app/code/[Vendor]/[Extension]/etc/view.xml

Do not forget to resize the images and flush the cache (see here):

php bin/magento catalog:images:resize
php bin/magento cache:flush
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.