Editing files for Websites

[bgsnmky]

I am helping with an ecommerce site for my brother and the recommendations we are getting for the size of files on the website is 75 pixels or 100 pixels etc.

Is the best way to change the file size in PE is to go the image resize and just type in the number of pixels? I did that the other day, but it took a few times? And what is the difference between the pixels vs the size?

I am guessing I could have one thing for the pixels and if I change the size it would be better quality the smaller the size and lose quality at the same pixels blowing it up.

Any suggestions on the best way to get to 75 pixels or 100? Do I just type it in, and let everything else calculate itself? Are there other things I need to consider.

And I know there are articles on Gif Files vs jpg, but I was curious if you have a recommendation or does it really not matter for a website. I am more familiar with jpgs. But we don't want the system to be slow either.

THANKS!!!!

[Chuck Engels]

Pixels work with the resolution of a still image. If you have an image that is 4 inches by 6 inches at 100ppi the image is 400 pixels by 600 pixels, at 400ppi (pixels per inch) resolution then the pixel size is 1600 pixels by 2400 pixels, still the same 4 inch by 6 inch image.

To get 100 pixel square or close you may need to adjust the resolution, what is the current resolution of the images?

There are other more advanced Photoshop Elements users that can be a little more detailed on the best way to resize the images for the web. I am not sure what you are doing that only has a 100 pixel size, that is generally pretty small.

As far as I know JPEGs will be fine, GIF files are usually used for animation more than still images.

[Blips]

In photoshop elements there is a special menu options to save the pictures for web-use.

File->save for web

Choose PNG or JPEG for full color art and photographs. Choose GIF only if you are working with something that has a limited number of colors, such as a company logo or a drawing, graph, or chart. There's no need to include information on 256 colors if you are only using a handful. Be sure to watch the changes on the screen at different quality settings. You want to find the best compromise between quality and file size.

Standard formats are 640pixels or 480 pixels, depending of the use. But if you need a 100pixel size just type in 100 next to width (or hight) and you will get the right size. (Do not forget to click on apply)

JPEG or JPG files will give you the best results. In elements 5 there is a preview on the page setting. (Look on the lower right site for a blue dot with a questionmark.

[bgsnmky]

Hey Chuck...online again heh...

I can't say what size the pictures are as I will have probably around 100 to start. Products being sold on a website. So i will review them.

I will give you an example of one:

in PE today it shows:

Pixel Dimensions
522 width
192 height

Document size
2.3 width (inches)
.84 height

227 pixels per inch

So with all that, I am trying to figure out how to get to 100. (or just near there)...and of course to understand how so I can get it to whatever I need it. 95 etc...

Thanks for you post and hopefully someone else will jump intoo.

I will also post on the webiste page to see if they are saying make them 100 pixes per inch or what?

[bgsnmky]

Hey Blips...I just saw your post after I sent mine.

I tried saving it like you said to try it on the one I had. (which happens to be the log with only 3 colors so it sounds like you think the GIF is better).

The picture looked the same.
The bottom on the "new" version - showed it as a GIF file (it did it automatically) -- will it make it a jpg automatically withmore colors).

The size of the file was a LOT smaller.

The dimensions on the far right toolbar where it has the pixels and Width and Height are still the same.

what would be the best way to change them to the 100 pixels.


Someone said it is better not to mix the jpgs and gif files...have you found that to be true or not really.

[Blips]

If a file has just 3 colors then a gif file is appropriate however now with the faster computers it is not that important anymore JPG will do. A JPG will not automatically have more colors. But be aware some programs like an ecommerce will only show gif or jpg files so look into that before you save a lot of files.

It is easier to maintain one kind of files and JPG is the preferred one for most web developers. (some use only png) The only reason to use gif would be if you need transparency or animation. (Or if your program only show gif)

To change the size you need to put in the pixels on the right site AND click on Apply. I made that mistake several times and forgot to click on it and the filesize would not change.

I think that the save for web properties page defaults to the last used setting of file-type so after you saved a gif and want to save a jpg next time it still says gif.

[Clayton]

Try what was suggested in this thread http://muvipix.com/phpbb2/viewtopic.php?t=284
I used it to make my avatar, but I also used this procedure to create an 80x80 pixel JPG.