- Hey everyone.
Welcome back to my channel.
Today I've got a video for you all about
exporting assets for websites.
Now, I consider the main goal when exporting
an asset to go online is for the file size to be
as small as possible without losing quality,
because smaller file sizes mean faster loading time,
and faster loading time means your users
have a better experience.
There are three main file types that I end up using
when I'm exporting assets to be incorporated
into the build of the site.
In this video, I'm gonna go through what those are,
when you'd use each one, and how to compress them
without losing quality.
The first file type we're gonna be
talking about today is SVGs.
SVG stands for Scalable Vector Graphics,
as far as I'm aware, and it does what it says on the tin.
It's a vector graphic, so it's made with points,
and it's scalable, so you can bring it down really small,
or up really large and it'll keep the same quality.
If the asset you've created is a vector,
it's likely that it'll be really suitable to use
as an SVG on the site, for example, icons and logos.
Shapes work really well as SVGs.
I personally wouldn't use SVGs for more complicated
vector illustrations.
I like to keep them simple, and with SVGs,
the more points that your vector has,
the larger the file will be, so that's something
to keep in mind as well when you're
creating your assets, is to make your vectors
as simple as possible.
What an SVG does is basically build the design in code,
so the file you export is telling your web browser
where the points should be and what colors
should make up the shape.
This also means that you can really easily change the color
of an SVG with code without having to re-export a new file,
so that's really handy, and these days,
SVGs are the ideal way to put simple graphics
like this up on a website, so that way,
no matter what screen resolution someone's using,
or if they're on the desktop, or they're mobile,
the image is still gonna look sharp.
I'm gonna show you an example of exporting
an SVG using my logo, so I've got it open in Sketch,
and what I'm gonna do is select all of the shapes
that make up my logo because you can see that each letter
is an individual shape right now.
Then, I'm gonna click Union up here.
As you can see, it's ended up filling in the circles
on my A's and E's and on this loopy end bit here,
but that's easy to fix.
I just select the two pieces, and click Difference,
and it'll cut it out again.
Doing this is just good practice,
because it makes your SVG file smaller,
so that's the reason I'm doing it.
Alright, once I've done that,
I'm gonna select that shape layer there
and come down to Make Exportable in Sketch.
I'm gonna change this to SVG,
and save it in a folder.
Remember, I said with SVGs,
you want to get them down as small as possible.
This file is only 12 kilobytes right now,
so it's pretty small already.
It would be fine to go, but I want to show you
a really handy SVG tool.
It's called SVGOMG, and basically what you need to do,
is open up your SVG file.
What this tool does is deletes any bits of unnecessary code
in your SVG file, and you can see down here,
in this features list what it's actually doing,
if you care to take a look, but really,
all I care about is this little bit down here
telling me how much of my file is compressed.
It's got it down to 2.49 kilobytes, which is amazing,
and I can also click here to show the original.
That way, I can make sure that, with its changes it's made
and the, you know, pass it's done,
it hasn't actually affected the look of my vector
in any way, which it hasn't, so that's great.
I'm just gonna let that download,
and now I've got a smaller file.
The next two file types we're gonna talk about,
unlike SVGs and their vector scaling abilities,
are bitmaps, and these are PNGs and JPEGs.
Now for both of these, you have to make sure that
you're exporting your file at the right size,
because if you export it too small and then try to
blow it up in code later, it's gonna look fuzzy,
and a bit terrible, so that's one thing to keep in mind,
is to make sure that your exporting your asset at the size
that you want it to appear.
These days, with our Retina screens,
it's common practice to export a 1x version,
which is just the exact dimensions that you want
the image to appear at, and also a 2x version,
which means, basically, double the size.
Developer will then use a thing called media queries
to look for when someone's using one of those
high-resolution screens and serve up that
double-size image instead.
The image will still appear the same on the website,
but it'll be much sharper for people on Retina screens.
I hope that makes sense, but I'm gonna show you
how to export for that anyway.
Now the main difference between JPEGs and PNGs is that,
PNGs can have a transparent background.
This means that your exported asset could sit on
any color background or even on top of
another image, for example, without appearing like
it's in a white box.
SVGs have a transparent background as well,
but there are definitely cases where
a PNG is gonna be more suitable than an SVG,
like with this laptop on this product page
I designed for example.
This image had bitmap elements, you know,
it's got photographs in it, and it'd be a very
complicated file if I exported this as an SVG,
so a PNG was the right option here.
So, the rule of thumb for this is anything that
you need to have a transparent background,
but is too complicated to be a vector,
or includes photographic elements.
PNGs are easy to export, I'll just show you
with this same logo that I used last time.
So, I select it, and instead of SVG,
I'm gonna click PNG.
In Sketch, you can just click this little plus button,
and it'll add a 2x version, or you can use this dropdown
to select it if you want,
and it's good practice to put @2x
at the end of the file name.
Let's export that.
And a really handy tool that I use for compressing PNGs
is one called ImageOptim.
I've bumped up the settings that it comes, like,
preloaded with for this.
I've ticked Enable Lossy Minification,
and dropped down the JPEG quality a bit,
which just compresses it a bit more.
Be careful with this, because with JPEGs
and PNGs especially, you can compress your image too much,
and it'll start to, like, break up
and look a bit grainy and pixelated.
So, trial and error, see what's gonna
work best for your assets.
All I have to do to use this is just
drag my image files into ImageOptim,
and it'll compress them, and as you can see,
it's taken nearly 70 percent off
both of those file sizes, so that's great.
The great thing about ImageOptim is it just
re-saves your file over it and replaces it,
so that same file that you had is now just much smaller.
Another tool I sometimes use for extra compression of PNGs
is this website tinypng.com
All you have to do is drag your files in here
and it'll compress, and as you can see,
this one's actually compressed those ones that already
went through ImageOptim even more, so that's great.
I can probably bump up my settings
in ImageOptim, that means.
The downside of using this site is that
you then have to download the images and take them
from your downloads folder and put them in your
assets folder, so it's a bit of an extra step,
which is why I prefer ImageOptim.
That brings us to our last file type which is JPEGs,
and I already talked a bit about them,
but when you'd use a JPEG over a PNG,
is if it's a photo that is going, like,
in a block anyway, or maybe if it's something
that's going on a white background and you don't
care about it being transparent,
that could be a good case to use it.
Generally, JPEGs can get smaller than PNGs,
because the file doesn't need to be thinking
about that transparent background,
so if your file doesn't need a transparent background,
then generally go with a JPEG, because it'll end up smaller.
First one I'm gonna show you exporting
an image in Photoshop.
The first thing that you wanna do with JPEGs,
and with PNGs really, but I see this problem more often
with JPEGs, especially in blog images,
is make sure that your image isn't
bigger than it needs to be.
So, my image right now, if I go to Image Size up here,
is 2,000 pixels wide, which is really unnecessary.
My blog, I think, is about 750 pixels wide,
is what the picture will end up being when it's displayed,
so I'm just gonna make my image that wide instead,
and 72 pixels per inch is a good resolution,
because that is screen resolution.
I've got my quick keys down for
exporting assets in Photoshop.
I don't know if this is the way you're supposed to do it,
but this is how I do it, I go Command+Alt+Shift+S
and opens up this save for web window.
So up here, I'm gonna change it to JPEG,
and it gives you a preview of
what the file size is gonna be,
and what you can do is drag down this
quality bar a little bit, because generally,
you can drop it down to maybe even 60,
and it'll still be absolutely fine.
Let's just zoom in a little bit and see.
Nope, not affecting it much, so lets go with,
let's go with 50 for this, so already that's brought
my file size down a lot.
Let's save this out, and how I do a 2x image in Photoshop,
is I go to image size, and I'll change this to Percent,
and write 200, so it's gonna make my file double the size.
Now, be aware, you can only do this if
your photo is in there as a smart object, which mine is,
which means that it doesn't lose quality
when you bring the file size up and down,
otherwise, you should make sure you
start your file at the 2x size.
ImageOptim is really good for compressing JPEGs,
so let's drop these in here and see what it does.
It's taken an extra 10 percent off both of those,
so that's good.
100 kilobytes for a 2x, full-width
blog image is pretty good.
So, those are my tips for exporting assets for web.
I hope you found that useful, and now maybe,
the sites you design will load faster
because your images are no bigger than they need to be.
If you did find this video useful,
please give it a thumbs up,
and if you've got any questions at all,
then please feel free to leave them
down below in the comments.
Thank you for watching, and I will see you
next week for another design video.
Bye.
For more infomation >> Cantinflas - Romeo y Julieta (1943) - Duration: 1:44:14. 
For more infomation >> FE - Duration: 3:23. 
For more infomation >> 「PUPA」ピューパ Op Cover (+Tabs) - Duration: 0:38. 
For more infomation >> Come más verduras - Duration: 0:49. 
For more infomation >> Rigoletto. Acto II. Buenos Aires Lírica 2005 - Duration: 31:13. 
For more infomation >> #3 Bien Chanter - Pourquoi respirer par la bouche ? - Duration: 2:55. 
For more infomation >> Artist Zayn Malik Live
For more infomation >> Мультики про машинки Молния Маквин Супергерои Спайдермен и злодей Джокер - Duration: 10:42. 
For more infomation >> Marktgröße Die magische 3 - Duration: 2:05. 
For more infomation >> Daewoo Matiz 0.8 Pure PS - Duration: 1:08. 
For more infomation >> Peugeot Expert 231C Premium Pack 2.0 120 PK BlueHDi - Duration: 1:50. 
For more infomation >> Frm. CIA director: Here is why I trust intel report - Duration: 1:19. 
For more infomation >> Why i love Greece #8 - Duration: 10:02. 
For more infomation >> 4.01.2017.Kolejowa wiązanka z Łodzi Fabrycznej-część I - Duration: 57:07. 
For more infomation >> I can make you love me 1993 Legendado - Duration: 1:31:28. 
For more infomation >> Citroën Saxo 1.4i VTS 147000KM ZEER NETJES!! - Duration: 0:43. 
For more infomation >> Hyundai Tucson 2.0i-16v Style met Clima / Cruise Control / Trekha - Duration: 1:26. 
For more infomation >> Citroën Xsara Picasso 1.6I-16V CARACTÈRE Mooie MPV - Duration: 1:13. 
For more infomation >> Crazy Gadgets at CES 2017 - 8K TV's, Smart Home Tech & more! - Duration: 6:33. 
For more infomation >> Chinese Wok & Sushi - Paket Servis İnceleme ve Yorumlar / Alyanak derken? - Duration: 10:11. 
For more infomation >> Krishnamurti - ¿Qué sentido tiene el escucharle, Krishnamurti? - Duration: 14:26. 
For more infomation >> Kocham Caro, ale... to była tragedia! #BlindfoldedMakeup - TINI - Duration: 11:18. 
No comments:
Post a Comment