Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Using Images on your Site

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The next thing we’ll talk about in this How to Add Content to a Professional Services website lesson is how to use images on your site. WordPress has of variety of different ways that it uses images.

Ways Images are Used in WordPress

  • Images as a Logo
  • Featured Images
  • Inline Images
  • Thumbnail Images
  • Background Images

Let’s take a look at some examples on byobwebsite. So, you can use images as a logo which is what this is here. You can use images as featured images which is what you see here – there are 3 images across with a blurb of text below.

WordPress uses images inline which is what most of you are used to actually. That is images you place in the content of a page or post. Well, I don’t really use inline images a lot so let’s look at our sample site. Here I use inline images. One shows up next to each page blurb.

You also have them in the form of thumbnails, like this here. It is a thumbnail image. And then you also have background images. In this case on our sample site, this big image of the house here, that is a background image. Actually, so is the very like gray gradation of color comes from a background image.

So those all the types of images that you will find. There’s thumbnail images, featured images, background images, logo and inline images.

Image Sizing in WordPress

When you upload an image to WordPress, it creates several different versions of the same image and it does so based on three different things.

  • Default Sizes
  • Custom Image Sizes
  • Responsive Image Sizes

One, based on default image sizes that come built in with WordPress. Two, based on custom image sizes that themes and plugins can add.

Responsive Image Sizes – Automatically Created

And, third, based on responsive image sizes which is something that’s very new in WordPress. These are invisible to you. You don’t really see them but this image right here actually has several other sizes that are created. WordPress will show different image sizes depending upon what kind of device is looking at your page.

Let’s come over here and inspect the element. I know this is beyond what a beginner is likely to do but I want you to see that there are a number of different source URLs. Here is the source URL, the main source URL. Then there is a source set, that’s what this is called. There’s one that is 720 by 481. There’s another one that is 360 by 240. There’s another one at 768 by 513 and another one which is the full size that’s used at 850 pixels wide.

All of this happens without you knowing about it. All of these image sizes are constructed in the background for the purpose of serving smaller image sizes on mobile devices. It will serve an image that isn’t as big and therefore will load more quickly.

So, we have all those different types of image sizes and and all of those are stored in uploads directory. If you were to go in your uploads directory and say yourself “Hey I only uploaded one image and I see seven of them with the same or similar name”, the reason is that WordPress created them for use in different applications.

Default Image Sizes

Let’s take a look at the built in or default image sizes. Go to Settings and Media. This is where the media settings for image sizes are set. By default WordPress comes set up with 3 sizes.

  • Thumbnails at 150 by 150
  • Medium size at 300 by 300
  • Large size at 1024 by 1024

Large, medium and thumbnail, those are the default sizes. Ordinarily if you are inserting an image into a post, you have the choice of full size which is however big you uploaded it.

Custom Image Sizes

There are also custom image sizes and those custom image sizes are very theme and plugin dependent. For example, my Agility Skin for Thesis provides two additional image sizes. It creates the tiny thumbnail image size which is what this is here. And it creates the featured page image size which is what this is.

So in an Agility site you have five or six image sizes to choose from. You have the full size, the large, medium, the featured page, a thumbnail and a tiny thumbnail to choose from when you’re picking the image size. What you pick depends on how you are using the image.

We are going to talk about the right size image in a bit. These are the defaults we just talked about and they should be set to match your website. In our case, these settings are not correct. We are going to change these settings when we get to the point of evaluating what the right size should be.

Have Images for All Your Pages

Images are important for websites. They don’t have to be perfect images and they don’t have to be beautiful images but they are important for websites. I strongly suggest that for every page you create you have some kind of of an image. That can be an image that you took or it can be an image that you have purchased.

Where to Purchase Images

A place to purchase images is dreamstime. This is one of my favorite places for for getting images. You can see that I’ve downloaded 736 images from these guys. Most of them I never really used. I get all my little cartoons from here and and sometimes when I’m working with a client and I let the client come and pick out images to use.

Regardless of what the image is even if it is clearly a stock image, you want to pick out an image for for every page. And dreamstime is a great place to do it but there are other places as well. These people have a tendency to be less expensive than some others.

Where to Get Free Open Source Images

There are also open source images. Pixabay is a good place to get free images that you can use absolutely any way you want. They also sell images. This background image here that I’m using and that comes automatically with the skin was a free open source image. Anybody can use it and anybody can redistribute.

You may also look for those because there are literally thousands and thousands of images that you can use any way you want. And that you don’t have to purchase. There is nothing wrong with purchasing pictures especially ones that make the job of finding images easier. The one downside of searching for images is that you can really waste a lot of time looking for just the right image.

Anyway, Pixabay is a good source and dreamstime is a good source. I use both of those sources. Every once in awhile I give away image packs for certain things and sometimes that those are from Depositphotos because I can buy those inexpensively That’s another place you can use.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment