Search
Expand Article

Resizing Images

Why resize?

For proper display on a website, images you upload may need to be resized to specific pixel dimensions.

A pixel can be thought of as one colored display dot on a computer screen. The display size of web elements is typically measured in pixels (instead of inches or centimeters). For reference, the width of the smaller common desktop computer screens is about 1000 pixels.
A pixel can be thought of as one colored display dot on a computer screen. The display size of web elements is typically measured in pixels (instead of inches or centimeters). For reference, the width of the smaller common desktop computer screens is about 1000 pixels.

For example, a slideshow block will not automatically stretch or shrink an image to fit the given area, it will only display the image at its current resolution _ its current pixel dimensions. If the image is too large, portions of it will overflow or be cut off. If it is too small, the image will not cover the entire area. In the examples below, notice how the image of the rhino displays when not sized to the correct pixel dimensions.
Example Too Large  Example Too Small

Choosing your software

Most photo editing software can be used to resize images, as your Elexio website does not include tools to do so. While certainly not the only good option, Adobe Photoshop Elements is great entry_level software, featuring a robust toolset while remaining fairly inexpensive. For those looking for something free, Paint.net is good choice. Information on other photo_editing software can be found online. A simple web search of "photo editing software" will yield multiple results. For specific instructions on the steps below using your particular software package, please see the help material that came with your photo editing software.

How to Resize Images

  1. Resize to lower the resolution: The resolution of most images must be reduced before you can fit the subject material within given pixel dimensions. In other words, the pixel dimensions (height and width) must be reduced. For example, lets assume you want to place the image of the rhino below into a slideshow area that is 443 pixels (px) wide by 232 px high. However, the starting resolution of the rhino image is 1600 px wide by 1200 px high _ too large. Therefore, you first will need to resize the image so the rhino will fit within the given pixel dimensions.
    Example Image resize
  2. Crop for a final fit: Once you have lowered your image resolution, you may still need to crop out portions of the image to arrive at the correct pixel dimensions. In the example below, we have lowered the image resolution so the width is now 443 px. However, the image is still too tall, so we must crop out the portions we don't wish to use. (The white shaded area represents the area to be kept).
    Example Image Crop
  3. Finished Product:
    Example Image Crop
Back to Top