Developer forum

Currently discussing: Plans to implement a Consent module for GDPR compliance.

Join the discussion!

Forum » CMS - Standard features » Image handler google pagespeed optimizations

Image handler google pagespeed optimizations

Jakob Kristensen
Reply

Hello Dynamicweb and partners

We are trying to figure out how to handle images from our customers, currently when rendering images through the getimage.ashx handler we get terrible scores on pagespeed.

Most images are shown as png's and if we use jpeg instead alot of the issues disappear however the images dont look nearly as nice.

  • Compressing https://.dk/…e95_new.png&width=2100&height=574&crop=0 could save 256.7KiB (24% reduction).
  • Compressing https://.dk/…utrade2.png&width=2100&height=574&crop=0 could save 223.6KiB (14% reduction).
  • Compressing https://.dk/…kommen2.png&width=2100&height=574&crop=0 could save 182.5KiB (11% reduction).
  • Compressing https://.dk/…nDK1801.png&width=2100&height=574&crop=0 could save 176.3KiB (16% reduction).
  • Compressing https://.dk/…onepro2.png&width=2100&height=574&crop=0 could save 143.3KiB (11% reduction)

Is this a problem with the imagehandler (google changed some parameters?) or with the images themself?

Do you have any guidelines for using getimage handler with google pagespeed to get proper results?

Replies

 
Adrian Ursu
Adrian Ursu
Reply

+1

I believe the most relevant part is serving the images as lossless. Just by changing the compression rate for JPEG will not solve it.

I would also add that PageSpeed gives a prettybad score for not having Friendly URL's.

Using a friendly name could increase the rating a lot.

I have seen a reference in an older post towards https://www.buchcopenhagen.dk/

It does not seem to run on DW anymore but I have noticed the way they have their image paths:

https://www.buchcopenhagen.dk/shared/29/742/ndp-toxik-pants-l750_280x420c.jpg

I believe most open source platforms have put extensive efforts int making this as compliant as possible to PageSpeed rating in order to get better scoring.

I am positive supporting both lossless and friendly URLs will not have a significant impact on performance but it can definitely improve customer satisfaction and can help us avoid endless discussions around this issue.

Maybe these changes can be incorporated in the newly getImage refactoring that was released with 9.4.

Thank you,
Adrian

 
Nuno Aguiar
Nuno Aguiar
Reply

Hi,

 

I agree with Adrian, and specially with the new features in 9.4 for GetImage I believe we could ask for:

  • Lossless compression
  • Configurable default values
    So we don't have to keep sending the alternative image in the request, of the background color for the canvas, or the "donotupscale" value

 

As for the friendly URLs I believe we may be able to achieve that with some URL rewrite rules. I.e.:

  • URL: /getimage/format-jpg/compression-80/width-250/height-250/crop-5/filename.jpg
  • Results in: /Admin/public/getimage.ashx?file=filename.jpg&format=jpg&compression=80&width=250&width=250&crop=5

    If you mix this with setting the default parameters it would be nice ;)

 

Best Regards,

Nuno Aguiar

 

 
Jakob Kristensen
Reply

Thank you for participating :)

Lossless and friendly urls should for sure be considered!

Does any of you guys have the docs for what changed in the new imagehandler?

My example comes from an older dw 8.8.3, so we would be abit sad to upgrade it to latest to get this, maybe we should look into providing our own instead.

Im abit of a umbraco fan in my sparetime and they handle this with imageprocessor.web which works with azure as a cdn aswell and is fairly fast and doesnt give the same errors in pagespeed, plus a ton of extra features one can utilize if needed like backgrounds, saturation, urlrewriting, external images with security etc.

 

 
Adrian Ursu
Adrian Ursu
Reply

Hi Jacob,

I believe the only documentation is on the Release notes of 9.4. I am not sure if this will be available in 8.9 branch.

As for rewrite rules, we have tried some IIS rules for turning non-friendly URL's for images into friendly URL's.

We did not succeed. probably becuase of the order of the operations (URL rewrite and Image resize).

I am not an expert in the field. Somone else, more skilled than me, can probably figure out a way to do it.

Adrian

 
Nicolai Pedersen
Nicolai Pedersen
Reply

HI All

I am willing to look into improvements to GetImage if they will have an affect. We have the one problem though, that we cannot do everything GS suggests because of limitations in the underlying image library - but we would like to improve whatever we can.

@Nuno: What is lossless compression in your world? In my it is using PNG as jpg per definition is lossy... I know there is a lossless jpg format as well, but that is only suitable for images with limited colors and size or it will create large images, afaik - or you have some insights?. Or are you thinking WebP (which also comes in both versions with big differences in size)?

@Adrian: Friendly to who? The Serp or the user? Url rewriting would be simple for us to implement - just never really had the request except from a very few people.

@Jakob: You can easily install imageprocessor to any Dynamicweb installation. Should take you 10 mins. By the way - I think they deprecated their friendly URLs plugin... The new version in DW9.4 fixes a number of issues related to the resize box, introduces a fillcanvas=true that can be used with crop=5 and bacground=fff. That is about it...

BR Nicolai

 
Nuno Aguiar
Nuno Aguiar
Reply

Hi Nicolai,

 

You are accurate and using Lossy (and not Lossless) for jpgs. I must have confused/misread it from somewhere else.

Is there a Post Processor applied to the cached images? From what I can tell that's what would further "compress" the generated file and close the gap between GS.

 

Best Regards,

Nuno Aguiar

 

You must be logged in to post in the forum