0

I'm looking to upload my products into my Magento 2 store. However, before hand I want to make sure the images are correct.

I've resized my images to 600px in width (height depends on ratio), and compressed my images to around 20/30 KB each.

Are these images good to be uploaded onto my store?

I plan to use the same image for the variations of reasons per product? Shall I do this or resize images for each varietion (thumbnail, base, product page etc)?

Thanks

3
  • What do you mean by optimization? Furthermore, I don't see why it is important what you upload (if not server space is one of the concerns); it is primarily the delivery to the visitor that should be optimized. Jan 26, 2018 at 12:44
  • I mean I don't want a 20MB 1200x1200px image being downloaded to the webpage for 30 products that are shown. Reducing the file size and size of the image will increase speed.
    – zcoyne
    Jan 26, 2018 at 14:13
  • Based on that input, I provided an answer below that aims to do that on the server, rather than before uploading. Jan 27, 2018 at 15:51

5 Answers 5

4

Instead of optimizing before uploading image consider the alternative to optimize each image request to the server.

It has several advantages:

  1. Aware of the user context : e.g. users on mobile, indicating preferences for reduced data usage
  2. Aware of the delivery context : e.g. size of image being used is 50 x 50 px, no need to deliver something else.
  3. Can be applied on existing web pages.

mod_pagespeed is an extension to apache or nginx that will do this. It acts a an intermediate and will serve different images depending on configuration, size, user media etc.

By using mod_pagespeed, there is no need to be an expert in image compression, someone else has done the thinking. Just set the filters (/ settings) and get a tremendously more optimized web shop.

Read more about mod_pagespeed image optimization.

mod_pagespeed can be used for other optimization besides image optimization. The optimization is turned on through config files through something referred to as filters. Some filters may break your web page, so do proper testing. Read about how you can configure pagespeed filters.

3
  • Thanks for your reply. I have varnish installed, would mod_pagespeed work around/with this properly?
    – zcoyne
    Jan 29, 2018 at 11:43
  • Edit: I installed it, and it made by webpage load from 1 second to about 3/4? Any recommendations to speed it up?
    – zcoyne
    Jan 29, 2018 at 12:02
  • I've added some lines about other optimization in the answer. I used to iterate between configuring mod_pagespeed and google page speed insights. Page speed insights gives some good insights on what maybe should get some attention. Jan 29, 2018 at 22:38
1

something you could try as well, if you haven't already is putting it through a lossless compression system, read about Lossless compression here If you're dealing with PNGs as my company prefers to do because it keeps transparency, we often use Tinypng I can't think of much more you can do other than that.

1

Image compression apps are the easiest way to reduce file size of images. These types of tools remove hidden data in the image file like additional color profiles and metadata (like geolocation of where the photograph was taken) that aren’t needed.

These tools provide a quick and easy way to reduce files size without losing any image quality.

Image Compression Apps/Services

  1. TinyJPG | https://tinypng.com/
  2. Compressor.io
  3. Kraken
  4. ImageOptimizer
  5. ImageOptim

Also make sure you have correct alt tags to improve SEO!

1

If you are looking for image optimization by reducing the size ( in bytes ) of image. These tools will help.

  • jpegoptim - for jpeg images
  • optipng - for png images
  • gifsicle - for gif images

Resizing images is a different approach but even after that you can use these tools to optimize them further.

These can be run on single image or on bulk images. Options are available for both lossy and lossless compression.

Lossless compression will not change the quality of the image. Lossy compression will reduce the quality based on the percentage of quality you provide. Hope it helps. Let me know if you need more details.

Many of the image compression extensions use these for image optimization.

0

Why are looking for optimizing images before upload? The recommended practice is to optimize the delivery of images. By optimizing each image request, you can achieve a better cross-device image optimization.

I would suggest you to try ImageKit.io. You can integrate your Magento store with ImageKit in 5 minutes. It provides real-time image optimization, resizing, URL-based resizing, responsive images, unlimited transformations and automates your image management process.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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