Here is how to resize and crop an image to an exact size. This can be useful when you want to select a particular portion of the photo, and you don’t want to use the WordPress media editor. Or sometimes a complicated styling problem can be quickly solved by using an image in the exact correct size or the right portions.
Paint.net is a free image editor software programme which I like.
This image is 435px × 276px
I want to create a thumbnail 150px by 150px. I would like to have the full height of the image included and focus on the child.
- Resize the image to 150px height in your photo editing software : it will now be 236px by 150px high
- Canvas Size – select the width and choose the orientation of the crop. You can see the blank squares where it says “anchor”, and you can select which edge of the image will be removed – like taking a pair of scissors and making a landscape image square.
- Resize the image to 150px height in your photo editing software : it will now be 236px by 150px high
Leaving our 150px by 150px image with the child as the feature
The above photo shows what the default thumbnail looks like in WordPress.
A quick aside: My preference for format choice for images for a website is usually png because
- It support transparency
- I can match the exact colour in the image to a background colour. I have had a frustrating experience with a jpg image and colour: I set the background colour from my image to match my exact hex# of the website background, only to find it didn’t match once uploaded. The problem was solved by saving in png format.
- It is better for any text or fine details like lines on a diagram included in the image. (Note that text in an image is not readable by screen readers so it is not ideal (at least use alternative text) but it sometimes required. ) The info-graphic below is in png format
Selecting the right image format Source: Google: selecting-the-right-image-format