So I've noticed in the ECF when you set the category image (for example) to "create a thumbnail" to 150x150 or whatever size you want, it simply takes the original image and forces the size change rather than resampling the image. Since it makes the output image look crappy and the size (kb) stays the same it seems like a poor way to display the products. Plus if I'm showing 20 products at a time them the user is actually loading 20 full size images every time they hit the products listing page.

Is it possible to incorporate an actual image re-sizer in the front end source package? I'm not aware of any that run as a service but ImageDraw would be a good component to use.

Thanks,
Dylan

Image resizing is actually configurable in ECF and it does get kinda complicated.

First the image resizing is configured in the meta attributes form. You can select to what size the image will be resized when thumbnail is created. If you do not set the Stretch Image property to true, the image will be just resized so it fits into the box, not the exact size specified. You can also set the image resize quality used, by default it is set to 100%. So quality is not reduced. (controlled in web services web.config file). Please not that GIFs won't be resized, since there is no API available for GIF images. You can further customize the Image handling in ECF by completely replacing the default ImageFileProvider with your own. It follows the MS. provider model and can be completely replaced.

The next step is how that image is displayed on the front end. By default it is using the custom Image control. It has a lot of logic built in into it. For instance, if no size attributes are set (Width or Height), then image will be rendered with a size attributes defined on the backend. So in your case it will render the thumbnail with width 150 and height 150, which may cause image to be distorted. If however you set either width or height, then only that property will be associated with an image and it will be sized appropriately by the browser. This is a choice that should be made by the developer when designing the templates.

One thing to keep in mind, all the image processing is done on the backend side, in the web services context. Images are cached for 30 seconds by default (meaning they are not regenerated on each request) in the images directory. The node that controls how image is rendered is in web service web.config and looks like this:

    <!-- Defines custom encoding parameters used -->
    <Encoding ImageQualityPercentage="100" DefaultFormat="Jpeg">
    </Encoding>

The image file provider (default included provider) is defined in the web services web.config and looks like this:

 <FrameworkProviders>
  <imageService defaultProvider="FileImageProvider">
   <providers>
    <add name="FileImageProvider" type="Mediachase.eCF.Providers.FileImageProvider, Mediachase.ImageServiceProvider" cacheImages="true" storagePath="images" duration="30" applicationName="eCommerceFramework" />
   </providers>
  </imageService>

...

Let me know if that makes sense,
Sasha.

Hi Sasha, thanks for the detailed response. All of that makes sense and what you're describing makes it sound like the image IS actually resized via the ImageFileProvider, however mine seems to not be functioning correctly.

For example I have my primary product images set to 260W x 345H and I have no resizing when I put them into the system since I save them out as that size. When I take that same image and upload it as my category image (which has a resize attribute at a proportionate 120W x 160H and no stretch required) it simply takes the orignal image and resizes it in the html. I DO have only a width attribute set on the productspaging template to 120W and no Height attribute.

If I right click on the image in the front end productpaging template and go to properties it does display the correct proportions (120W x 160H) and does "look" like the correct size, however when I copy the image and past it into photoshop it is equal to the original larger size. The file size is also not affected which leads me to believe the file is not actually reduced. You can obviously see it on the productpaging template since it has jagged edges usually associated with resizing images via html.

If you have any other tips or reasons for this I would appreciate it.

Thanks again!
Dylan

I assume you are using the MetaImage control on the front end? That control has a property called ShowThumbImage. You will need to set it to true to show thumbnail image. Is the setting you have for meta attribute is set to create thumbnail? It will be helpful if you post the screenshot of the admin screen of how that attribute is configured. Also the control you are using to display it on the front end.

PS: In order to see the real image size, right click the image in the browser and open the direct image url. It will then render in the current size.

Thanks,
Sasha.

Perfect! You hit the nail on the head. I needed that attribute in my tag. Thanks for the help!

Anyone else having jagged images after they are reduced in size simply add this to your MetaImage tag so the file shows the thumbnail rather then the full size image.

 <ecf:MetaImage ShowThumbImage="true" .......


Thanks,
Dylan