How to Optimize and Serve Scaled Images?

dailydose
#1

If you ever checked your site at GTmetrix, you might have seen two important recommendations


  • Serve scaled images means resizing as per dimension attribute.
  • Optimize images means compressing the images.


Well, there are many WordPress plugins for Image optimization but I doubt anyone does proper resizing.

Therefore, I had look for other working trick.

Thanks to PageSpeed Insights! It’s free. :slight_smile:

Please take “Backup” before proceeding.

In order to resize and compress easily, you can use Google pageSpeed Insights tool. This is a free Web Performance testing developed by Google.

  1. Go to https://developers.google.com/speed/pagespeed/insights/

  2. Enter the URL for which you want to optimize the images

  3. Download the Optimized images from Google PageSpeed Insights tool. It will download a ZIP file called optimized_content.zip

  4. Extract the image folder to Desktop.

  5. Keep eye on Month and year directory.

  6. First, Open same directory using File manager.

  7. Click on Upload
    upload

  8. Just drag all images to upload. Override.

  9. Using any CDN to serve static resources? Must purge cache to get optimized images reflected on the live site.


    I hope this small tips helps.

Your benefits

  • No need to use any plugin
  • Greatly helpful for optimizing images in Bulk page by page, manually faster.

Have any question? Please feel free to ask. :slight_smile:

#DailyDose

Thanks & Regards,
Gulshan

9 Likes

#2

Another helpful tutorial… but there is a lack of DailyDoses :frowning:

1 Like

#3

Thanks for the feedback. Will try to write more.

0 Likes

#4

I’ve a better solution.
Always use original height and width in img and use css to resize image. Simple and convenient

0 Likes

#5

Wrong. Unless you don’t resize image actually, size is not going to be less.

0 Likes

#6

If you use original height and width in img than browser will not take time to render image (Resizing). That resize process can be done with CSS. I’m using this technique on my blog to fix this error.

0 Likes

#7

I am stressing on actual image dimention.

suppose, you have image in 500x500px, but you need to serve on web page only 200x200px.

In that case, I am referring that either we do via HTML or CSS, browser still have to download the large 500x500px image. To fix, we need to serve just resized image 200x200px.

The goal of above article is to teach how to automatically resize a large dimention image to small as per web page requirement.

4 Likes

#8

One other good solution is use WP Smush plugin. Though it does not work as perfectly as the above solution but still it is easy and time saving :slight_smile:

0 Likes

#9

@GulshanKumar Recently used panda tool https://tinyjpg.com/ . I think it is also a good tool. Images compressed by that panda are much better than any WP plugin. Panda have strong jaws :stuck_out_tongue:

Smush madam is too lazy. She does not compress image properly. Using her since long but recently realized that manual compression is better option. Her sisters and brothers are much better but less famous. :sweat_smile:

1 Like

#10

Same, TinyJPG works the best for me :smiley:

1 Like

#11

Not bad!

https://twitter.com/Thegulshankumar/status/1015701996249104385

0 Likes

#12

None of these tools and plugins optimize alike Optimizilla :slight_smile: Though I surely agree with your statement regarding smush but if you try other image optimization plugins, most of them want you to generate API and then use and works slow too :smile:
Sab ka vahi haal hai…

1 Like

#13

Completely agree.

Can’t judge just by single test but here are results.

!

290 to 92 KB

290 to 97KB

Almost same compression ratio. :relaxed:

1 Like

#14

Hmm Right.
One more tool to test for you: compressly.yourdev.me
Better user experience than optimizilla :slight_smile:

1 Like

#15

Favorite tool changed :rofl:

Screenshot%20from%202018-07-08%2023-03-13

This one is winner !

1 Like

#16

:fearful: Quality?

0 Likes

#17

Hello sir,
You know any method to optimize theme images? I am doing it by optimizing theme images through plugins ( i tried 3-4 plugins ) but none of them giving desired results?

Is there any manual approach I can follow? If yes, then How will and where will I find those images

0 Likes

#18

Theme images means ?

0 Likes

#19

Similar…

Take my words back :disappointed_relieved: It disappointed me. This tool is not that much good.

https://shortpixel.com/online-image-compression It also works nice as online compressor. Hope works same as free version WP plugin. :thinking:

Tinyjpg still best and my favorite. :panda_face: :panda_face: :panda_face:

.

0 Likes

#20

Sir, I have a query. I resized my images as per GT Metrix recommendations and then replaced them through WP file manager with original onces.

GT Metrix is still showing, SERVE Scaled images for them. Can you tell me why?

0 Likes