Resizing photos for a website?

I a building a website and when I resize -- even to make a photo or logo smaller -- everything gets wavy and low-quality. Help!

I like to keep the footprint of my web images as small as possible. Especially for mobile users who must pay for bandwidth. Nothing chops a mobile data plan to hell faster than a web site that uses excessively large images. I only use 100% quality for printed output. On the web I compromise at 20-50% quality to keep the file size down & improve page load speed.
Go to File > Save for web. Use the 4-up panel and compare image quality with file size. See screenshot.
For Photos, use JPEG.
For Gradients or graphics requiring alpha-transparency, use PNG-24.
I rarely use GIFs anymore.
Nancy O.

Similar Messages

Using iPhoto to optimize photos for a website.

How do you specify 72 dpi when resizing images for a website? I have iPhoto 09 v.8.1.2 (424)

You don't.
Export using the File -> Export option. In the resulting dialogue the "Size" setting will determine the dimensions of the photo (length by breadth) and the Jpeg Quality will decide the level of compression used. For web use medium is usually just fine.
Regards
TD

Resize photos for online use

I have been trying all afternoon to resize photos for online use and can not follow directions given. I know it must be simple but I am stumped. I would like to speak to a real person and I'm sure my problem will be solved in less than five minutes. PLEASE do not tell me to follow guidelines; I have tried that.
Kay Wilhelm

Hi Kay,
As an example, let's say we're trying to prepare this 1000x664 pixel, 1MB image for online posting.
If the website you're posting to is giving you a maximum dimension, for example that the image has to be 600 pixels across or less, then follow these 4 steps:
1. Go to File -> Save for Web
2. In the Save for Web panel, look for the Image Size boxes.
3. Enter the desired dimension. For example, if the website you're trying to upload to requires that images be 600 pixels across, enter 600 in the Width box. The height should recalculate automatically.
4. Hit the Save button. You will now have an image saved to the required pixel dimensions!
If the requirement is for a maximum file size, rather than specific file dimensions, you would follow a different procedure. If we were trying to resize the same 1000x664 pixel, 1MB image to a size of 100KB or less, we would follow these steps:
1. Go to File -> Save for Web
2. In the upper right hand corner of the Save for Web panel, make sure the format is set to JPEG. Our original image was a PNG, which tends to have a larger file size. JPEG images tend to have a smaller file size.
3. In the Save for Web panel, look for the projected size of the file as saved with the current settings. This is below the lower left hand corner of the image. In this case, it is 170KB, which is higher than our desired maximum size of 100KB.
3. The easiest way to control the file size at a given pixel dimension is by reducing the image quality. The controls for image quality are in the upper right hand corner of the Save for Web panel. The default setting for JPEG exports is 60%.
4. You will need to determine how far you want to reduce the image quality in your particular case. In this example, we can reduce the quality from 60% to 40% without affecting the visible image quality too much. Setting the quality to 40% reduces the image size to 99KB, which is below our maximum of 100KB.
5. When you are satisfied with the quality settings, press Save to save your image.
Hope this helps!

I had photoshop elements 8 installed on my previous computer and it did not work properly when it came to sizing photos for a website I was adding to. I now have a new computer which runs windows 7. Is it worth installing it again on my new computer?

I had photoshop elements 8 installed on my previous computer and it did not work properly when it came to sizing photos for a website I was adding to. I now have a new computer which runs windows 7. Is it worth installing photoshop elements 8 again on my new computer or will it be a waste of time?

I have PSEv.8 on my computer running WINDOWS 7. It works perfectly..
Perhaps you need help with saving files for web use.. Will be pleased to assist you when you get everything set up.

Should I still down-size photos for my website?

Hi - I am making a website. I know - or at least I think I know - that you should down-size your images for fast loading times. For example, if I have a photo that's 3800x3800 and is 2 MB in size, I always down-size it to maybe 1000x1000 and about 150KB or so.
I know we like to think that "everyone" has a fast web connection but I don't think that's always the case and with mobile you have to factor that in too.
A colleague working on another website asked me what I thought of her photo gallery. She had a thumb nail and when you click on it, it opens up much like a light box effect. Her large photo is 1200 x 1200 and is 1 MB in file size. I pointed out to her that she may want to take the larger photo and if she wants to keep the 1200 x 1200 fine, but she may want to reduce file size. I got it down to about 180KB and sent them to her side by side. She said she was worried about the quality (I honestly did not notice anything but maybe her eyes are better than mine).
I know there's always a catch-22 of "quality vs. file size." So with all of this said, I'm just asking for links, opinions, and so forth about this. I also tried explaining that phones don't always have great connections so the down-sizing should be taken into consideration.
Should I continue to scale down my photos like I have been as described above? Or doesn't it matter any more - that I can take a 1 or 2 MB photo and just use that for my web image to display in a photo gallery?
Any thoughts, links to articles, etc., are appreciated. Thanks, Deaf Guy

Hi Osgood - I'm fully aware of shooting high res and down-scaling for whatever you need the image for. Some folks I've worked with over the years were totally unaware. They thought you could shoot a low-res image and then blow it up to your heart's desire.
I totally understand and respect your thoughts on your post. I basically look at as to each his own - whatever makes you and your clients happy is the key. At the same time there should be at least a minimum amount of standards and expectations, too. Taking a client photo that was given to me and it's 2500x2500 and 2.5 MB and they say, "Stick this on my web page," I think it's important that they understand that this is not smart because of the large file size, possible slow connections and so forth.
The only time I would post it as is if it was some kind of photo gallery where you would want the person to have access to the large file (similar to what iStock does).
I think educating your client is also important. When I sent the side by side photos to her, she said, "So how do you do this?" This person is also a web developer to boot. I'm not criticizing her, but I thought most web developers would at least know about scaling down photos for websites.
But anyway, thanks for your post on this.

How to resize photos for web pages

Can photos be resized within iPhoto to be used on a web site? If not what is the best program to do this to keep good quality photos but have a fast reloading time.

I need to edit photos for print and then create a second version for the web.
You can resize photos as you export from iPhoto - use a custom size and set what you need and upload the exported photos
This is how you do that - you can not "resize" within iPhoto - you resize (and make another copy) when you export.
As to your saving photos form PS into the iPhoto library and wondering why it does not work - it is becaus you must NEVER make any changes of any sor tto the structure or content of the iPhoto library using any program other than iPhoto - saving a photo into the iPhoto libray is not supported and will not work - you set PS as the external editor and when you finish editing you save and iPhoto handles the new image
LN

Unable to resize photos for wall paper

Photos for wall paper cannot be resized to fit screen in iphone or ipad wats the fix

Found on another question. Worked on iPad
Apple
Store
Mac
iPod
iPhone
iPad
iTunes
Support
Languages
iOS 7: How to reduce screen motion
You can reduce screen motion in iOS 7. iOS 7 uses a parallax effect to create the perception of depth on your Home screen and elsewhere.
To reduce the effect, you can turn on Reduce Motion in Settings > General > Accessibility. When you turn on Reduce Motion, Home screen transitions will fade instead of zoom.
When the parallax effect is on, you may notice the following:
Wallpaper, icons, and alerts shift slightly as you move your phone.
When you set a wallpaper in Settings > Wallpapers & Brightness, the photo or image will be slightly zoomed and can't be scaled to fit the screen.
If you zoom in, you will need to rescale your wallpaper to fit to the screen. You can't rescale certain photo formats, including landscape or square images.
To learn more about iOS 7, refer to the user manual.
Last Modified: Nov 6, 2013

Resize photos for slideshow

Hi All,
I use PSE3 for Mac and have been putting together a lot of slide shows and then burning them to DVD in iDVD. My problem is that all the portrait photos leave a black margin on either side of the photo when viewing the DVD on the television. I read that to eliminate that you are to use an imaging software and resize to 640 x 480. However, that isn't possible--when I do that the picture is all squished. Is there any way to work around getting that black margin on portrait photos for slide shows? The problem is eliminated when using landscape photos. That also brings up the problem with wide-screen viewing now that it looks like the industry is leading us by the nose into that format whether we like it or not! Does anyone have a solution or a way to work around this?
Thanks!
Debbie

You could try making a blank canvas of the correct dimensions, then copy your photo onto it. Now you can crop, resize, reposition, add text, graphics, or color blocks to fill the blank space etc.
This method would give you more control over what is seen in the final slide show.

Resize photo for facebook cover page

Hi - I've followed step-by-step instructions in Lightroom to resize a photo for a facebook cover page. It's not working. In simple terms, I want to shrink the photo so that it fits the facebook cover page size. Can anyone help? Thanks

Select your image thumbnail in the library and from the top menu choose:
Photo >> Create Virtual Copy
With the virtual copy selected (highlighted) click Develop
Click on the crop overlay or press R on the keyboard
Click on the dropdown menu to the left of the padlock and choose Enter Custom
In the dialog box enter 8.51 x 3.15 for the aspect ratio and click OK
Drag with the hand tool in the center of your image and move it into the best position for your Facbook Cover; then click Done
Go back to the Library and click the export button, bottom left.
Click the choose button to select a folder on your hard drive where you want the jpeg saved
Scroll down to File settings and choose:
JPEG
sRGB
Quality Slider 49 (this will keep compression low for fast loading on your facebook page)
Scroll down to Image Sizing and check Resize to Fit
Choose: Width & Height and enter
W 851 H 315 and choose pixels from the dropdown menu
Enter 72 for resolution and choose pixels per inch from the dropdown
Scroll down to Output Sharpening and check the box Sharpen For
Chose Screen from the dropdown and Standard
Scroll down to Post Processing and choose Do nothing – next to After Export
Click the Export Button
When the export has finished (see progress bar top left) go to your folder to find your cover pic.

How do I create full width photos for a website with Photoshop - Fireworks - Dreamweaver CS3 ?

Greetings & Help!
I'm trying to create a full width photo layout using Photoshop or Fireworks CS3 and then end with Dreamwaver CS3 without the photo's being tall.
Exactly as the following websites - which all seem to be using the same size of photo or very close to it.
This site is static with full width photos that are not tall.
http://www.jenniferhandyproperties.com/selling
This site is static for the most part and full width photos that are not tall
http://www.gnvpartners.com/web/
This site is Flash with full width photos that are not tall.
expodesigncenter
I would love to create a flash site just like expo but at this point I would settle for a static photo with the same size being the same on each page.
Also I would like my site to be a liquid layout so the photo and everything else (text, Links etc) on the page flows correctly.
The problem...
I'm trying to use photo's from Istockphoto.com. The size of the photo's they offer are
425 x 282 px (5.9" x 3.9")
849 x 565 px (11.8" x 7.8")
1698 x 1131 px (5.7" x 3.8")
I'm selecting horizontal photo's. I do not know how to match the same width, height and appearence as the websites I mentioned above.
If I choose a photo that fits the width then the length is too long. Also if I choose a large photo and have to crop it then most of the detail of the photo is lost.
I'm attempting to create a mock-up for my web in Fireworks CS3 and after search Adobe and www I came across the mock up should be 1004px which would end up being 1024 with vertical scroll bar and small margins.
I also have Photoshop & Flash CS3 but should mention (if you haven't already guess it by now) I am a rookie when it comes to creating a website.
So if you can offer a solution in "Non-Tech Terms" I would appreciate it.
Thank you in advance for your time.

In the second example, the photo is set to background with a tile. The other parts are over top of the photo and done with layers with a background color setting.

Help in resizing photo for masthead

I am trying to resize a photo from 3264 x 2448 to 600 x 149 and I just can't seem to do it.
I'd appreciate a how to...need it for masthead.
Thanks,
Toni

You can do it with the crop tool which is more visual.
After choosing the crop tool, select unrestricted or custom and type your dimensions 600 x 149 into the width and height boxes. Type 72 into the resolution box.
Drag your crop tool over the entire image then click in the middle to reposition it to get the best composition bearing in mind the original aspect ratio will be different.
Click the green checkmark when you are happy and re-save.

How to resize photos for email

I have a MacBookAir 10.9 OS 0 in IPhoto...how can I resize any photo to send by email?
Thanks
dognose2

With a web site, do not post high resolution images as the primary view of your products, that makes your site slower to load on lesser broadband connections, and more expensive to view on wireless connections.
For a web site, use lower-resolution and smaller images for the primary view, and use a web content management system that allows for (for instance) clicking on a photo to view a higher-resolution image, and/or a content management system that allows the user to access a higher-resolution gallery of images.
Default display of and mailing of larger and higher-resolution images chews up potentially very expensive data for folks on wireless connections, and usually won't be popular with mass-mailings. Lower-resolution and smaller and even thumbnails with web links to higher-resolution images — which can incidentally also include tracker URLs, even in HTML-based mail — will consume less of the mobile recipient's cash, and will load and view much faster, or will load. (On iOS, large messages will give the user the option to download the rest of a larger message, which means that most of your mail often won't even get viewed.)
Slow loads and large images can result in web connections get abandoned and mailing list clients drop off lists, too. Thumbnails and text and simple HTML are better.
As for "a good size", run some of your own tests on lower-performing network links, and see how well your content management system and your mail works in these situations — you're probably not aiming for customers on dial-up though I still deal with folks that only have that available — but you're definitely not going to want to assume ginormous network bandwidth with your marketing. One megabit per second (1 Mbps) "broadband" links — and slower — are still very common, after all. Also test your HTML with a few different clients, as there are various differences in how (or how well) HTML is rendered in various mail programs — some HTML mail looks like junk in some common clients.
All of this stuff is fairly typical fodder for web and email marketing discussions, and not at all specific to OS X.

PSE 8 on MAC 10.6.2 Resizing photos for web use

Please can anyone assist me. I cannot alter the sampling options when resizing my photos to create smaller files for uploading to web pages.
so at present Constrain proportions is ticked and I am unable to change it.
W,H and R are locked
Am unable to choose from list beginning:
Bicubic (best for smooth gradients) How do I unlock all these to enable me to change specific items.
thanks for any advice.
ScattyWoman

That is very strange as I had tried turning that on before and nothing had happened.
Now it has. Maybe when I closed my machine down it somehow triggered it back if there was a glitch.
thank you Barbara, you have made me happy again.
I am not sure I need to strip the exif if I am putting them up in my Picasa album but I will try one to see what , if any effect it has on the picture in the gallery.
You have helped me in the past under a different name BUt I couldn't seem to find my login details so I started again. :-)

Adobe photoshop elements 13 to resize photos for email

Can I use elements 13 to resize email photos so they are not to large to send

Yes.
Editor>Expert tab>File menu>Save for web.
In the dialog that comes up, make the long side about 800 px. The short side will fill in automatically
Check "Constrain Proportions"
Select JPEG for file format.
Make the destination folder different from the source folder so as not to overwrite the originals.
Apply.

Need to resize images for a website, how do I do this????

I am running Aperture 2, and I am getting my photo's ready to be posted on my website. Problem is I can't seem to figure out how to resize the image and create thumbnails. I have gone through everything and I am running out of time. Is there anyone who can help?
Thank you.

You don't need to resize any images. What you need to do is export them. I don't know what site you're using, or how you're going to get them up there, but define an export preset that bounds the images to the size you want.

Resizing photos for a website?

Similar Messages

Maybe you are looking for