Instructor: Besides text,
images are the most important content of any webpage.
And so let's now learn how we can use images well,
when to use images, and also what images to actually use.
So essentially, we can use four different types of images.
Product photos, storytelling photos,
illustrations, and patterns.
And so let's now take a look at examples
for each of these four types.
And starting with product photos like these ones.
There, well, as the name says,
to basically illustrate the product
that you're trying to sell on your website.
And that is true for physical projects
and also for digital projects, of course,
which many times are illustrated using some screenshots
of that product.
Now, just like before, I'm not gonna spend a ton of time
on all of these examples,
but instead, I want you to download these slides as a PDF
and really study all the examples carefully by yourself.
So that will really help you assimilate all this material.
And so I hope that maybe you are even following that PDF
as you go through the lecture like at the same time.
But anyway, now moving on to storytelling photos.
These are basically photos
that will help you convey the message of your website.
So these photos don't show the product itself,
but they might show someone using the product
or also anything else really that might somehow be related
to the product or again, to the message of your site.
So for example, here on the left side,
we have a person using a journal in this website
that is trying to sell exactly those journals.
Or the one in the top right, which is about coaching,
and so it shows the space
where the coaching actually happens.
So these are storytelling photos
and they appear all the time on all kinds of websites.
And I would actually say
that they are the most important of the four.
Now next one, we have illustrations
which are getting more and more popular these days.
And illustrations, as you can see here in these examples,
can be made in many, many different styles.
And they're basically a more abstract way
of doing storytelling.
They can also add a lot of originality and personal style
to the website and help to really bring out
the website personality that you decided to use
for your particular page.
Now these examples here are 2D illustrations,
but there are also 3D illustrations
which are getting more and more popular.
And so here we have a couple of examples of that as well.
Now finally, we also have patterns
which might be something like this.
And as you can see in some of these examples,
patterns might appear kind of as a background
of entire sections or they might also appear
like behind images in order to add
some interesting visual detail.
So basically, these patterns can be used
to add a little bit of creativity and visual detail
to your pages,
so to make them a little bit less boring,
at least if you don't overuse them.
So if you use a lot of patterns all over the place
on your page, then that might look
just like visual clutter, okay?
So don't overdo it.
Okay.
And so these are the big four types of images
that can usually be found on images.
Now, what's important is that you should use these images
in order to actually support the message
and the story of your website.
So a little bit like I have actually
already been telling you.
So what this also means is that you should only use
relevant images to your project or to your service.
So just like these, all of these here
make a lot of sense if you ask me,
unlike these examples, for example.
So like the one on the right here,
like what does that have to do with a testimonial?
There's not even a person in that image.
Or here in the bottom left, it says,
"Enabling breakthrough research."
But what do the three people and the dog
have to do with that?
So sometimes images that we see on websites
do not seem to make a lot of sense,
and so this is something that you want to avoid to do.
Now, what's also extremely important is that you should,
whenever you can, use original images.
So basically images that you take yourself
or that some professional photographer takes for you.
So in this example here, very clearly,
some professional photographer took this picture
just for this site.
Now, not always that is possible,
especially because that requires to have some budget
and then you can always use some good looking stock images.
So this I think is a good example of a high quality
stock photo, which I took for free from one of the sites,
I will show you soon.
And so this is the kind of image that you're looking for,
not one of those generic ones.
This one, for example, I think is also quite nice
and also helps to deliver the message.
But then you also have stock photos that look like this,
and I'm sure we all have seen these kind of stock photos
that look really generic and really cheap
and like really overused and bad.
So images like these four,
we all have seen them and they are terrible.
You should never, never use images like this, okay?
What matters is that your images look authentic and real
and not fake and overproduced like these ones,
because users these days look a lot more
for authenticity than for polish.
So instead, you can use images from these websites here,
and the one that, in my opinion, is the best, is Unsplash.
So you can get free images
or illustrations from these four sites
which, once again, are part of our toolbox.
All right.
And this is basically when and what images you should use.
Now, let's learn how you can actually use images well.
And one of the most important things of using images well
is to show real people in your images
in order to trigger user's emotions.
So images like these, which again, show real people
and not some fake overproduced models.
People want to connect with real people these days,
and so you can use that for your advantage on your website.
Next up is something that many people overlook somehow
which is that you can very simply crop your images
in order to fit your message.
Like in this example that I showed you before, right?
With the solar development here,
the original image was actually this big,
but it was way too big,
and so I simply cropped out everything that I didn't need
and just placed there what was interesting for me.
Another thing that you can try out
is to combine photos, illustrations, and patterns
to create interesting detail
and some interesting effects like these ones here.
But now moving on, you need to also learn about
how to handle text on images.
So that's another important skill that you need
when you use images,
and there are different ways of doing that.
And the first one is to darken or brighten the image
where the text is.
So in this example, what they did
was to simply darken the entire image on the left side,
and so now the text became quite easy to read.
So darkening the entire image is one of the techniques
and the other one is to only darken it partially,
and we can achieve that by using a gradient.
So here basically only the bottom part of the image
has been darkened.
And so now again, the text is actually quite easy to read
while on the right side,
well, it is almost impossible at least in one on the right.
So darkening or brightening the image is method number one
of combining images with text,
and it's also I would say the most popular one.
But there's also another method
which is to position the text into a neutral image area.
So just as we have it here, and in all these six,
there is some area that is quite neutral.
For example, there might be
a continuous background color somewhere,
and so that is a perfect place where we can put our text.
We just need to be mindful about what happens
when these images get smaller on a mobile screen
because then, somehow the text might get overlaid
with the rest of the image.
So with a part of the image where we don't want it to be.
Now, method number three is to simply put the text in a box.
So just like here,
that's also very simple to do and quite effective,
especially if we add some opacity to the box,
like here in the left example,
that can many times work really nice.
Now finally, to finish up this lecture,
we also need to talk about some technical details
of actually using images.
And the first thing here is that we need to account
for high resolution screens, such as smartphone screens
and screens in high end laptops such as Apple's MacBooks
or the Dell XPS.
Now to do that, we need to size our images
so that their actual dimensions are twice as large
as we want to display them in our layout.
So let's say we want to display this image
as 300 by 300 pixels.
This means that we actually need the image file to be
600 by 600 pixels,
so twice as many pixels as are displayed on the webpage.
And we call this 2x or two times a scale factor.
So a scale factor is simply the actual pixels
the screen contains divided by the pixels
represented on the screen for any element.
On high resolution screens, this scale factor is 2x
or sometimes even 3x like on the very latest iPhones.
Now, what this means is that for any pixel
that we specify in our design, and that includes images,
the screen actually uses two or three physical pixels
to display that one pixels.
And it works like this because this will create a very crisp
and high resolution experience
like you currently have on your own smartphone.
Now, what I just explained you here
really just scratches the surface
of how high resolution or high density displays work,
but it should be enough to understand the point
of this rule.
So you don't need to know the technical details,
but you need to know the rule, okay.
So anyway, this is the reason why we need to make our images
twice as big as we want them to be displayed on the page.
And again, it is because the high resolution screen
will actually use two pixels to show each pixel
that we specify in CSS.
Now if we actually broke that rule,
so if our original image was only 300 by 300,
it would look something like this
on a high resolution screen,
and of course, that's not what we want.
Now, on the other hand, on normal screens,
there is no scale factor,
which means that each physical screen pixel
is equal to one pixel in our images.
So remember that the image right now looks blurry
on the high resolution screen, right?
But if we were to see this page on a normal screen,
then everything would be fine.
However, in order to account for all screens,
we simply always made the image twice as large
which is exactly what the rule says.
Now, this can create a problem of very large image files
which brings us to our next point.
So another thing that you need to do
is to always compress images for a lower file size
and to achieve better load performance for your website.
So there is this extremely handy tool here
which is called Squoosh, where for this example,
I can reduce the file size by an incredible 96%.
So the original had 3.18, which is terrible
for any user to load,
to 112 kilobytes, which is actually not a lot at all.
So compressing all your images using a tool like this
is extremely important if you care about your website users.
So it is tempting to skip this point,
but please don't do so, all right.
Now another technical detail really is that
when you use multiple images side-by-side,
you need to make sure
that they have the exact same dimensions
because otherwise, your design
will look something like this here on the right side.
So this doesn't look good at all
where the images, well, don't have the same height
or the same width.
Instead, before you place your images on the site,
make sure they have the exact same dimensions
or at least the same aspect ratio.
And that's actually all I had to tell you
about using images.
Now, this one, we will actually not implement in practice
in the next lecture because we didn't learn any new CSS,
and also because we will actually do all of this
in our big website project called Omnifoot
a little bit later.