PDA

View Full Version : image sizes and optimizing for web



antiquesparrow
04-29-2013, 09:21 AM
My site went live Nov. 2011 and is really beginning to take off and you guessed it, bandwidth charges are taking off at the same rate. I have upgraded to the new gold plan (tho' Volusion said it wasn't an upgrade and so it wouldn't take into effect until the next billing cycle. It costs more and it provides more bandwidth, seems like an upgrade to me) which will provide 25 GB but I am using 39.

I had a designer design the graphics and lay-out of my site. I love how it looks but not sure bandwidth is her forte.

She had me save my images at 900 x 900. The If I upload an image that I saved at 900 x 900 and the maximum pixel size for the "displayed on product page is set at 400". Am I still using the bandwidth as if it was 900 x 900?

I have to get the bandwidth in line. Do I need to go buy Photoshop (which version) and delete each image and using photoshop, optimize for the web and re upload all of the images one by one? whew!

What is actually happening when the image is optimized for the web. Is it compressing it or ???

Alternatively, do I need to host images in the amazon cloud or somewhere? Is there a tutorial or knowledge base somewhere to teach me how to do that?

Or do I need to move the site to shopify or bigcommerce or what. Won't that hurt my business if my shopping cart changes just when my sales are going like gangbusters?

I greatly appreciate any direction, suggestions, this forum can give me.

Many thanks,

demitrius
04-29-2013, 05:06 PM
Yes, having hover images that are big requires bandwidth to load. Not to mention clicking those images to show the big image.

Here is an article by Dean about using Amazon to store off-site images and files: http://deanp.net/2012/04/e-commerce-bandwidth-fees-too-high-store-data-in-the-cloud/

Moving to a new provider may not only make your experience easier, but also your customers. Volusion is not the most friendly when using checkout. This is up to you whether it is worth picking up everything and moving.

eellsworth
04-30-2013, 11:21 AM
You can diagnose what is actually consuming your bandwidth by diving into the reports within your my.volusion.com admin area.

deanp
04-30-2013, 12:07 PM
What is actually happening when the image is optimized for the web. Is it compressing it or ???

Yes - smaller file size means less image data, which means less quality. You don't need your product / template images to be 300ppi print quality; that would make them unnecessarily huge. Your images only need to be about 72ppi. If you experience too much loss of quality for some images, then you can crank it up a bit as needed. I like the 900 x 600 size too.

antiquesparrow
05-01-2013, 07:15 AM
So...900 x 900 is the physical size of the image but the ppi is the number of dots in the image? I ordered Photoshop Elements (before I was editing my photos with Picasa) So is the only way to change the ppi is to delete each image and then upload the new compressed image.

I read your step by step on storing images in the amazon cloud. Do I understand correctly that I could store template images but I can't store product images in the cloud?

So much to learn! Many thanks.

Phil
05-02-2013, 03:29 PM
900 x 900 is the actual pixels count. Screens have resolutions from 72 to 144 ppi (pixels/dots per inch) as a rule. There's no point exceeding that for web images, it just forces the browser to fetch and scale down an overly large image. There's no direct correlation between ppi and size for the web as there would be for print. If you use the 'Image upload' feature on the product page to upload your product images, the various sized versions will be created at whatever you have the settings at (default might be 400 x 400 for the biggest, don't remember), so you don't have to worry about manually resizing those.

demitrius
05-02-2013, 04:42 PM
I believe you can only change where template images are. Product images must be stored on Volusion.

shamieya
05-03-2013, 09:28 AM
I've been thinking about doing that housecleaning myself (I also went way over my 25MB this month). The only option I can think of besides deleting and adding manually from the product pages is redo all the pictures at one time, name them properly, and upload them through FTP- I don't have a ton of products so I'm thinking the manually updates may be the way to go for me.

I think think you can store images in the cloud if you use that the big image, small image fields Volusion provides but I think you can only have 1 picture in that case (perhaps someone who uses that will correct me).

antiquesparrow
05-04-2013, 06:24 AM
I appreciate your responses but I am still so confused. I took all of my images at best quality and cropped them to 900 x 900 as instructed by my designer. Then I used the image upload feature and the maximum pixel size in advanced settings is set to :
High resolution zoom -700 x 700
product page-400 x 400
category-250 x 250
thumbnails 50

so will it or will it not help for me to delete, optimize for the web in photoshop and reupload? will that reduce the ppi and my bandwidth?

I apologize for being so obtuse. I am really trying to get this.

Many thanks

shamieya
05-06-2013, 05:52 AM
"so will it or will it not help for me to delete, optimize for the web in photoshop and reupload? will that reduce the ppi and my bandwidth? "

Yes, it will help. You will optimize the pictures using whatever image editing software you decide to use. That will reduce the file size of each picture. When you delete and re-upload the pictures, your changes will ultimately reduce the bandwidth used.

As Erik mentioned though, product pictures may not be the biggest hogs on your website. You may want to use the Volusion stats tool to see what the biggest bandwidth users are (assuming you haven't done that already.)

deanp
05-08-2013, 08:40 AM
Yeah, you probably have huge 300ppi images loading, and monitors can only show ~72. You need to reduce the density of your images, but not so much that the quality suffers too much. Gradients - gradual changes from one color to another - require high pixel counts. Other than that, you should be able to reduce down and save bandwidth and load time.

Freelap
05-08-2013, 09:03 AM
Do not worry about ppi. You could set the ppi to 72, 100, or 200, if the number of pixels remains unchanged, the ppi it does not matter. There are two major features to consider. The first is the actual number of pixels such as 300x250. The second is compression. Compression affects image quality, so the trick is to compress as much as possible and still get the quality that you find acceptable. Photo editors like Adobe Photoshop allow you to review the image quality while moving the compression slider so you can compress each image to your image quality requirements. Busy images with lots of detail may not tolerate as much compression, while other images of similar size may compress to smaller sizes.

Best,
Christopher

antiquesparrow
05-09-2013, 03:49 PM
Thanks for all of the replies. I am experimenting with Photoshop elements and beginning to understand. So much technology for an old woman to learn :)

GGG
05-09-2013, 08:35 PM
So much technology for an old woman to learn :)

woohoo! I found a contemporary...would you please explain to these people that we had to do homework without Google back in the day? lol

for what it's worth....I use PhotoShop. Just save the image 'for web' and move the slider to the least file size I can while still getting a decent pic.

So for example...a 500 x 500 image (unless you want bigger)...at 72 dpi...then save 'for web'...will reduce file size substantially. Yes, as Freelap mentioned, I look at the image to make sure it's okay.

antiquesparrow
05-09-2013, 08:51 PM
woohoo! I found a contemporary...would you please explain to these people that we had to do homework without Google back in the day? lol

We did have electric light by the time I was old enough to do homework. I remember party lines!

antiquesparrow
05-09-2013, 08:53 PM
So for example...a 500 x 500 image (unless you want bigger)...at 72 dpi...then save 'for web'...will reduce file size substantially. Yes, as Freelap mentioned, I look at the image to make sure it's okay.

I seem to be missing the step where I get to choose the dpi :(

Freelap
05-09-2013, 09:10 PM
I seem to be missing the step where I get to choose the dpi :(

It does not matter. Ignore the dpi/ppi when creating images for the web (some print services may require a specific ppi setting).

Best,
Christopher

GGG
05-10-2013, 06:42 AM
We did have electric light by the time I was old enough to do homework. I remember party lines!

whew, no party lines here. My parents installed a 2nd phone line since there was no call waiting 'back in the day'... and they wanted a chance at receiving a phone call :)


It does not matter. Ignore the dpi/ppi when creating images for the web (some print services may require a specific ppi setting).

Best,
Christopher

Christoper,

Can you clarify this for me? If I pull in an image at 300 dpi, the file is huge to begin with and when I optimize for web it still gives me an image size that I'm not happy with. However, if I change the the dpi to 72 first... it then reduces the file size and when I optimize for web it gives me a file size I'm happy with?

Am I missing something? This would not be unusual...

Thanks,
Kelly

Freelap
05-10-2013, 09:15 AM
Can you clarify this for me? If I pull in an image at 300 dpi, the file is huge to begin with and when I optimize for web it still gives me an image size that I'm not happy with. However, if I change the the dpi to 72 first... it then reduces the file size and when I optimize for web it gives me a file size I'm happy with?

Am I missing something? This would not be unusual...


Excellent question, Kelly. And yes, it's a bit confusing.

In the Photoshop Image->Image Size dialog box, there are two areas, Pixel Dimensions and Document Size. There are several ways that you can change the pixel height and width. You can edit the pixel dimensions directly. That's the way I do it, because when creating images for the web, it's the pixel dimensions that really matter. For my Volusion images, I typically make them all square 600x600 (if they are all the same size and all square, it simplifies some of the issues related to page design).

You can also change the pixel size by adjusting the Resolution *if* the Resample Image check box is checked. However, it's important to note that the resolution you enter will not affect how the image will appear in a web browser. You could use 7 ppi, 72 ppi, or 720 ppi, it will not matter. If the pixel dimensions are 600x600, that is what will affect how the image appears on the monitor.

For proof, take a look at the three hot air balloons on this page: http://www.scantips.com/no72dpi.html

Notice how they all appear the same, even though the ppi are 7, 72, and 720. The reason they all appear the same is because the browser looks at the pixel size, which is 412 x 324 pixels for all three images.

So, if you want to adjust your pixel dimensions by adjusting the ppi, that's fine. I adjust the pixel dimensions directly, but both methods will work. Just remember that it's the pixel dimensions, whether adjusted directly or indirectly, that matter.

Hope that helps.

Best,
Christopher

GGG
05-10-2013, 09:52 AM
Hope that helps.

Best,
Christopher

Thanks, Christopher...I truly appreciate the explanation.

But I think maybe I'm never going to understand it. In fact, I give up :) Or maybe I'm adjusting the pixel dimensions without knowing? All images at 500 x 500... and 72 dpi whether they need it or not works for me. LOL.

demitrius
05-10-2013, 10:10 AM
The only thing you need to worry about, GGG, are the size of your images (300x300, 600x600, etc.) and the compression used.

Don't overthink it :P

Freelap
05-10-2013, 10:22 AM
All images at 500 x 500... and 72 dpi whether they need it or not works for me. LOL.

Perfect! 500 x 500 is all that matters, but if you feel the need to ensure they are also 72 ppi, that will work.

Best,
Christopher

antiquesparrow
05-11-2013, 08:48 AM
Omg. Is trying to learn all of this at 58 really better than being a greeter at Walmart? OK, maybe. They say that learning new things helps keep your brain young. What crap. The more I am required to learn for this website the more stuff that falls out of my head to make room for it. Like what you call that white box in the kitchen that keeps the food cold. LOL

Now that I know how to optimize images for the web. Kinda sorta. What is the most time efficient way to do it? I was just deleting the image from the site. Optimizing the image I have in "my pictures" and re-uploading 1 x 1. I hired a college kid to help me with some stuff. A computer major of some kind, and he is doing it from some image library on the site. UH, I didn't know that everything I had uploaded was in an image library that could be accessed somewhere?

many thanks,

GGG
05-11-2013, 02:13 PM
They say that learning new things helps keep your brain young. What crap. The more I am required to learn for this website the more stuff that falls out of my head to make room for it. Like what you call that white box in the kitchen that keeps the food cold. LOL Yep, I haven't cooked in years now. Please tell awc...


UH, I didn't know that everything I had uploaded was in an image library that could be accessed somewhere?

many thanks,

Do you have FTP access?

antiquesparrow
05-13-2013, 06:34 AM
Yes, but never accessed. I take it that is where it is?

GGG
05-14-2013, 08:37 AM
Yes, but never accessed. I take it that is where it is?

Yes, indeed. Check out BabyBeauBelle's post in this thread:

http://www.convergent7.com/forum/volusion-forum/getting-started/setup-configuration/1646-big-problem-ftp-not-working-volusion.html

shamieya
05-14-2013, 08:51 AM
Omg. Is trying to learn all of this at 58 really better than being a greeter at Walmart? OK, maybe. They say that learning new things helps keep your brain young. What crap. The more I am required to learn for this website the more stuff that falls out of my head to make room for it. Like what you call that white box in the kitchen that keeps the food cold. LOL

Now that I know how to optimize images for the web. Kinda sorta. What is the most time efficient way to do it? I was just deleting the image from the site. Optimizing the image I have in "my pictures" and re-uploading 1 x 1. I hired a college kid to help me with some stuff. A computer major of some kind, and he is doing it from some image library on the site. UH, I didn't know that everything I had uploaded was in an image library that could be accessed somewhere?

many thanks,

I wonder how he is doing it through FTP? Don't all the images have several iterations with all the different sizes (1, 2T, 2S etc.) for all the different places where Volusion uses the image?

GentleBath
05-14-2013, 04:47 PM
All the product images are in one file in Volution and and they each one starts with the product code and ends with a number to indicate the size. There is a KB article that lists all the codes. When I first set up my store I did not like my original photos so.. I went into my FTP and wiped them all out. Takes all of 2 seconds, so beware it is very easy to do, which can be good or bad. I then had to reload all of them individually by product. It does save a lot of time to remove them with FTP though.

FYI for most product photos the link for the main product page photo is always:

www.storename/v/vspfiles/photos/prodcode-2T.jpg

Than the other sizes would have the different numbers on them, ie -0.jpg, (cat) -2S.jpg (small), -2.jpg (Large), than if more than one photo it starts at -3.jpg and up from there.

I know this so well because I have it written down in my big book of Volusion crib notes, which is now on its second volume.

shamieya
05-14-2013, 06:22 PM
Yes- this is why I was confused. I don't know how it would be faster to make and/or rename all those image files for each picture. Would they have to be sized appropriately or is Volusion determining the size by the file name? When you do it on the product page, all the sizes are taken care of at once. FTP sounds like the long way to do it...but I haven't done it yet so I really have no idea...it seems like the best way would be to delete all through FTP and then go in and upload them on the product pages. I guess I'll find out one day.

GentleBath
05-14-2013, 09:11 PM
..it seems like the best way would be to delete all through FTP and then go in and upload them on the product pages. I guess I'll find out one day.

That is the quickest way I could figure - there are almost 4-8 sizes per photo so re-create all of them sounded even harder then uploading one-by-one to a product file.

You could also download the entire "photo" file intact through ftp complete with all the current names - work on those photos and re-upload with the same name to ftp? It still seems like a lot of work when it is all done automatically when you upload on the product page.