Workshops

1.10 - Working With Images

Remember in my last lecture how I mentioned image size as something you want to consider?

Well, in this lecture we’re going to talk about WHY image size is important, how you can figure out what image size you have, and how you can resize images if they’re too large.

First things first…

How Big Are Your Images?

Whether you’re on a Mac or a PC, there is a pretty easy way to look at an image file and figure out what it’s dimensions are.

On a PC if you hover over the image, it shows you the “dimensions” in pixels.

You can also right click on the image, and then choose “Properties” and go to the “Details” tab.

On a Macbook, you can see your image size using your finder window. If you choose to show items in columns, and then click on an image, it displays the dimensions under the preview for that image.

When we’re working with Divi for our website, here is a cheat sheet with the image sizes we’ll need — don’t worry too much about the column size information right now (you’ll understand this more once we start working in Divi). The most important pieces to remember are that background images will likely need to be 1080 wide, usually by about 810 tall. If you aim to have at least a few images that are at least that big that also meet the criteria discussed in the last lecture, you should be okay.

Why Image Size is INCREDIBLY Important Online

Making sure we have the right images at the right size is incredibly important when you’re building a website. It’s tempting to just make all of your images 1080 x 810 and call it done — but if you only need an image half that size, you’re doing yourself a disservice.

When working with images on a website we always want our image to be just big enough and no bigger — that’s because images have a serious impact on the amount of time it takes a webpage to load. And if a website doesn’t load quickly, then users go elsewhere.

However, we do want to ensure our images are big enough; different people will be visiting our website on different screen sizes, and we want our images to appear crisp and attractive no matter what the screen size.

So: take the time to resize your images as you go along, so that you always have the right size image for where you plan to use it.

How to Resize Images

Personally, I use photoshop when I’m working on websites, but since Photoshop is expensive and I have it because I do a lot of other things using it too, I wanted to find something that was free that you guys could use for the purpose of this class.

The solution? Photo Pea - www.photopea.com.

This site will let you resize any images you’re using for your website totally free. I put together a short video to show you how it works.

Please note - you do not HAVE to use photopea. If you have a preferred program and know how to use it to resize your images, feel free to use any program you’d like!

To begin, go to Photopea.com and click file then open. Locate the file you want to work on, where ever you saved it on your computer.

Once your image opens, go back to file and choose “new” from the menu. Create a new project in the size dimensions that we want to create.

In this case, I am going to create an image 1080 x 810 and 72 dpi.

Then click “Create.”

This will leave us with 2 image tabs at the top of the screen — one will have our original image and one will be our new project, with a blank white square.

Now we want to move our image into our new project — so click on the tab for our original image. Then click on the image and, holding down your mouse button, click and drag the image to the new project tab.

This will drop your original image into your new project, but the image will be too large for the frame. That’s okay — we’re going to resize it. Click the box to turn on “transform controls.”

This will turn on the settings so you can resize your image. Once you check the box, you’ll want to press and hold SHIFT down, and then use your mouse to click and drag the corner bounding box in; this will resize the image proportionally, making it smaller.

Let go of your mouse button and then let go of shift — then you can click with your mouse and drag the image to the center again. Repeat this until the image fits within your project square.

When done, it should look something like this.

Now we need to export the image and save it to our computer. Go to File then Export. If we’re resizing a photo, export it as a jpg. If you’re resizing a logo or something that needs a clear background, export it as a png file.

Name the file something that will be useful for future reference.

HOMEWORK: Choose one of your images and resize it to 1080x810 to practice.