Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

How to properly Scale images?


aj23

Recommended Posts

I am finishing up my site, but all the images I have uploaded for my products look pretty bad because they do not scale probably, and therefore appear grainy and unprofessional. How can I get my images to scale properly and appear in a professional fashion to all my customers? I really don't want to have to resize hundreds of images one by one.

 

Thanks in advance.

Link to comment
Share on other sites

  • Replies 58
  • Created
  • Last Reply

resize all of your images.. its the only way. You can not cram a small image into a large space or a large image into a small space without loosing LOTS of quality.. whether its pixelation or jaggedness.. you WILL loose quality.

 

There are easy ways to change the size of all of your pictures at one time in photoshop using actions.

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

resize all of your images.. its the only way. You can not cram a small image into a large space or a large image into a small space without loosing LOTS of quality.. whether its pixelation or jaggedness.. you WILL loose quality.

 

There are easy ways to change the size of all of your pictures at one time in photoshop using actions.

Actually it is not the only way. Take a look at 'On the Fly' Auto Thumbnailer using GD Library.

Link to comment
Share on other sites

I have heard bad things about that.. no to mention you have to have GD installed on your server.. Just heard it can be very quirky and not stable..

 

It would take about 10 minutes if you can create an action and open all of your files and have them made into the right size

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

I have heard bad things about that.. no to mention you have to have GD installed on your server.. Just heard it can be very quirky and not stable..

 

It would take about 10 minutes if you can create an action and open all of your files and have them made into the right size

There are others such as Auto thumbnailer using ImageMagick.

Link to comment
Share on other sites

I have heard bad things about that.. no to mention you have to have GD installed on your server.. Just heard it can be very quirky and not stable..

 

It would take about 10 minutes if you can create an action and open all of your files and have them made into the right size

 

Are there any tutorials on how to do this? I don't have photoshop so I'll get it but of course I will not know how to use it....

Link to comment
Share on other sites

photoshop costs about $800.00 so i dont think you are just going to get it just to create actions.

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

You can get photoshop elements, which costs much much less

 

Of the thumbnial contribs osC Thumb http://addons.oscommerce.com/info/5491 works better than most

Sam

 

Remember, What you think I ment may not be what I thought I ment when I said it.

 

Contributions:

 

Auto Backup your Database, Easy way

 

Multi Images with Fancy Pop-ups, Easy way

 

Products in columns with multi buy etc etc

 

Disable any Category or Product, Easy way

 

Secure & Improve your account pages et al.

Link to comment
Share on other sites

VSO image resizer is another free tool that does just that. 0$ 0€ free.

KEEP CALM AND CARRY ON

I do not use the responsive bootstrap version since i coded my responsive version earlier, but i have bought every 28d of code package to support burts effort and keep this forum alive (albeit more like on life support).

So if you are still here ? What are you waiting for ?!

 

Find the most frequent unique errors to fix:

grep "PHP" php_error_log.txt | sed "s/^.* PHP/PHP/g" |grep "line" |sort | uniq -c | sort -r > counterrors.txt

Link to comment
Share on other sites

I didnt know elements allows you to record actions.. If it does, theres a tutorial I posted somehwere.. Give me a minute to find it

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

WOW.. i'm surprised at how fast I found it!! its a rather old post.. but it works

 

CLICK HERE - how to make thumbnails instantly in photoshop/elements

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

You can get photoshop elements, which costs much much less

 

The GIMP is very similar to Photoshop, and is free. I don't know how closely you can map PS's actions in GIMP, but it does have a macro language which probably could be set up to do resizing calls in a batch mode. Of course, by the time you learn how to do that, you could have manually resized all your images...

Link to comment
Share on other sites

What resolution should I be resizing to so that I get the best quality image?

 

Also, would ImRE image resizer be any good for this? My friend told me about fireoworks that he uses, but I am not sure which one (I see multiple programs called fireworks), and would that be a better option? I cannot get a hold of photoshop any more so that is not an option

Link to comment
Share on other sites

Also, would ImRE image resizer be any good for this? My friend told me about fireoworks that he uses, but I am not sure which one (I see multiple programs called fireworks), and would that be a better option? I cannot get a hold of photoshop any more so that is not an option

 

Bump, anyone?

 

Thanks

Link to comment
Share on other sites

photoshop costs about $800.00 so i dont think you are just going to get it just to create actions.

 

How much photoshop cost, depends on where you live :)

 

Seriously: It's absolutely necessary to me, not just to scale the images, but to modify them in a way that matches my sites design and presents the item in the best possible way.

 

It's unacceptable to see pictures of items, looking like taken at home, with the complete background behind them, maybe a forgotten cup of coffee, under or over lighted to be sold for I don't know how much. You would not do this in a printed catalogue right? And all this osc (and other carts) are nothing more and nothing less than an interactive catalogue where people can order immediately.

 

Good pictures are one of the most important things, very few exceptions. Take the time to make your pictures perfect, or ask somebody to do it for you.

Link to comment
Share on other sites

Adobe fireworks cs4 is a very good image/layout editor for web development, I know a lot of people that prefer it to photoshop...and at about $300, a lot cheaper.. I prefer photoshop however

Link to comment
Share on other sites

Adobe fireworks cs4 is a very good image/layout editor for web development, I know a lot of people that prefer it to photoshop...and at about $300, a lot cheaper.. I prefer photoshop however

 

Ok maybe I'll try that, but what image resolution would be the best to give a good impression? And after resizing, would I just re-upload it to the site, or would I have to do anything else to the image?

Link to comment
Share on other sites

Ok maybe I'll try that, but what image resolution would be the best to give a good impression? And after resizing, would I just re-upload it to the site, or would I have to do anything else to the image?

 

Bump, anyone? I don't want to resize to the wrong resolution, or do it and then find out it could be better with simple fixes.

 

I did attempt resizing a few, but both before and after the image appeared stretched out, too thin for the height, etc. I do know I will have to crop the white off some images as well, but I'd like to finish resizing first. And IMRE looks like a decent program, but I'm not sure how the quality will be after. It's free so I was thinking about using it if it's good.

Link to comment
Share on other sites

Bump, anyone? I don't want to resize to the wrong resolution, or do it and then find out it could be better with simple fixes.

 

I did attempt resizing a few, but both before and after the image appeared stretched out, too thin for the height, etc. I do know I will have to crop the white off some images as well, but I'd like to finish resizing first. And IMRE looks like a decent program, but I'm not sure how the quality will be after. It's free so I was thinking about using it if it's good.

 

You need to keep the same ratio for all your pictures, lets say 1:1, then you can use 100x100 for small and 500:500 for pop up, or you decide for 1:1,5 then you have 100x150, 400x600 etc

Link to comment
Share on other sites

You need to keep the same ratio for all your pictures, lets say 1:1, then you can use 100x100 for small and 500:500 for pop up, or you decide for 1:1,5 then you have 100x150, 400x600 etc

 

K well I tried some more, and got the image to be scaled fairly well on the product page, but now the quality is not up to par, making it look unprofessional. Is this because I used ImRE for resizing and it's not as good as others? I'd prefer to use a free program that can do multiple images at once if there is something better.

 

Anyways, here is the product page with the resized image that I uploaded. Before it was tall and thin, but now the scale is pretty good, just need it to be of better quality. How can I do this with all the pictures?

 

Thanks

Link to comment
Share on other sites

Before you do anything else, go and change the perimissions on your configure.php files !

 

Your images are bad. Resize them properly with photoshop, or fireworks, or whatever, or send them to somebody, tell him how you want them and you''l get them back in half hour !

 

I'm honestly telling you I would not buy a phone like this !

 

PS. Since you seek and get support on this forum, could you place the "powered by oscommerce" to your footer? Thanks

Link to comment
Share on other sites

Before you do anything else, go and change the perimissions on your configure.php files !

 

Your images are bad. Resize them properly with photoshop, or fireworks, or whatever, or send them to somebody, tell him how you want them and you''l get them back in half hour !

 

I'm honestly telling you I would not buy a phone like this !

 

PS. Since you seek and get support on this forum, could you place the "powered by oscommerce" to your footer? Thanks

 

Yes I will add that to my footer once I get this all done, but I still have quite a bit of work to do still. I will get fireworks, but will that give my images better quality? And now that you've seen how the images are on the site, is there a resolution or method recommended? I still ask this, because with Imre and GIMP, I could not get the image to 100x120, since when I put that in, it changed to 65x120 automatically.

 

I would send them to somebody, but I spent more money than I should have already and I don't have much else to spare, that's why I want to get this working myself.

Link to comment
Share on other sites

personally, if you can not figure this out, you arent going to figure out fireworks or photoshop... GIMP is a program that has been considered equal to quality output to photoshop.. so if you cant figure it out, you cant figure it out..

 

 

key is, you need to spend money to make money.. It this stuff was easy, then there wouldnt be professionals paid at a professional rate that get paid to do this. People who do this for a living spend years learning the ins and outs.. So if you want to learn it yourself, you can spend those years learning it, OR you can pay someone to do it.. Because if it were that easy, there would be no such this as a professional designer..

 

resolution should equal your size.. 100px x 100px should be 100dpi, and that image should be in a container that is 100px x 100px... its that simple..

A great place for newbies to start

Road Map to oscommerce File Structure

DO NOT PM ME FOR HELP. My time is valuable, unless i ask you to PM me, please dont. You will get better help if you post publicly. I am not as good at this as you think anyways!

 

HOWEVER, you can visit my blog (go to my profile to see it) and post a question there, i will find time to get back and answer you

 

Proud Memeber of the CODE BREAKERS CLUB!!

Link to comment
Share on other sites

 

Hey Adrien,

 

The best way to resize images is with a graphics program. Photoshop does the best and I wouldn't live without mine. You can try Jasc Paint Shop Pro 6 which I have used with good results when I first got started. Free version - click here. One important thing to keep in mind, start with a larger image and resize smaller. If you try to create large images from small images they will look terrible.

 

What resolution to use?

Two sizes, one for your large images and one for your thumbnails.

Find a picture of your largest product image (let's use height for now) and resize it to the smallest size (height) where it still looks acceptable. Now do the same for your widest product image using it's width. Compare the two sizes; is your first image taller than your second? Is your second wider than your first? If you answered yes to both questions you can simply extend the canvas size to make both images match. As far as your thumbnails; resize them from the finished large images so they are much smaller but still viewable. You'll have to play around with the image program, possibly using filters such as sharpen or unsharpen mask.

Just remember to create all large images the same size and all thumbnails the same size. The final resolution depends on how big you want the images.

 

The goal of your images is to retain quality but be fast loading. The size in resolution and dpi (should be 72 or 96 dpi for web images) which determines the file size plays a roll in the loading speed.

 

There are as mentioned contributions which will make life easier for automatically generating thumbnails from your larger images. But they usually only resize the resolution and not the file size which still causes slow loading.

 

You can use an easy to install contribution such as - Big Images Modification v1.25 to take advantage of the two images.

I noticed from your link that the pop-up image was actually smaller than the image on the product info page. If most of your product images look good as the size on the product info page, I wouldn't bother with pop-ups.

 

To get an idea of what I'm talking about, checkout my site.

Here I used the same image for large and thumbnail - click here and then on a product.

Here I used two different images - click here then on a product.

I used the big image contribution but customized it a little as I didn't need pop-up images.

 

;)

- :: Jim :: -

- My Toolbox ~ Adobe Web Bundle, XAMPP & WinMerge | Install ~ osC v2.3.3.4 -

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...