How to optimize images quickly?

General Web Dev
1

I’ve got a website built on Magento 2. It performs not so fast as I want, but still, it’s okay.
I have problems with images. They look blurry, some of them a smaller than they should be.
Do you have any tips?

2

Hi,

Could you give a link to the site, or maybe the images, if you want a better answer than just general advises. :slightly_smiling_face:

3

Hello, Erik_J
I Understand why you are asking) But it’s not possible :stuck_out_tongue_winking_eye:

4

Then describe in detail what you’ve got and what you want.

About the images, format, size ,resolution etc.

How you use them on the site, etc.

Code would help, maybe snippets of relevant css and html. :slightly_smiling_face:

3 Likes
5

There is not a lot you can do with blurry and undersized images other than start again.

If you have a folder full of the original images you can use Imagemagick to resize all the images in the folder individually or all at once.

7

for optimized images quickly u should resize or compressed your images

8

It would be convenient if you show the site. If your images are blurred, it is likely that they were the wrong size or may have been incorrectly resized. If you want to optimize images to speed up the site I can recommend you online services.

2 Likes
9

Follow the advice @Rubble gave. :slight_smile:

Mind that if you save in a lossy format, like JPG, the image will degrade in quality each time you reopen it for edit and save. The degrade is worse the higher the compression.

To avoid loosing quality you should never re-save the original lossy format images.

It’s better to save originals as e.g. PNG images and do all work on them and finally save the finished image in the lossy format. Try different compression settings for best quality and smallest file size.

1 Like
10

Hi @taiwadeshweta, welcome to the forum! :slight_smile:

That is a very general advice that could lead the OP to loose additional quality if the problematic images are saved as jpg.

1 Like
11

Take a look at the Google supported AmpProject - which is not only for mobiles.

I use a PHP Framework and have quite a few pages that are Amp compatible which is essential otherwise the pages will not take advantage of the free CDN cache and preferential treatment for mobile SEO.

Nicked from their site:

  • Caches images and fonts in addition to AMP documents.
  • Limits maximum image dimensions to prevent browser memory issues and poor responsiveness.\

Various transformations to improve the delivery efficiency of images via the amp-img tag, such as:

  • Removal of data that is invisible or difficult to see, such as certain metadata.
  • Conversion of images to smaller and mobile-friendlier image formats, such as converting GIF, PNG, and JPEG format images to WebP in browsers that support WebP.
  • Transformation of the image to a lower quality if the request includes the Save-Data header.
  • Generation of alternatively sized versions and adding srcset attributes to support delivery of responsively sized images.
3 Likes
12

Thanks for your suggestions!

2 Likes
13

Wow!!
Thanks for your suggestions!
That is really great.

1 Like
15

Why not using some wp optimize plugin if it’s Wordpress. I use it to optimize my images

18

You should resize your image or compressed your image. I believe you will get better result after that.

19

I just stumbled across this article which may be of interest:

https://dev.to/victoria/how-to-quickly-batch-resize-compress-and-convert-images-with-a-bash-one-liner-a6p

I use find to target only certain image file formats in certain directories. With mogrify , part of ImageMagick, I resize only the images that are larger than a certain dimension, compress them, and strip the metadata. I tack on the format flag to create jpg copies of the images.

Requires Linux, ImageMagick and Mogrify

One liner:

find public/ -not -path "*/static/*" \( -name '*.png' -o -name '*.jpg' -o -name '*.jpeg' \) -print0 | xargs -0 -P8 -n2 mogrify -strip -thumbnail '1000>' -format jpg

Verbose with trailing ** used to join lines, # ignored remarks

# Look in the public/ directory
find public/ \
# Ignore directories called "static" regardless of location
-not -path "*/static/*" \
# Print the file paths of all files ending with any of these extensions
\( -name '*.png' -o -name '*.jpg' -o -name '*.jpeg' \) -print0 \
# Pipe the file paths to xargs and use 8 parallel workers to process 2 arguments
| xargs -0 -P8 -n2 \
# Tell mogrify to strip metadata, and...
mogrify -strip \
# ...compress and resize any images larger than the target size (1000px in either dimension)
-thumbnail '1000>' \
# Convert the files to jpg format
-format jpg
1 Like
20

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.