Serving Scaled Images - Resizing images

[graphicz]

In July 2020 I wrote about resizing images using a php script called Simple Image (https://community.sellerdeck.com/for...830#post552830)

I have been developing the concept and along with some valuable input from Norman regarding using the script with a Bootstrap site (Swift for example) am now using the following way of serving scaled images appropriate to viewport. It also gives the appropriate width and height for each image which also helps SEO.

You need to download the simpleImage.php script from https://github.com/claviska/SimpleImage

Please note, this is now version 3.6.3 and it differs from earlier versions in having the line

namespace claviska;

So that when the script is called you need to use:

$image = new \claviska\SimpleImage();

and not as previously:

$image = new SimpleImage();

You need to create a folder in the Site folder called 'scaled'.

The layouts that are modified are as follows:

Before you start take a site snapshot!

Then copy these layouts in the design library so you have backups:

• Best Seller
• Home Page Section List
• New Product
• Product Summary Image
• Standard Product Image
• Standard Promotional List Entry
• Top Level Section

The forum only lets you post 10 <img> tags thinking theu are images even though they are in code, so the layouts are on subsequent posts - sorry!

Zipped txt files of the layouts here: https://www.graphicz.solutions/Simple-Image-Layouts.zip


Finally take a look in the stylesheet for

img {
max-width: 100%;
max-height: 100%;
}

And edit it thus:

img {
max-width: 100%;
max-height: 100%;
height:auto;

}

By all means use and develop as you wish but remember this is posted in good faith without any warranty or guarantee express or implied.

Thank you.

[Phil H]

Any else tried this? I would like to give this a go.

[graphicz]

That is largely superceded by Norman's WebP plugin which is fantastic. Way better than simple image.

[Phil H]

Hi Jonathan,

Thanks for that. I agree Normans WebP plugin in is makes sorting images out an absolute breeze. I still get message from Google Page Insights complaining about image sizes (the measurements not the KiB) so I think SellerDeck still need a solution for that.

Are you aware of anything to resolve the Google Page Speed Insights "Image elements do not have explicit width and height" issues that get flagged with SellerDecks Swift design?

Thanks

Phil

[graphicz]

Yes, you mean adding height and width to the <img> tag? This is good as it helps page load speed because the browser then knows how much space to allocate.

It is my understanding that these values are overwritten by styles etc. so it may be worth adding them with arbitrary values like this maybe:

 <img src="<actinic:variable name="ProductImageFileName" />"
id="im-<Actinic:Variable Name="EncodedProductAnchor" />"
title="<actinic:variable name="ProductName" encoding="strip"/>"
alt="<actinic:variable name="ProductName" encoding="strip"/>"
width:="300"
height="200"/>

or

<img src="<actinic:variable Name="SectionImageFileName"/>" width:="300" height="200" class="lazy lazyload img-responsive product-summary-image ml-auto mr-auto" alt="<actinic:variable name="SectionName" encoding="strip"/>">

You would only need to do it once for each image layout. I think this is something you would need to experiment with to see if it works in your situation and to see if it satisfies https://gtmetrix.com/ etc,

[graphicz]

Look in the 'WebP Common Code' Layout and line 206

Add height:autoi!Important; like this:

echo "<style>.wpw-$webpnewwidth img{width:$webpnewwidth" . "px!important; height:auto!Important;}</style>";

corrected as per Norman's post below:

echo "<style>.wpw-$webpnewwidth img{width:$webpnewwidth" . "px!important; height:auto!Important;}</style>";

See if that works for you

[NormanRouxel]

Jonathan,

The Forum has munged your code in the post above. The line (before tweaking) was:

echo "<style>.wpw-$webpforcewidth img{max-width:$webpforcewidth" . "px!important;}</style>";

Before posting code, I think you need to click the Source icon [<>] on the top left of the edit pane in order for special characters to be left alone.

Had an eye operation yesterday and not seeing well so can't help further.

[graphicz]

Thank you Norman - hope all goes well