HOW TO RESIZE YOUR IMAGES FOR WEB

To Begin: File > Open > Your Image File.tif

There are a couple of image functions that you should check before resizing your image. The first step once you have opened your image is to check your documents Image Mode.

An image mode determines the number of colors that can be displayed in an image and can also affect the file size of the image. Photoshop provides several image modes: RGB, bitmap, grayscale, lab color, multichannel, and indexed color. Digital images for the web will almost always be saved in RGB mode and grayscale for certain black and white image conversion processes. (You can also desaturate an RGB image in Photoshop to create a black and white image).

  1. To check your image mode in Photoshop, go to Image > Mode. Select the RGB mode.

Bit depth specifies how much color information is available for each pixel in an image. The more bits of information per pixel, the more available colors and more accurate color representation. RGB images are made of three color channels. An 8‑bit per pixel RGB image has 256 possible values for each channel which means it has over 16 million possible color values.

2. To check your image bit size, go to Image > Mode. Select 8 Bits/Channel for web.

3. Now, adjust the resolution of your image in Photoshop by selecting,  Image > Image size.

When determining the correct size for an image intended for the web, the only numbers that matter are pixels (px). This measurement indicates how many pixels tall and how many pixels wide the image is. A pixel, in this case, is essentially a dot of color.

4. In the image size dialogue box select the arrow next to “Dimensions” and select the pixel mode.

Screenshot+2018-09-24+11.52.09.png

5. Select “Custom” from the scrolling menu next to “Fit To:”

6. Check the “Resample” box to ‘Automatic’ > Set the “Resolution” to 72.

**This should automatically adjust the pixel/width and pixel/height. (If it does not, make sure to select the chain icon grouping the width and height).

7. Close the dialogue box by clicking “OK”.

Generally, high-quality images saved for the web are 72 pixels per inch. Anything more or less than that will make the image way too big, or low-quality.

When it comes to image size, bigger isn't always better, as uploading larger images can affect site performance. Large, high definition images can have huge file sizes which cause delayed loading.

8. File > Save As > Your File Name

9. Format > JPEG > Select the “Adobe sRGB” color profile box


Save images in the sRGB color profile. If images don't look right on mobile devices, it's probably because they don't have an sRGB color profile and the image quality has been degraded.

IMPORTANT: It is very important that you save resized images as a separate file. Otherwise, you will degrade the size and resolution of your original image file. Images which have been sized smaller should NEVER be resized as larger, as multiple adjustments to your image size/resolutions will corrupt the integrity of your image quality.