Before adding any pictures to your website, they need to be prepared in a specific way. This is known as optimizing images for web. It’s important to optimize in order to achieve a small file size (small file size equals fast load time), and to have control of the background. The two most common extensions for web images are .jpg and .png.

Brief explanation which to use when:

Use a JPG when:

• • You want a very small file size (usually produces a smaller size than PNG).
• • You want the background of the image to be white on your site. (a)
• • The spot where you are putting the image on your website is a solid block of color. In this case, you will need to place a box of that solid color on the layer behind the image in photoshop. (b) In order to see the color background, you may need to cut out negative space from the picture.

Use a PNG when:

• • You want a transparent background for your image, because the spot where it’s going on your site has a textured or graphical background. (c)

Other tips to know before you begin:

1. When saving and naming any files that will be used in a website, be it images, HTML pages, scripts, etc., do not use spaces. If you must have a separation in the name, then use an underscore (_). Spaces could corrupt files later.
2. Try to keep all images that are not in a portfolio or slideshow below 30K.
3. Make sure your website folder is organized correctly before you start saving.

Preparing JPG images for web in photoshop:

1. Go to File > Save for Web & Devices
2. Click “4-Up” at the top of the dialog window. This will show you your image at four different quality levels. Then click on the top right box, this is the one you want to focus on. When it is clicked, a blue outline will appear around it.
3. Look below that box, and you’ll see the file size. ie. 20K.
4. Make sure under “Preset” (to the right of the dialog window) it says “JPEG.”
5. Now click the blue arrow next to where it says “Quality,” which will reveal a slider. Move the slider left and right while looking back below the image box to check its file size. Use the lowest quality (don’t go below 30) you can to make the image as clear as possible, with the lowest file size possible.
6. Hit save and place in your web images folder.

Preparing PNG images for web in photoshop:

1. Use steps 1-3 from the JPG set up.
2. Make sure under “Preset” (to the right of the dialog window) it says “PNG-24.”
3. Check the “Transparency” box. You will notice the grey and white checker pattern behind your image to show that it will be transparent.
4. Hit save and place in your web images folder.

Overview:

• • The smaller the file size = the faster the load time
• • JPEGs generally yield a smaller file size
• • Use a PNG for images that you want to have a transparent background
• • Try to keep general images for your site above 30 quality and below 30K
• • Don’t use spaces in any web file names

Tags: file size, files, JPG vs PNG, optimizing for web, photoshop, pictures, Preparing Images, saving, transparent background, Web & Devices, Website