SEO for resized image filenames

[chrisdicken]

Hi Norman

I'm using your image resizing code for a new site for a client where they have 50,000 products! He currently does very well on Google bevause his product filenames contain keywords. However, the new site uses resized images that look like:

api_000cb88821c6213c85bda6f754827922_150_150_ffffff_60

Any suggestions for including some elements of the original product filename in the resized image code? I guess it is something to do with this PHP:

$ScaledImageName = 'auto-resize/api_' . $ProductImageMd5 . '_' . $DefaultProductImageWidth . '_' . $DefaultProductImageHeight
. '_' . $ImageBackgroundColour . '_' . $ScaledImageQuality . '.jpg';


Thanks

Chris Dicken
Random River Web Design

[norman]

Hi, Chris

Code looks like mine but I cannot find anything I've written that contains "auto-resize" as part of the file-name.

It's possible that it's been modified at your end.

Can't give detailed help without seeing the exact code that's in use.

P.S. That very long file-name is essential to making the add-on create the images efficiently. Especially if you're going to have 50,000 of them! What happens is that the file-name is a combination of the original image files MD5 and all the other resizing and image quality parameters. If a file already exists with that name, then no new file is written as the existing file must have been based on the supplied image and resized using the same parameters. If we didn't do this, each image would be re-created every time the site was built and thus have a new time-stamp. Causing significant extra processing time and an unnecessary file upload per image.

So it should be possible to add in the Product Name (or better Product Image Filename) but you'd have to make sure that invalid characters were dealt with.

Indeed some of my add-ons (like Lightbox) contain an optional setting that includes the source filename.

[chrisdicken]

Hi Norman

It's a tweaked version of your code - with just the resized image folder name changed for various reasons...

<actinic:block if="%3cactinic%3avariable%20name%3d%22ProductImageFileName%22%20%2f%3e%20%21%3d%20%22%22">
<actinic:block php="true" >
// AutoProductImages V2.00
include_once 'dpimagesupport.php';

$DefaultProductImageWidth = 150;
$DefaultProductImageHeight = 150;
$ToolTipProductImageWidth = 160;
$ToolTipProductImageHeight = 160;
$ToolTipOffsetX = 0 + '20';
$ToolTipOffsetY = 0 + '20';
$GenerateToolTip = 0;
$ScaledImageQuality = 60;
$ProductImageFileName = '<actinic:variable name="ProductImageFileName" encoding="perl" selectable="false" />';
$ImageBackgroundColour = 'white';
$ProductImageWidth = '<actinic:variable name="ProductImageWidth" selectable="false" />';
$ProductImageHeight = '<actinic:variable name="ProductImageHeight" selectable="false" />';
$MakeProgressiveJpg = 1;
$ProductImageFileName = str_replace('\\', '/', $ProductImageFileName); // replace troublesome backslashes
$ProductName = htmlspecialchars('<actinic:variable name="ProductName" encoding="html" selectable="false" />');
unset($ProductImageMd5);
unset($bkgndr);
unset($ProductImage);
$errmessage = '';
$ScaledImageName = $ProductImageFileName;
if ( ($ProductImageWidth != $DefaultProductImageWidth) || ($ProductImageHeight != $DefaultProductImageHeight) )
{
// we have to resize
if ( strlen($ImageBackgroundColour) != 6 ) $ImageBackgroundColour = 'ffffff'; // use white as default
$bkgndr = hexdec(substr($ImageBackgroundColour, 0, 2)); // use defined values
$bkgndg = hexdec(substr($ImageBackgroundColour, 2, 2));
$bkgndb = hexdec(substr($ImageBackgroundColour, 4, 2));

$ProductImageMd5 = md5_file($ProductImageFileName);
$ScaledImageName = 'auto-resize/api_' . $ProductImageMd5 . '_' . $DefaultProductImageWidth . '_' . $DefaultProductImageHeight
. '_' . $ImageBackgroundColour . '_' . $ScaledImageQuality . '.jpg';
if ( ! file_exists($ScaledImageName) )
{
list($errmessage, $ProductImage, $TempImageWidth, $TempImageHeight, $ProductImageType) = imageopen($ProductImageFileName);
if ( $errmessage == '' )
{
$ScaledProductImage = fitandscaleimage($ProductImage, $DefaultProductImageWidth, $DefaultProductImageHeight, $bkgndr, $bkgndg, $bkgndb);
$errmessage .= saveimageforced($ScaledProductImage, $ScaledImageName, $ScaledImageQuality);
}
}
}

if ( $GenerateToolTip && ($errmessage == '') )
{
$ToolTipFileName = $ProductImageFileName;
if ( ($ProductImageWidth != $ToolTipProductImageWidth) || ($ProductImageHeight != $ToolTipProductImageHeight) )
{
// we have to resize
if (! isset($ProductImageMd5) ) $ProductImageMd5 = md5_file($ProductImageFileName);
$ToolTipFileName = 'auto-resize/app_' . $ProductImageMd5 . '_' . $ToolTipProductImageWidth . '_' . $ToolTipProductImageHeight
. '_' . $ImageBackgroundColour . '_' . $ScaledImageQuality . '_' . $MakeProgressiveJpg . '.jpg';
if (! isset($bkgndr) )
{
if ( strlen($ImageBackgroundColour) != 6 ) $ImageBackgroundColour ='ffffff'; // use white as default
$bkgndr = hexdec(substr($ImageBackgroundColour, 0, 2)); // use defined values
$bkgndg = hexdec(substr($ImageBackgroundColour, 2, 2));
$bkgndb = hexdec(substr($ImageBackgroundColour, 4, 2));
}
if ( ! file_exists($ToolTipFileName) )
{
if ( ! isset($ProductImage) )
{
list($errmessage, $ProductImage, $TempImageWidth, $TempImageHeight, $ProductImageType) = imageopen($ProductImageFileName);
}
if ( $errmessage == '' )
{
$ScaledToolTipImage = fitandscaleimage($ProductImage, $ToolTipProductImageWidth, $ToolTipProductImageHeight, $bkgndr, $bkgndg, $bkgndb);
if ( $MakeProgressiveJpg ) imageinterlace($ScaledToolTipImage, 1);
$errmessage .= saveimageforced($ScaledToolTipImage, $ToolTipFileName, $ScaledImageQuality);
}
}
}
}

if ( $errmessage == '' )
{
// generate the IMG tag
echo "<img src=\"$ScaledImageName\" border=\"0\" width=\"$DefaultProductImageWidth\" height=\"$DefaultProductImageHeight\"";
echo " alt=\"<actinic:variable name="ProductName" selectable="false" />\"";
if ( $GenerateToolTip )
{
echo " onmouseover=\"ddrivetip('$ProductName','$ToolTipFileName','',$ToolTipProductImageWidth,$ToolTipOffsetX,$ToolTipOffsetY);\"";
echo " onmouseout=\"hideddrivetip();\"";
}
echo "/>";
}
else
{
echo "<font color=red>ERROR: $errmessage - $ScaledImageName </font>";
}
</actinic:block>

</actinic:block>

<actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e%20%3d%3d%20False">
<img src="<actinic:variable name="DefaultProductImage" />"
border="0"
height="160"
width="160"
alt="<actinic:variable name="ProductName" encoding="strip"/>" />
</actinic:block>

[norman]

When you say "because his product filenames contain keywords" what do you mean by "product filename"?

Are these SPP and is "product filename" the name of the Section page? ProductPage? Something else?

Say it's the ProductPage type pages, then you could change:

Code: Select all

$ScaledImageName = 'auto-resize/api_' . $ProductImageMd5 . '_' . $DefaultProductImageWidth . '_' . $DefaultProductImageHeight
. '_' . $ImageBackgroundColour . '_' . $ScaledImageQuality . '.jpg';

to:

Code: Select all

$ppnamebits = pathinfo('<actinic:variable name="ProductPageName" encoding="perl" selectable="false" />');
$ScaledImageName = 'auto-resize/api_' . $ppnamebits['filename'] . '_' . $ProductImageMd5 . '_' . $DefaultProductImageWidth . '_' . $DefaultProductImageHeight
. '_' . $ImageBackgroundColour . '_' . $ScaledImageQuality . '.jpg';

And do something similar if this is used on Extended Info, Section pages, etc.

You will also have to deal with Related Products, Best Sellers, and any other layouts that use this auto generated name. Note that in such cases the ProductPageName variables may not be available so you'll have to experiment.

************************

If the above proves problematical, it may be best to incorporate the original ProductImageFIleName instead of the page name. In which case use the much simpler and cleaner replacement of:

Code: Select all

$ScaledImageName = 'auto-resize/api_' . $ProductImageMd5 . '_' . $DefaultProductImageWidth . '_' . $DefaultProductImageHeight
. '_' . $ImageBackgroundColour . '_' . $ScaledImageQuality . '.jpg';

with:

Code: Select all

$ppnamebits = pathinfo($ProductImageFileName);
$ScaledImageName = 'auto-resize/api_' . $ppnamebits['filename'] . '_' . $ProductImageMd5 . '_' . $DefaultProductImageWidth . '_' . $DefaultProductImageHeight
. '_' . $ImageBackgroundColour . '_' . $ScaledImageQuality . '.jpg';

This second solution will be much safer on Best Sellers, New Products, etc as the Product Image FileName is always defined.

[chrisdicken]

Hi Norman

The product image filenames are already optimised for SEO, so just incorporating the filename into the resized image filename should work fine.

Thanks for your help.

Chris

[norman]

The product image filenames are already optimised for SEO, so just incorporating the filename into the resized image filename should work fine.

Super. The the bit above from "If the above proves problematical..." should work fine.