Kitchen Table Web Design

Affordable Website Design Auckland specialising in taking local small business websites to the next level and basic SEO Services.

  • About
  • Small Business
  • Non-Profits
  • WordPress
  • SEO
  • Pricing
  • Articles
  • Contact
Phone :09-296-1939 or 027-608-2001 Email: tarnya@buildyourwebsite.co.nz
You are here: Home / WordPress Tutorials / How to resize and crop an image

How to resize and crop an image

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

Children standing in a meadow on the hands on the green grass

 

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.

    1. Resize the image to 150px height in your photo editing software : it will now be 236px by 150px highresize the image first
    2. 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. canvas size

Leaving our 150px by 150px image with the child as the featureimage 150 by 150

 

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
Infographic showing how to select image format, gif for animation, do not need high resolution use jpg

Selecting the right image format Source: Google: selecting-the-right-image-format

 

Kitchen Table Web Design

2 Bunnythorpe Road
Papakura, Auckland 2110
Phone: 0276082001
Email: tarnya@buildyourwebsite.co.nz
  • Facebook
  • Pinterest
  • WordPress Help NZ
  • Website Design South Auckland
  • Website Design Services
  • Website Pricing
  • Website Design Portfolio
  • Articles
  • Blog
  • Technical Tutorials

TIPS TO GET MORE FROM YOUR WEBSITE

Copyright © 2019 Build Your Website with Kitchen Table Web Design