Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
When it comes to mobile-to-desktop, there are tried and true solutions you will want to use in order to make sure that the end user is only getting the images they need for their specific experience. By specifically targeting this way, you can ensure that your mobile users get the smallest images possible and your desktop users get amazing hi resolution images.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Now that we have these great,
optimized images, what do we do with them?
0:00
When it comes to mobile to desktop,
there are tried and
0:04
true solutions that you will wanna use in
order to make sure that the end user is
0:07
only getting the images that they need for
their experience.
0:12
By specifically targeting it this way,
0:16
you can ensure that your mobile users
get the smallest images possible, and
0:18
your desktop users get amazing,
high resolution images.
0:22
As you can see in this example,
0:27
I'm using an image to fill
the screen of a mobile device.
0:29
There is no value in
compressing a desktop-optimized
0:32
image into a small space.
0:35
So when targeting mobile devices, you want
to use an image that is correctly size for
0:37
that experience,
both physically and weight size.
0:41
And the good news is the smaller
the physical image size is,
0:44
the lower the file sizes.
0:48
So just by cropping it, you're winning,
but how do we code for this?
0:49
First, let's use CSS and
0:54
media queries with background images
using a mobile first technique.
0:55
Pretty standard stuff that I'm sure
most of you are familiar with.
0:58
Using this method, we are ensuring that
the user will never see the medium or
1:02
large sized images on their
handheld mobile device.
1:06
We can see this happening
in the Chrome inspector.
1:10
Viewing this in the inspector,
we see that Chrome does not request
1:13
any of these images until this
spec of the media query is met.
1:17
Each time we increase the view size of the
app, we meet the spec of the query and,
1:21
in turn, make a request for
an increasingly larger asset.
1:26
Next for images that are actually in
the HTML, we code this slightly different.
1:32
Responsive images in
CSS is pretty standard,
1:38
while using responsive
images in HTML was not.
1:41
Today, though, we have new responsive
support in the picture element.
1:44
The picture element was
inspired by the video element,
1:49
whereas there are multiple image sources
that are loaded into a source set.
1:52
There is a fallback for browsers that
do not support this new element.
1:57
This solution works amazingly well for
managing breakpoints
2:00
in the UI where you may want to have
specifically cropped images appear.
2:03
Viewing this in the browser,
2:09
we see that we get similar results as
we did using the media queries in CSS.
2:10
By increasing the view size again, we see
that only when the browser meets the spec.
2:15
Then it makes the request for
the different assets.
2:20
Using CSS media inquiries and new picture
element techniques work great and get
2:25
us pretty far with loading only the assets
we need for the device we are using.
2:30
But what about images that are not
part of the above-the-fold experience?
2:35
Another technique for getting that initial
perceived performance as fast as possible
2:40
is to not load all the images
in the first header response.
2:45
This is called lazy loading.
2:50
Lazy loading keeps images from
being loaded into the view
2:53
until the user requests them
by scrolling down the page.
2:56
This can easily save you hundreds of
kilobytes off that initial load and
2:59
get you to that first meaningful
paint as soon as possible.
3:04
For lazy loading images,
3:08
we need to make use of the small
JavaScript library called Lazy Load.
3:09
Lazy Load holds back image resources
until a user needs to see them and
3:13
allowing your essential
assets to load first.
3:18
There is a very small trade-off here.
3:22
The JavaScript library itself,
that is quite comprehensive,
3:24
weighs in at around 5k.
3:27
This is something to
take into consideration
3:29
with your performance budgets.
3:30
But the results are well worth
the tradeoff, in my opinion.
3:32
For example, if you have larger images
that are further down the page or
3:35
possibly a large number of smaller
images or product thumbnails,
3:40
this could easily amount to
a few 100k of image data.
3:44
If you can delay the downloading of
600k of data in place of a 5k library,
3:48
I think you're in a far better place.
3:52
Looking at the library itself, we see that
there are a good handful of options to
3:55
choose from for how you may want to
include your images within the HTML.
4:00
Let's look at an example here
to see how this works and
4:05
how this can really impact your load time.
4:08
In this first example, I'm loading all of
the assets as you normally would using
4:10
the standard image element
with the source attribute.
4:15
When we load this into the browser
just with these 20 assets,
4:19
we are downloading 1.3 MEG of data.
4:23
This by itself is not so bad.
4:27
But also consider that we are not
doing anything else other than
4:29
downloading 20 images.
4:33
To make use of Lazy Load, in this example,
4:35
we can simply add the reference to the
minified JS file from the Lazy Load repo.
4:38
Of course, you can add this library in
any way you see fit within your project.
4:43
Once the library's referenced,
4:48
we do need to create a new object
from the LazyLoad constructor.
4:50
We need to do this within
the body tag of our view file.
4:53
Now let's replace all the source
attributes with data original.
4:57
This keeps the images from
loading in the first place, and
5:02
is the hook LazyLoad uses to take
the value from data original, and
5:05
move it to the source
attribute when triggered.
5:09
When we now run this in the browser, we
see that we are only downloading the first
5:13
two images and the JavaScript file,
which amounts to about 196k.
5:17
That's a huge savings from 1.3 mg.
5:22
This example illustrates how a user
will still eventually download all of
5:25
the images if they
scroll all the way down.
5:30
But initially we saved over 1 mg in
our initial load performance budget.
5:33
One last thing I wanted to illustrate
is a simple configuration to allow for
5:37
some additional preload time if
you are loading larger images.
5:42
In this group tag where we
created the LazyLoad object,
5:46
we can redefine this by increasing
the threshold height for
5:49
when the images are requested
by the scrolling event.
5:52
This way, the trigger's further away
from the actual scroll position,
5:56
thus fetching the asset well
before you scroll to it.
6:00
It ups our inital load to 269k but
that's not a deal-breaker in my opinion.
6:03
Lazy loading images is a great way to load
all of the assets you want, but really
6:09
keep that inital load time down and really
increase your perceived performance.
6:14
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up