Image Resizing
Images for the web need to be resized from their original sizing. Many photo sources will give you a large image, which is several thousand pixels wide and high. Images that large will take a long time to load for visitors. This problem is compounded if they have slower internet connections or weak data signal. It's easy to forget how long a page will take to load working on-campus with faster internet speeds. And your browser will store a cached version of the photo, making it even faster. To see how long your website to load for a new visitor, try looking at your site on a different browser or your phone.
Then there's the matter of aesthetics. Everyone wants their images to look nice on their site, but it's not always straightforward. Check out our examples of images in different layouts in Drupal. There are specific pixel sizes listed to get you started.
Photo Editors
Images can be edited by many programs, and you don't necessarily need to install Photoshop.
- The built-in Windows programs Paint or Paint 3D can resize images by entering specific pixel sizes. It's good for a quick shrink to reduce its file size. You can also crop the image to change the aspect ratio of it to better fit the space.
- Pixlr Express is a web browser photo editing tool with a simple interface. It has a limit now for how many photos you can edit in 1 day. Great if you need to edit just a couple of photos.
- Gimp is a free and open-source program that is an alternative to Photoshop. Available for both Windows and Mac.
- Photopea is an in-browser alternative to Photoshop. This is a great option if you don't want to install a program.
- Photoshop is great for resizing and croppping all in one step. Photoshop licenses are available through the Service Desk--talk to your supervisor about getting one.
Compressing
Resizing your images to be smaller is a great first step in reducing load times, but it's ideal to compress the images as well. A compressing tool will make minor changes to the photo that aren't going to be noticeable to the human eye, but will make the photo file even smaller.
Squoosh or Compressor are simple in-browser tools that will compress images for free. You upload your image, compress it, and download the compressed version.
Squoosh allows you to resize the image and compress it. Compresor has their resizing feature behind a paywall.
Other Image Tools
Aspect Ratio Calculator is useful for knowing the aspect ratio given a pixel height and width.
Batch Resizing with Photoshop speeds up processing a lot of images. This is good for shrinking images that are all the same dimension and there's no cropping involved. Automating cropping generally isn't recommended. It could cut out a necessary part of the photo, but could work if you had a batch of photos with similarly placed subjects.