how do I make pictures the same size

[monere]

Hi there! The following question might have a simple answer, but I can’t find it. So…

how do I make pictures of various sizes the same size while still maintaining the clear details of the pictures? More specifically, I’m trying to make the front page of my website (I don’t have the website yet) display 4 images arranged like windows 8’s icon (http://www.7tutorials.com/files/img/win8_icons/w8li1.png). OK, the pictures can not necessarily look EXACTLY like in the icon (they could be straighten up for example, instead of oblique), but the width and height should look similar.

So, I want 80-90% of the space on the front page to be taken by 4 images (which I already have, but which need a bit of editing), but the problems are 2 as I discovered:

1) 3 of the images depict products (of the company I work for) that have relatively similar size, while the 4th one is much higher than wider (does this make sense?). This is important for me because if I make the 4th picture the same size as the other 3 (namely, 470 x 400 px), which is what I want to do anyway, then the product in the picture gets bloated (not sure if this is the word I’m looking for, but I am hoping you figured out what I meant);
2) if I click on “custom size” in the image editor window on the page I inserted the image in the image is forced by wordpress to keep proportions. Sorry that I can’t explain any better than this, but I’ll give you an example of what I mean. Say that I want my pictures to be all 470 x 400 px, but the images I have are 600 x 330 px. Well, if I insert the picture in the home page editor and click on “edit image”, then click on “custom size” and enter in the first value (470) WP automatically adjusts the second value to 256 px (or whatever), instead of allowing me to set it at 400 px. And vice-versa (if I set the second value at 400 px first WP automatically adjusts the first value to 780 px, or something like that). And this really bothers me because I can’t get the desired aspect.

Also, I looked through this theme’s options and all of them deal with featured images only, instead of in-content images.

So, can someone who has knowledge about this aspect share some tips on how to obtain that windows icon look-alike aspect of my front page?

[scrambler]

There are two components to pictures. Their resolution and their aspect ratio (proportion, height over width).

If both pictures have the same aspect ratio, then you can just scale one to match the other. It is best to scale the bigger one down rather than scale the smaller one up, as that would reduce quality (blurry image)

If both pictures do not have the same aspect ratio, they will never be the same size in both direction unless you do one of two things.

Scale one in one direction to match the other which will distord the image

Crop one to match the other which will lose a piece of the image.

So you need to elaborate, because it sounds like you are hoping for a miracle.

Notes:

WordPress editing tool does include both a scale AND a crop, but it would be a lot easier to prepare your images using an image editor.

You also need to precise if you need images to be independent because they will link to something. If not, you could compose all of them into a single image using an image editor and make your life easier.

[monere]

Thanks for the tips 🙂

Now that you’re mentioning, I did take a look at the images and they’re all 1600 x 900 px. The problem is that one of the images was taken with my smartphone being held vertically (since the item I photographed is bigger then the other 3), while the other 3 images were photographed horizontally. They all ended being 1600 x 900, but the vertically shot one needs to be rotated by 90 degrees in order for the item to appear correctly, and if I rotate it then the image changes from 1600 x 900, to 900 x 1600. Also, yeah, the 4 images will link to my website’s categories.

So, in these circumstances do you think it’s better if I took another picture of the troublesome item (the one that is different in size then the other 3), but this time with my phone being held horizontally? And if I do this then the item will not be seen in great detail… I think. Or is there a better way?

[scrambler]

I am still unsure of what you are saying.

If images (in the orientation they need to be looked at) are 1600 x 900 and one is 900 x 1600, then the last one does  not have the same ratio as the others.

So the last one (a portrait type) will never be the same size as the others (landscape types).

You can scale the last one so that it is as high as the others (900 px high) but then it will be a lot less wide.

I think you need to create an image of the layout you want and explain what issue you are having to accomplish it

[monere]

OK man. Look at the 4 images below:

http://s16.postimg.org/xe3lkqj1x/WP_20150817_12_18_19_Pro.jpg
http://s28.postimg.org/szuw5gjyl/WP_20150817_12_15_22_Pro.jpg
http://s21.postimg.org/l11x3iyiv/WP_20150817_12_24_58_Pro.jpg
http://s22.postimg.org/nbuxakftt/WP_20150818_16_58_40_Pro.jpg

As you can see, all of them are 1600×900, but the first image doesn’t look straighten up. The item in the image I mean. So, I need to rotate it by 90 degrees clockwise but if I do this, then the picture becomes 900×1600, instead of 1600×900, and in changing proportions it might be harder to scale (like you mentioned). And I want all these 4 images to be arranged windows 8 icon-style like I said in the beginning, but also the images to be seen in all of the details (I’ll still have to edit the images a little, remove backgrounds, etc.), but largely, that’s what I need and don’t know how to do with weaver theme. A premium theme would do the job, I know, but who has money for that? Not me anyway, and not yet

[scrambler]

If you want all your images to have the same size and proportion, you need to edit each one and do the following:

Rotate them to the proper orientation

Crop them to a common image ratio (like a square)

Scale them to the same resolution (the resolution of the smallest one after croping)

You could probably do that in WordPress in the media library, but it would certainly be easier in an image editor. If using WordPress and you need help with how to do these 3 things in the WP image editor, look for tutorials on youtube

Then lay them out using a WordPress gallery.

[monere]

Thanks! I’ll do this come tomorrow, and will let you know how it turned out 🙂

[Bobthearch]

The easiest and fastest way is always to crop and edit the images to the desired size before you upload them.  🙂

[monere]

thanks bob. Will do so 🙂

[Author]

Posts