One image for different image sizes - physical size on website

Question

We have a webshop that have different image sizes for demostrating a product. one for category page, and one for product page, and when people click on enlarge, it will show a large image. This means for each product, we have to make the image in 3 different sizes and upload them to the server.

Is it possible to use only one image - the one with the highest resolution, and have the webshop to scale it automatically for different pages? I know the dimension can be defined by using CSS. I'm thinking more about the physical image size, can it also be scaled according to the dimension?

I've heard from a e-commerce manager that in her earlier job, they only upload one image for showing different sizes on their webshop, and each image resolution have it's own physical size, I'm wondering how this can be done, technically.

Our setup is:

• Centos
• PHP
• Mysql
• CreLoaded (e-commerce system)

Answer 1

The "technique behind it" is straightforward. You upload an image to the server through a HTML form, then the server processes the image, saving each file to its respective folder.

Or alternatively, you could only save the large file but create links that resize the image on the fly e.g. <img src="/getimage.php?src=picture.jpg&width=300&height=200">. (You'd need to add caching as well because this method is usually more resource-intensive.)

In PHP resizing can be done with the GD library or the ImageMagick library. For specific code examples, see the links to the manual above or search on Stack Overflow (e.g. this question).

Every ecommerce platform that I've ever seen has had this feature so I'm sure it must be in the one you are using. Sometimes these features are available from plugins/extensions.

Answer 2

You can force images to be whatever size you want using HTML width= and height= on the IMG tag. Or use CSS width: height: using the high resolution image each item.

Advantages only need 1 image uploaded and caches for all versions.

Disadvantages are that images can look distorted based on aspect ratios but if same image won't get that problem.

Answer 3

I might be missing something since I dont use Loaded....but its kinda strange they dont have image resize + cached dir by default. So what you can do is bend a similar platforms image classes into its (cached-mirror) directory structure.

The PHP GD class route:

Your current Loaded7 includes/classes/image.php class: https://github.com/loadedcommerce/loaded7/blob/master/catalog/includes/classes/image.php

A GD based OpenCart system/library/image.php class: https://github.com/opencart/opencart/blob/master/upload/system/library/image.php

As you can see the OpenCart has a stack of pre-process functions that use GD to whip up image derivatives. Im sure there are other open source platforms that have decent image (GD) classes too. With some slight tweaking you should be able to harvest their general pre-process logic.

The Apache mod_pagespeed route:

If a new image class is just too much to work in, Google has an Apache mod that could attempt to help resize + cache images. Its unclear if it would answer your needs but at least you wouldn't be getting hammered with penalties from improperly sized images that use a raw (large) source image. https://developers.google.com/speed/pagespeed/module

Answer 4

If I understand your question properly, you want to be able to upload one single product image, and have Cre be able to give you that same image in different file sizes (scaled so image sizes are reduced when possible).

With our Cre shop we use the contribution here. It works well for us, and we use about 6 different sizes of each image. I'm sure there are better solutions out there, but this one's been working well for us for several years.