Resize Your Photos for the Web with Fireworks or Photoshop CS6
You can resize your high-resolution images for publishing on a website with Fireworks or Photoshop CS6. High-resolution images have large file sizes unsuitable for display on a website. Images for the web need a resolution of 72 pixels per inch (ppi).
The size of the image is determined by where the image will reside. If you’re posting the image inline with text, you size the image smaller than you would size an image for a photographer’s gallery.
To resize images in Fireworks or Photoshop CS6, follow these steps:
1
In Fireworks, choose Modify→Canvas→Image Size.
The Image Size dialog box appears.
2
Enter a value of 72 in the Resolution field.
This doesn’t change the print size, but it does reduce the pixel dimensions of the image.
3
Enter the desired width or height in the Pixel Dimensions section.
You can enter either value because the option to constrain proportions is selected by default. Always keep the Constrain Proportions check box selected because otherwise, the image will be distorted.
Fireworks resizes the image to the desired dimensions.
5
In Photoshop CS6, choose Image→Image Size.
The Image Size dialog box appears.
6
Enter a value of 72 in the Resolution field.
This doesn’t change the document size, but it does reduce the pixel dimensions of the image.
7
Enter the desired width or height in the Pixel Dimensions section.
You can enter either value because the option to constrain proportions is selected by default. Never deselect the Constrain Proportions check box because the image will be distorted.
Photoshop resizes the image.
Web Design & Development Glossary
AJAX
asynchronous JavaScript and XML. A technique used in web page development.
Web Design & Development Glossary
API
application programming interface. A set of rules programs use to communicate with each other.
Web Design & Development Glossary
color stop
A special element that indicates a color to be added to a gradient.
Web Design & Development Glossary
FTP
File Transfer Protocol. A network protocol useful for transferring files in a client-server relationship.
Web Design & Development Glossary
HTML
HyperText Markup Language. The predominant language for building web pages.
Web Design & Development Glossary
HTTP
HyperText Transfer Protocol. The primary networking language for the Internet.
Web Design & Development Glossary
PHP
PHP Hypertext Processor. A scripting language that works well within HTML.
Web Design & Development Glossary
socket
A technology that allows remote computers to maintain a persistent connection in order to communicate with each other.
Web Design & Development Glossary
sprite
An graphic object on a web page that will be manipulated in real time.
Web Design & Development Glossary
SQL
Structured Query Language. A programming language useful in managing relational databases.
Web Design & Development Glossary
stateless protocol
An Internet procedure that completely breaks the connection between the client and the server after a transaction, meaning that the next transaction will require an entirely new connection.
Web Design & Development Glossary
Telnet
A network protocol useful in interactive, text-oriented communications.
Web Design & Development Glossary
W3C
World Wide Web Consortium. The organization that sets international standards for the World Wide Web.
