Web site design

What size should an image be?

Most websites, even with large pictures, load quickly. But you still need to be careful about image sizes. Basically, “large” images look great, but can take longer to load. If they are too slow people may move to another page or site. So upload the largest size you think you’ll need (but ideally, no larger than this). A whole page image or a full width banner will need to be uploaded as a large file. Whereas an image that only ever sits in a small box on a page, can be uploaded as a smaller file. Images have:

• file dimensions (width and height – in “pixels” or “px”) and
• a file size (kilobytes KB or megabytes MB). There are many programs that help you reduce the size, while maintaining as much quality as possible (e.g. photoshop, irfanview and many online ones).

What WordPress does for you

When you insert a picture from your Media library into a Page or Post, WordPress has a set of different (but fixed) sized copies, and uses the appropriate one depending upon where it is going to be used/what size you choose. So if you have uploaded a huge image and are just using it as a small version, a reduced size copy is inserted into the page and not the original. Also WordPress helps/allows the browser that’s viewing your site to choose the correct size version, based on the space the image is taking on your page and the quality of the screen. So, for example, if you upload an image of 2400 px, most people will upload and see a smaller version, but people will higher quality screens may get the larger version.

Screen sizes most commonly used in 2021

 

What size should I upload?

Below are some approximate guidelines (and don’t get hung up on these, unless your site is a commercial one – just slows loading of your page a little) Largest: at least 1600 px x 1600 px, but not larger than 3000 px x 3000 px WordPress will output your images in a format that allows the browser to choose the correct size based on the space the image is taking on your page and the quality of the screen. So just because you are uploading an image at 2000px, for example, most viewers to your site will see it in smaller dimensions and not have to load that large of an image, but you will still be supporting higher quality screens and different layout options.

• Full screen images [2400 pixels wide / 200 – 400kb]
• Banner images across the top [2400 pixels wide / 100 – 200kb]
• Smaller images within/next to text [800 pixels / 30 – 100kb]
• Featured images (used for Posts) [800 x 600 / 30 – 100kb]

Here’s a site with detailed explanations on all this

Before uploading an image

These are some steps (some optional) to take before uploading the image to your website

• Crop the image if necessary. And remember to make a copy of it and reduce that – so you always have the original, high quality one if you should need it.
• Reduce the size/compress the image if necessary. (And again – work on a copy!)
• Choose the right file format if possible – generally, choose JPEG for photos and PNG for graphics.
• Important: Rename the file before uploading. SEO (search engine optimisation – being found by search engines like Google) is helped by media files having sensible file names, Titles and Alt Text entries. So rename it before you upload it (you can’t change this later).

 

• A site with useful info about image sizes and compression etc
• A site with useful info about compression

• Go to ‘Media’
• Click on ‘Add New’
• Either ‘Browse’ or click-and-drag image

Insert image into page

• Click where you want the top of the image to be
• Use the ‘Add Media’ button just above your toolbar
• Choose your media (you can also upload new images from here)
• Fill in the appropriate details
  • Title – your chance to add sensible, short phrases that will help your SEO
  • Alt Text – ditto for Title (this is used by screen readers for people with sight issues)
  • Caption (optional) – appears underneath your image
  • Alignment: ‘Left or Right’ – will wrap text round the image. ‘None’ – puts image on its own with text above and below (but not wrapped around). Note you can then centre it on the page if you want.
  • Link To: ‘None’ (other options ‘Media file’ = on click image opened over top of page / ‘Custom URL’ = on click goes to the URL you specify)
  • Size: Avoid Thumbnail. You’ll get used to which size you want. And you can resize it once its inserted.
    • Choose the smallest size (loads quickest) that you then reduce (if necessary).
    • NEVER, expand an image as it will look grainy and poor quality.
• Click ‘Insert into page’

Image alignment

‘Left or Right’ – will wrap text round the image. ‘None’ – puts image on its own with text above and below (but not wrapped around). Note you can then centre it on the page if you want.

Editing an image once its been inserted

Click on image and then …

• Click and drag corner handles to change its size on the page
• Choose word-wrap alignment from menu that appears and if you choose ‘None’ you can then use alignment tools in main editing toolbar (see image)
• Click the ‘Pencil’ to Edit other aspects of image

Video on Editing a Page in WordPress Starts with editing a page or post – inserting an image starts at 5.25 Detailed webpage covering most options when using images