IT Sorted

databases, websites, IT solutions

  • Home
  • Services
    • Training on Zoom
    • Zoom event management
    • Databases and Systems
    • contactLINK
    • careLINK
    • Web site design
  • Support
    • Remote Support
    • Our Clients’ Support
    • Training & IT help
    • Zoom event management
  • About Us
  • Contact Us
  • ITs not just IT
    • Subscribe to my mailings
    • Climate & Environment & Extinction Rebellion
    • Online Discussions
    • Blog

Images for your website

25th October 2021 By Massimo Giannuzzi

All photos, images and PDFs will be stored in the ‘Media library’ of your website.

You can upload new images there, and then insert them into Pages and Posts.

You can insert individual images or sets of images in galleries.

What size images should I use? (a brief summary)

Active Hope imageSmall images that will be inserted in a page (maybe to the left or to the right and with text wrapping around them – such as the one to the right here) don’t need to be large.

Pictures that are more crucial are:

  • the ones that stretch across the whole width of the page, such as the “banner” at the top of each page
  • or what’s often called a “hero” image, which perhaps takes the whole screen when you first arrive at a website
  • also, those strips that run across the whole width of the page on some home pages

These ideally need to be a minimum of 1600 to 3000 px wide. Otherwise, they can look blurry and unprofessional.

And remember that if only a certain part of the image is to be used, then it’s that bit that needs to match these minimum measurements, and not the whole width or height.

Where should I store them and how should I name them?

  • Consider keeping all the images for your website in one folder on your computer (and ideally backed up).
  • If you have a particularly large website, with many images, you might benefit from using multiple sub folders.
  • Name each original image to help you identify them easily later on (especially if you come back to them after a year or two).
  • Important: keep the original image on your computer untouched. Make any changes (like cropping or compressing) to a copy of it.
  • Name your files before you upload them to your website. Choose descriptive names that will contribute to your SEO score.

SEO is search engine optimisation = being found by search engines like Google.

You can improve your SEO in many ways. One of which is by having images with sensible ‘File Names’, ‘Titles’ and ‘Alt Text’ entries. These should include phrases that people might be searching for.

So, for example, I have help pages for people using Zoom. The name of one of my images is “Zoom Breakout Rooms Mobile closing notice cropped” – so it will contribute to being found by people searching for “Zoom Breakout Rooms” or “Breakout Rooms on a mobile”.

The “cropped” on the end simply helps me know its been cropped from the original.

This is a very useful article on using images in your website and SEO

 

More detailed information on using images

What size should an image be?

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

Website design - Screen sizes as of 2021

 

Website design image sizes on a pageWhat 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

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
Uploading an image to your website
  • Go to ‘Media’
  • Click on ‘Add New’
  • Either ‘Browse’ or click-and-drag image
Insert an image into a page or post

Media insert into page

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.

Image alignments

Editing an image once its been inserted

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

Media alignment

More help

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

 

Filed Under: Website design

straightforward database solutions and websites for small to medium sized organisations

© 2019 ITsorted

Email us

or call 01364 716299 / 07795 257849

ITsorted logo

Copyright © 2022 · Outreach Pro On Genesis Framework · WordPress · Log in