Image sizes and image scaling

Image sizes and image scaling

The images below look like they're about the same size, but they aren't. The picture "IMAGES" is 1270x300, the correct size for a header. "THIS IMAGE IS TOO BIG" is 2000x700 pixels, the purple area in that image is acually 1270x300. Our website software (Drupal) has squeezed the image so it will fit on our pages (if you click "Edit" on this page, you can see the images full size in the editor window). What this means is that you can insert any sized image into the text and it will be OK (as long as the file size is under 2MB)!

Odd-sized images don't work so well as headers, though. If you look at the header for this page, it's the same file as "THIS IMAGE IS TOO BIG" below. However, because it's a header, there is a maximum height and Drupal has cropped the image: you can't see the text on top or on bottom. But if you look at the teaser on the Help page, Drupal has kept the vertical dimensions and chopped off the sides. If your image is not large enough, the tool will not accept it at all. It's a bit of a mess! The only way to control which bits get chopped off is to use a photo editor. Look below for some general tips.

Photo editors

  • Photoshop is what the pros use, and they pay a lot of money for it (between CHF20 and CHF50 a month). However, if you work for a public school in Switzerland, especially at tertiary level, it's worth investigating whether or not your institution has an arrangement that provides staff with Adobe Creative Cloud licenses. 
  • GIMP is a very capable open-source image editor. It does 95% of what Photoshop does and it's free.
  • I used GIMP for years before I got my Adobe Creative Cloud license through my institution (thank you, HES-SO!). I still have it installed on my PC and will go back to it in a second if I ever lose access to the Adobe products. 
  • There is abundant information online about how to do things in these programs, search Google for "how to remove background gimp", for example, and you'll find instructions. Same with Photoshop.

Image sizes

  • You might need to Google a couple of these steps because it will take too long to go over absolutely everything here. 
  • Always start with an image that is too big and then reduce the image size. If you make a small image larger, you will see the low resolution--image software can't add detail that isn't there in the original.
  • Making the image less than 2MB (the size limit for the website)
    • Your image is probably too large or in the wrong format.
    • Open the image in your image editor (GIMP or Photoshop).
    • Find the menu item "Image size..."
    • This should open a dialogue box that shows the current pixel dimensions of your image. Click on one of them and type a new (smaller) number. 1440 x 900 is big enough for most screens. Click OK.
    • Go under the "File" menu and select "Export as..." This will make a new image for the website. If you use "Save as..." you will be saving the document in a Photoshop/GIMP format so you can work on it again later, similar to the way you can save something in Word (so you can easily edit it later) or save it as a PDF (so you can send it to someone and they can't easily edit it).
    • In the "Export as..." dialogue, choose the location where you want to save your image. Then choose the image type ".jpg" from the pull-down menu at the bottom of the menu. 
    • Give your file a name and click OK. 
    • Another window will pop up with Compression options, or something like that. Your image should already be small enough, so you don't need to compress it. If you want to, you can use anything between 70-90% and it will look fine on the screen. 
    • Please note: having small image sizes is important on web pages, but these images will look terrible if you print them out! Printing requires much larger images and is a very different situation, this advice is only for web images. 
  • Making images exactly 1270x300 pixels (or other exact sizes)
    • Make a new image in your image editor with your desired pixel dimensions (there should be options when you click "New...").
    • Copy the image that you would like resized (remember that you should only shrink images, not try and expand them) and then "Paste as a new layer" in the document with the correct dimensions.
    • Use the "Scale" and "Move" tools to get your image the right size and in the right position.
    • Follow the instructions above for "Export as..." to save your image as a jpg that you can then put on the website.