4

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)
  • What software are you using for your webshop? – DisgruntledGoat Jan 13 '15 at 14:59
  • just edited my question. It's Creloaded, which is called Loaded Commerce now. otherwise it's a Centos + php web server. Is it the ecommerce software that does the trick? but even if creloaded doesn't support this feature, i would still like to know the technique behind it. – Zhenyu Jan 13 '15 at 15:06
  • Just an idea. You can upload large image, and when user open page,php create tmp images with different sizes. It's just idea,try with that. But probably it'll take some time to convert images each time,and user experience will be effected. – Aleksandar Jan 14 '15 at 11:20
3

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.

  • '<img src="/getimage.php?src=picture.jpg&width=300&height=200">' , this solution seems very interesting, will this also resize the physical image size? if so, then this will be my solution. – Zhenyu Jan 14 '15 at 9:10
1

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.

  • 1
    I know the image dimension can be scaled with width and height tag, but that won't scale the image physical size, which is what I really what to achieve.. – Zhenyu Jan 13 '15 at 15:43
1

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

1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.