Icon

How to Resize and Center Images for Website Components: A Step-by-Step Guide

Learn the best practices for resizing, cropping, and centering images for website components. Follow this easy guide to ensure your images fit perfectly and look professional on your site.

By Bangor University

In this guide, we'll learn how to prepare and resize an image so it fits well within a website component. We will cover how to insert an image, adjust its size and alignment, crop it to the correct proportions, and upload it to your site. This process helps ensure your images display clearly and look consistent across your website.

Let's get started

The best way to handle images so we can resize them for the component to be visible on the website is to follow this shortcut. I would insert an image. I would click Insert Picture, then Picture from File.

1
Click here
Step #1: Click here
2
Click on "Picture from File"
Step #2: Click on "Picture from File"

Let's see what logos I have on my desktop.

3
Click here
Step #3: Click here
4
Type "logo"

St. Paul's Research Unit, Research, St. Let's use Paul's iResearch Foundation logo.

5
Click on "Insert"
Step #5: Click on "Insert"

We can see that one is slightly too big, as it needs to fit into a specific part.

6
Drag here
Step #6: Drag here

In a rectangle, resize it by dragging one of the corners toward the center.

7
Drag here
Step #7: Drag here

That will resize the image.

8
Click on "】"
Step #8: Click on "】"

I think it looks good. Always click on the image and make sure it's centered. If the image is positioned to the right or left, adjust it so it is aligned to the center.

9
Click here
Step #9: Click here
10
Click here
Step #10: Click here
11
Click here
Step #11: Click here
12
Click here
Step #12: Click here
13
Click here
Step #13: Click here
14
Click on "I"
Step #14: Click on "I"

I will take a screenshot of that now.

15
Type "Shift + Cmd + 4"
16
Drag
Step #16: Drag

There we go.

17
Type "Shift + Cmd + 4"

Think about rectangles.

The reason is that when working with these components, the proportions need to be three to two.

18
Type "Shift + Cmd + 4"

We have this image.

Now, the next step is to add it to the image resizer at imageresizer.com to crop the image.

19
Click on "Cram Image"
Step #19: Click on "Cram Image"

We can crop the image by selecting it. We'll use the image we've created. Here, it shows us the proportions, giving us 1,300.

20
Click on "Select"
Step #20: Click on "Select"
21
Click on "...- 23 at 11.53.07"
Step #21: Click on "...- 23 at 11.53.07"
22
Click on "Open"
Step #22: Click on "Open"

That's not helpful because it needs to be three to two. For us, the closest one in that proportion is 1,200 by 800.

23
Drag "I"
Step #23: Drag "I"
24
Drag "I"
Step #24: Drag "I"
25
Type "1200"
26
Drag here
Step #26: Drag here
27
Drag "I"
Step #27: Drag "I"

We can see how that will be.

28
Type "800"
29
Click on "+"
Step #29: Click on "+"

I think that will be pretty good. Now, click on Crop.

30
Click here
Step #30: Click here

Ugh, not what I needed.

31
Click here
Step #31: Click here

Click Crop. I think the position of my face is not helping.

32
Drag here
Step #32: Drag here

Click on Crop. In the scene processing section, you will see that this file is saved in your download history with the recommended proportions. Now, go to the button.

33
Click on "Crob →"
Step #33: Click on "Crob →"
34
Click here
Step #34: Click here
35
Click here
Step #35: Click here

I'm going to use one of my trail pages.

36
Type "user + Enter"
37
Click here
Step #37: Click here
38
Drag here
Step #38: Drag here
39
Click on "Content"
Step #39: Click on "Content"
40
Click on "I"
Step #40: Click on "I"
41
Type "mk + Enter"

Now let's go to layout.

42
Click on "MK TEST"
Step #42: Click on "MK TEST"
43
Click on "Laygut"
Step #43: Click on "Laygut"

This is our card grid component. Let's add a new card grid.

44
Click here
Step #44: Click here
45
Click on "Configure"
Step #45: Click on "Configure"
46
Click on "Id Card"
Step #46: Click on "Id Card"

Going to add media.

47
Click on "ADD MERIA"
Step #47: Click on "ADD MERIA"

Going to choose a file.

48
Click on "Choose"
Step #48: Click on "Choose"

Now, we need to just ...

49
Drag here
Step #49: Drag here

This is the problem with the location of my face. To move it slightly, go to Downloads.

50
Drag here
Step #50: Drag here
51
Click on "Downl"
Step #51: Click on "Downl"

Hmm. 11:53.

52
Click on "Screenshot 2"
Step #52: Click on "Screenshot 2"

It should be loading, but it's very slow.

53
Drag here
Step #53: Drag here

I'm going to trust the process this time. Let's open it.

54
Click on "Ope"
Step #54: Click on "Ope"

So, we're going to go to St.

55
Drag "I"
Step #55: Drag "I"

Paul's Research logo. Logo of M, I, in purple and orange.

56
Type "St Pauls Research Logo"
57
Click on "I"
Step #57: Click on "I"

Going to save and select.

58
Type "Logo of an eye in purple and orange "
59
Click on "SAVE AND ELECT"
Step #59: Click on "SAVE AND ELECT"

""

60
Click on "INSERT SELECTED"
Step #60: Click on "INSERT SELECTED"

You can add your new title. This will be the edited logo, following the guide.

61
Click on "I"
Step #61: Click on "I"
62
Type "edited LOGO"
63
Click on "I"
Step #63: Click on "I"

You can add a link to something on a website.

64
Type "following little guide"
65
Click here
Step #65: Click here
66
Type "link"
67
Click on "lin√"
Step #67: Click on "lin√"

Let's update it.

68
Click here
Step #68: Click here
69
Click on "St Paul Rosea ... undation Logo"
Step #69: Click on "St Paul Rosea ... undation Logo"

Now we can see that the image is perfectly centered. It looks good, and everything works with it. This is a nice way to edit images.