How to prepare images before uploading to your website

Let me teach you the basics of how to make your images optimized for the web.

1. Cropping and Resizing

In Bootstrap 4, a common 2 column layout, the main column is 730px wide. Alternate layouts can be around 825px wide. So images in a main column with a sidebar should typically be up to 830 pixels wide and no more.

An HD monitor is 1920 pixels wide and 1080px tall*. So if you're uploading an image that's meant to be a background image, or an image that spans the full width of the screen, then making an image 1920 pixels wide should be a perfect fit.

* The screen might be 1080 pixels tall, but the actual viewport is a bit smaller. So if you want to make an image that takes up the a quarter of the screen, then cropping an image to 1920 pixels wide and 250px tall might be a good size.

You should crop images so there's little to no whitespace padding inside the image itself - don't try to add your own padding or spacing inside the image itself. The website should handle the spacing for you. And even if your website has special treatment on the image, don't include borders or overlays - the website will typically automatically do this for you.

But how do I know the size of an image on the website?

Sometimes you'll need to figure out the size of an image. Here's the way I do it:

1. Open Chrome and browse to the web page
2. Find the photo you want to know the size of
3. Right click and click "Inspect"
4. A "DevTools" window will pop-up
5. Click the little pointer icon in the top left of the DevTools window
6. Then click on the image in the browser
7. If you did it correctly, a little tooltip will appear and it shows you the dimensions. The first number is the width in pixels and the second is the height in pixels.

Takeaway: If you're uploading a photo to a website, it shouldn't be 4000 pixels wide and 3000 pixels tall. This is way too big. Crop and resize to an appropriate size for the space. You should never need an image that is larger than 2000 pixels wide.

2. Choosing File Types

This is a general rule of thumb: Photos should be .jpg. Graphics like logos or icons with simple colours and transparency should be .png.

The different files types are because different formats have pros and cons. jpgs are good at photos because they can have lots of colours and details and still maintain a small file size. pngs have the ability have a transparent background.

Takeaway: Photos are jpg. Graphics are png.

3. File names

File names should be simple, relatively short, and contain neither spaces nor special characters. Special characters being any of these $?`()[], for example. 

Bad file name example: MY_GREAT!_photo_V_RGB (1).PNG

Good file name example: my-great-photo-v-rgb-1.png

Websites can get confused and may not display your images if you don't name them properly. For example, if you're uploading an image to the website and it has spaces in the filename and it's a background image, then it might not show up at all.

Takeaway: Simplify the filename and don't include spaces.

4. Compressing images

Once you have cropped and resized your image, it's a good idea to put it through a compression service to make the file size smaller. This makes it download faster for the end user. 

You can put drag and drop pngs or jpgs to https://tinypng.com/ and it will compress the photos or images. Once you do that, download them back to your computer and they will be ready for the web. 

Takeaway: For a photo, the file size should probably never be larger than 300kb (on the heavy side). For an icon, it should be less than 20kb.

TL;DR

1. Crop and resize your image so that it's a realistic size for the website.
2. When saving the file, make sure it's the appropriate file format: jpgs for photos, png for graphics
3. Make the filename simple and don't include illegal characters
4. Compress the file using http://www.tinypng.com/