Resizing photographs for use on a website

I am designing a website which will have several photographs on it. I need to resize the photographs (from the digital original)so that they do not lose clarity on the site. Basically before I import them to the site I need to make them smaller. If I import them then adjust the size they lose clarity.
As I have a copy of Photoshop Elements 4 I thought I should be able to use this. However I have never used the programme and don't know where to begin. I have tried the help section but could not find the relevant topic.
Any advice will be much appreciated.
Thanks
Michael

There are two things you need to do: (1) change the pixel dimensions of the image to match the space you have on the web page; (2) compress the image so that it loads quickly when the page is accessed.
To do the first, use the Image Size dialog -- depending on how PE4 is laid out, it is probably under Image on the main menu bar. Make sure that 'Resample Image' and 'Constrain Proportions' are checked, then enter your desired dimensions in the height and width boxes.
To do the second, use Save for Web under the File menu item. Pick JPG as your output format and use the drop down or Quality slider to adjust the file size to what you want -- the preview will allow you to judge quality. Smaller file sizes load faster.
Note that both these procedures will affect your image quality -- if you are changing the dimensions or compressing you will always lose some of the detail of the original. You have control of how much.
Bob Warren

Similar Messages

Beginner ? on resizing vector for uses outside Illustrator

Slowly weaning myself off of MS PP for graphics. One reason is so I can resize images for use in apps like Word. I don't think I want to resize within Word so knowing how to do it in IL is the direction I'm headed (albeit as a beginner).
The example is an image made up of mostly point type, one area type, and a few rounded rectangles. I have it layed out on a 11x8.5 page (although it actually uses about 6x8.5.
My thinking is to select all, grab a corner, hold down the shift key, and drag. My first question is: am I getting the advantage of vector (i.e. quality resize)?
Second, is there a way to control the final size as a percentage (for example) of the original selected area? This question is because I may, in some cases, have a target size in mind. For example, in the Word case, if I save the IL file as a picture and insert it into the document, Word already does some resizing (to fit the page dimensions (I assume). In this case, the result is an image 23% of the original size (according to Word). That's still a bit too big for my purposes. I'd prefer 15% of the original.
Is there some tutorial on how to do things like using the vector capabilities in IL to resize to a final object size. I realize I may need to crop along the way. I'm interested in the process and thinking behind it.
Thanks
Tom

Tom,
Honestly, I haven't read this whole thread in careful detail, but I really think the best advice would be for you to first, fully describe the kind of content you are trying to deliver and what you want the recipients to be able to do with it; second, map out a workflow for your intended purposes; and only then worry about the how-to specifics and the collection of software tools.
Here's what I read:
You have been using PowerPoint as your generic drawing tool. That, and your descriptions so far, suggest relatively simple graphics (lines, boxes, elbows, text, simple polygons). In short, it makes me wonder if you even really need a program like Illustrator at all.
You want your final deliverables to be editable by your recipients. That alone goes a long way toward ruling out the native formats of Adobe applications, their expense, and their learning curves. It's a common practice in both business and mom & pop general use to treat native Office files as if they are some kind of "universal editable exchange format," just because they are so ubiquitious. You can't make that kind of assumption with graphics-production apps (like Adobe's). You can easily over-complicate things by deciding up-front that you need to jump into that arena. Are you an author, or do you really want to embark on a designer career? Look, if you're not designing for mass commercial reproduction, you may be entirely off-base thinking you need to involve Adobe apps at all.
You are now straining to find a workflow which will "upgrade" your vector graphics (with a program like Illustrator) while still retaining the full editability of your deliverables in a format that mom & pop America knows how to deal with.
Here are some basic things you may not be considering from a practicality standpoint:
Programs like InDesign, Illustrator, et all (regardless of their "me, too" re-purposing in recent years for web-centric work) were created for commercial reproduction (i.e. printing in a PostScript environment). It is completely impractical to try to use their native files as any kind of "universal" exchange format for use by a general public--especially if you want your deliverables to be editable by recipients not equipped for or skilled in their use.
PDF effectively makes the final content of documents created in graphics programs deliverable as is. Its basic purpose is to make documents created in pretty much anything readable by those without the authoring programs, while maintaining fidelity to the appearance of the final document. It's not really meant for overal editing like in the native program that created the document. If you want PDF to be your target final deliverable product, then fine; you can produce more sophisticated PDFs by doing your authoring work in graphics apps. But you'll be sacrificing the kind of native editability you are accustomed to with your current Office-based workflow.
Office programs are from another world. They don't talk PostScript. They don't worry about things like halftones and color separation and all kinds of other print-world esoterica. They're not as detail-sophisticated as dedicated drawing programs in things like finely-controlled Bezier path drawing. They don't natively support the same paths and constructs contained in Illustrator artwork.
Adobe's own "recommended" format for incorporating Illustrator artwork into Office applications is not vector at all; it's PNG, a raster format. That's what the Save For Office feature in Illustrator is all about. That fact alone should tell you alot about what you are getting into when you want to use AI to routinely populate Office documents with vector artwork from Illustrator.
Office apps do, however, exist in the real workaday world, and do therefore provide general-purpose means by which to incorporate text, raster, and vector objects for constructing graphics.
You have mentioned concern for vector scaleablilty several times. You seem to be unaware that even Office programs do in fact have their own graphics model for vector graphics. On Windows, that's what formats like Windows Metafile (WMF) and Enhanced Metafile (EMF) are all about. Those are the kinds of objects that are created by the various drawing tools that reside in not just PowerPoint, but also in Word, Excel, Access, et all.
Don't think that you can't create professional-looking results in the Office applications you are already familiar with. "Professional" results is more a matter of design skill and artistic discernment than software. (Believe me, far more amateurish work is created in Illustrator than "professional" work.) It sounds to me (especially since you have been using only the drawing tools in PPT) like you may not have really explored the graphics capability that already exists in the Office applications you are using, and which you really want to use as your fully-editable deliverables anyway.
In helping you devise a suitable workflow, I would ask you questions like these:
Describe (and show examples) of the most "sophisticated' kinds of graphics that you envision needing to routinely include in your deliverables.
Describe the level of editability that you want your recipients to be able to perform.
Describe the functional content of your deliverables. For example, do you want your deliverables to contain live, editable spreadsheets that your users can use as "calculators" or "what if" graphs? Do you understand that while you can build some forms-based interactivity in PDFs, doing so is a relatively painstaking and esoteric process, whereas in Office applications, its pretty much a copy/paste affair?
Have you fully explored the drawing feature sets in Office applications? Do you really understand their capabilities and limitations?
JET

Safari 'Not Certified" for use on Federal website

The Federal Student Aid, FAFSA website does not support Safari. It support financial aid at most colleges nationwide as well, involving millions of students. They suggest installing another brower. This is outrageous! Like I would buy another car just for toll roads. Knowing Apple's propensity for industry standards, I can't believe it is a problem with Safari. FAFSA actually suggested I send my feedback to a P.O. box.
The site is http://www.fafsa.ed.gov/
Go to Step2, "Filling out a FAFSA"
So what's the deal? Is Apple at fault? Intending to do something about it?

Hi MagneStar,
While it doesn't address the problem at hand, a workaround might be to change the user agent in Safari. To do this, first enable the Debug menu by quitting Safari and issuing the following command in Terminal (/Applications/Utilities/)...
defaults write com.apple.Safari IncludeDebugMenu 1
Run Safari and in the Debug menu, select 'Netscape 7.2' under the User Agent drop-down menu. I tried it with a handful of browser IDs, but among the limited set I tried, Netscape 7.2 seemed to work. I'm not sure if you'll gain full functionality, but try it and let us know how it goes.
Note that it is often the case that it is an active choice on the part of the website administrator to disable the use of Safari on his/her website. There might not necessarily be anything technically wrong with Safari which prevents it from viewing the site. From that point of view, it might not be Apple's fault per se.
Yang

Best practice for using Muse with Lightroom?

I'm creating a photography website. I use Lightroom to manage my photographs, and I keep the pictures for my site in Collections.
In Muse, I'd like to have ALT text descriptions (or something similar) of each picture, so that search engines can see what's on my site.
Is there a way to embed the descriptions into the image info in Lightroom, and have it export in a way that Muse picks it up?
My problem is this: I've been creating ALT tags in my Muse slideshows (by right clicking on each image and selecting "Edit image properties..."). This works, but I lose my ALT tag if I export the images from Lightroom using any naming convention that doesn't maintain a consistent relationship between image and name. This makes it very difficult to manage my exports from Lightroom, especially if I want to add images or change the order of images.
At the risk of providing too much detail, the reason I rename images on export is this: In Lightroom, my images are named with my client's last name and a sequence number. When I export them for use on my website, I want them to have a different name, primarily to protect my clients' privacy, but also to allow me to organize them easily in my slideshows. So for example Jones-103.dng gets exported as Checkerbox-Wedding-Photography-[nnn].jpg, where [nnn] is a new sequence number.
Can anyone tell me a better way to manage this workflow?

publish/subscribe, right?
lots of subscribers, big messages == lots of network traffic.
it's a wide open question, no?
%

Structure inDesign document and export as XML for use in the web

Hello everyone,
I just recently started using inDesign and I am fascinated by its possibilities! I use it for a project where a finished inDesign layout that is used for a printed publication is now supposed to be transformed for implementing it on a web site. My job is to export the inDesign document as an XML file. After massive reading the last weeks I'm quite familiar with the structuring and tagging in inDesign. Though there's some issues I do not understand. Your precious advice would be of highest meaning to me
The programmer who will later use my XML output for the web-transformation needs the document structured in different levels like "Root > Chapter > Subchapter > Text passage / table". I already structured the document with tags like title, text passage, table, infobox,... but the structure is just linear, putting one item following to another.
How can I structure the document with reoccuring tags that enable me to identify the exact position of an item in the document's structure? So that I can say for example "text passage X" is located in chapter 4, subchapter 1. This has to be done because the document is supposed to be updated later on. So maybe a chapter gets modified and has to be replaced, but this replacement is supposed to be displayed.
I hope my problem becomes clear! That's my biggest issue for now. So for any help I'd be very thankful!

Our print publications are created in InDesign CS5 for Mac then the text is exported to RTF files then sent to an outside company to be converted to our XML specifications for use by our website developers. I would like to create a workflow in which our XML tags are included in the InDesign layouts and then export the XML from the layouts.
Some more detail about what kind of formatting is necessary might be helpful.
I know that IDML files contain the entire layout in XML format. Is it a good idea to extract what we need from IDML, using the already-assigned tags?
Well, if you want to export the whole document, it's the only reasonable approach.
We use a workflow system such that each story is a seperate InCopy document, stored in ICML format (Basically a subset of IDML). Our web automation uses XSLT to convert each story into HTML for use on our web site; it also matches it up with external metadata so it knows what is a headline and what is not, etc.. It is not exactly hassle free, and every once in a while someone uses a new InDesign feature that breaks things (e.g., our XSLT has no support for paragraph numbering, so numbered paragraphs show up without their numbers).
You could do the same thing with with IDML, you'd just have to pick out each story, but that's small potatoes compared to all the XSL work you're going to have to do.
On the other hand, there may be better approaches if you're not going to export the whole document. For instance, you could use scripting to export each story as an RTF file, and then you could convert the RTF files into HTML using other tools.

Escaping tag output for use in XHTML document?

I'm converting a JSP page from HTML to XHTML, and have run across a problem with tags outputting XHTML-invalid characters (&'s and <'s). For example:
<form action="<f:postResults />">
postResult returns a string with those invalid characters, and so far I've been unable to figure out how to work around that. Any ideas?

Our print publications are created in InDesign CS5 for Mac then the text is exported to RTF files then sent to an outside company to be converted to our XML specifications for use by our website developers. I would like to create a workflow in which our XML tags are included in the InDesign layouts and then export the XML from the layouts.
Some more detail about what kind of formatting is necessary might be helpful.
I know that IDML files contain the entire layout in XML format. Is it a good idea to extract what we need from IDML, using the already-assigned tags?
Well, if you want to export the whole document, it's the only reasonable approach.
We use a workflow system such that each story is a seperate InCopy document, stored in ICML format (Basically a subset of IDML). Our web automation uses XSLT to convert each story into HTML for use on our web site; it also matches it up with external metadata so it knows what is a headline and what is not, etc.. It is not exactly hassle free, and every once in a while someone uses a new InDesign feature that breaks things (e.g., our XSLT has no support for paragraph numbering, so numbered paragraphs show up without their numbers).
You could do the same thing with with IDML, you'd just have to pick out each story, but that's small potatoes compared to all the XSL work you're going to have to do.
On the other hand, there may be better approaches if you're not going to export the whole document. For instance, you could use scripting to export each story as an RTF file, and then you could convert the RTF files into HTML using other tools.

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 would appreciate it if someone could advise me as to the optimum resolution, dimensions and dpi for actual photographic slides that I am scanning for use in a Keynote Presentation, that will be projected in a large auditorium. I realize that most proje

I would appreciate it if someone could advise me as to the optimum resolution, dimensions and dpi for actual photographic slides that I am scanning for use in a Keynote Presentation, that will be projected in a large auditorium. I realize that most projectors in auditoriums that I will be using have 1024 x 1200 pixels, and possibly 1600 x 1200. There is no reference to this issue in the Keynote Tutorial supplied by Apple, and I have never found a definitive answer to this issue online (although there may be one).
Here’s my question: When scanning my photographic slides, what setting, from 72 dpi to 300 dpi, would result in the best image quality and use up the most efficient amount of space?
Here’s what two different photo slide scanning service suppliers have told me:
Supplier No. 1 tells me that they can scan slides to a size of 1544 x 1024 pixels, at 72 dpi, which will be 763 KB, and they refer to this as low resolution (a JPEG). However, I noticed when I looked at these scanned slides, the size of the slides varied, with a maximum of 1.8 MB. This supplier says that the dpi doesn’t matter when it comes to the quality of the final digital image, that it is the dimensions that matter. They say that if they scanned a slide to a higher resolution (2048 x 3072), they would still scan it at 72 dpi.
Supplier No. 2: They tell me that in order to have a high quality image made from a photographic slide (starting with a 35 mm slide, in all cases), I need to have a “1280 pixel dimension slide, a JPEG, at 300 dpi, that is 8 MB per image.” However, this supplier also offers, on its list of services, a “Standard Resolution JPEG (4MB file/image – 3088 x 2048), as well as a “High Resolution JPEG (8 MB file/image – 3088x2048).
I will be presenting my Keynotes with my MacBook Pro, and will not have a chance to try out the presentations in advance, since the lecture location is far from my home, so that is not an option.
I do not want to use up more memory than necessary on my laptop. I also want to have the best quality image.
One more question: When scanning images myself, on my own scanner, for my Keynote presentations, would I be better off scanning them as JPEGs or TIFFs? I have been told that a TIFF is better because it is less compressed.
Any enlightenment on this subject would be appreciated.
Thank you.

When it comes to Keynote, I try and start with a presentation that's 1680 x 1050 preset or something in that range. Most projectors that you'll get at a conference won't project much higher than that and if they run at a lower resolution, it's better to have the device downsize your Keynote. Anything is better than having the projector try and upsize your presentation... you work hard to make it look good, and it's mangled by some tired Epson projector.
As far as slides go, scan them in at 150 dpi or better, and make them at least the dimensions of your presentation. Keynote is really only wanting 72dpi, but I do them at 150, just in case I need to print out the presentation as a handout later, and having the pix at 150 dpi gives me a little help with their quality on a printer.
You'd probably have to drop in the 150 versions again if you output the Keynote to .pdf or Word or something, but at least you have the option.
And Gary's right (above) go ahead and scan them as TIFFs. Sooner or later you'll want to do something else with these slides (like make something for an iPad or the like) and having them as TIFFs keeps your presentation looking good.
Finally, and this is a big one, get to the location for your presentation ahead of time if you can, and plug the laptop in and see what you get. There's always connection problems. Don't let the AV bonehead tell you everything will work just fine ('... I don't have any adapters for a Mac...') . See it for yourself... you're the one that's standing up there. Unless it's your boss, then you better be really sure it works.

How do I erase background from gif graphic in Photoshop 7 for use on website?

I am using Photoshop 7 and am trying to convert a jpg photo from my camera to a gif that I can use on my website. I erased a background on a photo with checkerboard pattern) one time (that's what I am trying to find again) and I can't find that eraser anymore.
Would appreciate any help. I am using windows 2000 pro.

The eraser is in the Toolbox on the left but it is pretty crude for this purpose. Better to use a selection tool to isolate the area to be removed, followed by the Delete key. There are other ways but it gets more complicated.
Work on a copy to preserve the original.

I'm getting this message: "Firefox prevented this page from automatically redirecting to another page." but unchecking the box for "warn me when websites try to redirect or reload the page" has not helped. I'm using Firefox 3.6.3 on Mac OS 10.6.3. M'aidez

Can't load Google Calendar. I'm getting this message: "Firefox prevented this page from automatically redirecting to another page" but unchecking the box for "Warn me when websites try to redirect or reload the page" has not helped. I'm using Firefox 3.6.3 on Mac OS 10.6.3. It's not reported as a generalised problem in Dashboard. Google Calendar opens and works fine on my 12" PowerBook G4, but this is a recent problem on my G5 13" MacBook Pro. Mayday!
== URL of affected sites ==
https://www.google.com/accounts/ServiceLogin?service=cl&passive=1209600&continue=http%3A%2F%2Fwww.google.com%2Fcalendar%2Frender%3Ftab%3Dmc%26pli%3D1&followup=http%3A%2F%2Fwww.google.com%2Fcalendar

No I'm not using NoScript, but I'm pleased to report that the problem got resolved by deleting the original bookmark, logging in again, opening Google calendar, then bookmarking it again.

Why does the new version of Firefox not integrate with Norton 360 Identity Safe. Problem for me because I use Norton 360 Identity Safe to manage my passwords and make it more difficult to use password protected website without that add-in.

I use Norton 360 Identity Safe to manage my passwords and it makes it difficult to use password protected website without that add-in.

Norton release Firefox 8 compatibility already, instruction are here
* http://community.norton.com/t5/Norton-360/Firefox-8-Support-for-Norton-Toolbar/td-p/581640

For some reason yesterday and today I can not send mail using the icloud website and help?

From some reason I can not send emails using the icloud website. Not sure why any help

Hi there tamarafromdarien,
You may find the troubleshooting steps for iCloud Mail in the article below helpful.
iCloud: Troubleshooting iCloud Mail
If you can't send mail in OS X Mail
If you receive this alert or a similar alert when sending a message from your iCloud email address in OS X Mail:
“This message could not be delivered and will remain in your Outbox until it can be delivered. The reason for the failure is: An error occurred while delivering this message via the smtp server: server name.”
In OS X Mail, choose Preferences from the Mail menu.
Click Accounts in the Preferences window.
Select your iCloud account from the list of accounts.
Click the Account Information tab.
Choose your iCloud account from the Outgoing Mail Server (SMTP) pop-up menu. Example: “Derrick Parker (iCloud)”.
Note: The Outgoing Mail Server (SMTP) menu also includes an Edit SMTP Server List command. If you choose this command, be aware that the iCloud SMTP server won't be among the servers that can be edited. This is normal.
If you're attaching a large file
Message attachments can't exceed the maximum size allowed by your email service provider or the recipient's email service provider. The maximum size varies by service provider. Try compressing the filebefore sending it, or send your message without the attachment to verify that there are no issues with sending.
-Griff W.

I have paid for ExportPDF but Adobe website thinks I am using a free trial.

I have paid for ExportPDF but Adobe website thinks I am using a free trial. WTF is going on?

Much discussion of this in the ExportPDF forum: http://forums.adobe.com/community/exportpdf

Website not asking permission for using location services in Safari iOS 6

Website is not asking permission for using location services when using Safari mobile on iOS 6.0 (iPhone 4s)
Steps to replicate:
1. Go to http://maps.google.com using Safari
2. Choose "allow" to use location services
3. Close Safari and wait 1-2 minutes such that the arrow sign (in the top right) disappears
4. Go to http://www.nature.com/news/economics-and-genetics-meet-in-uneasy-union-1.11565 using Safari
5. The arrow sign (in the top right) appears showing that the location services are used when viewing http://www.nature.com/news/economics-and-genetics-meet-in-uneasy-union-1.11565 (even few hours later)
Why the site http://www.nature.com/news/economics-and-genetics-meet-in-uneasy-union-1.11565 is not asking permission to use location services?
The Nature journal (site: ww.nature.com) is not affiliated with Google in any way as far as I know!

I figured out how to stop this from happening. I did 3 things, and I'm not exactly sure which one of them did it because I did them all at the same time.
1. Turned on Private Browsing
2. Cleared Cookies and Data
3. Turned off JavaScript
This stopped time.com from using my location without permission.
I then turned off Private Browsing and went back to the same page, and it continued to NOT use my location.
I'm thinking JavaScript being turned off might be the solution. However, there is a bug that causes JavaScript to turn on again without permission at times:
http://appleinsider.com/articles/12/12/21/ios-6-bug-reenables-javascript-in-safa ri-without-user-consent
So just be aware of that. But hopefully doing the above works for you!

Hod do I resize a large photo file for use on facebook? Ask your question.

I have very large macro photo flies in iphoto. How do I resize a photo for use in facebook?

export using the maximum size option - see the user tip on exporting for details on available options
LN

Resizing photographs for use on a website

Similar Messages

Maybe you are looking for