Hey there, this video is going to be talking about the differences between jpeg PNG s and S V G s will even mention gifts at the end if you know all of that, you can skip on, we're not going to actually do anything in this class. A lot of me talking and explaining, but if you've maybe never heard of an svg scalable vector graphics hang out because this one is awesome. I'll show you an example. See blurry PNG, really nice SVg and scales forever. Watch, keep scaling in, look how good he is. Alright, let's jump in and figure all this out. All right, let's talk about the main image types. Okay, so jpeg PNG and Svg. So jpeg and PNG have been around for awhile, jay pig is probably the most common. So jPG, jpeg, whatever you want to call it. It is amazing for images like this hiding photographs do really well as J pigs. Why? Because the file size is very small in relation to the quality that you can get from it. Okay, so you can get something that looks really good loads of colors. Okay, ther...

e's millions of colors in the J Peg but the file size in comparison is very, very small. So we use that. Where did jpeg stop? And you're like, okay, well we'll just use jpeg for everything. The big trouble with J pigs is that there's no transparency, you can't see through a JP, there's no way of having a hole in it to show things through and that's where PNG starts. Okay, now we'll look at our logo that we did. Okay, so this logo here, you see our raw raw bikes, it's actually an image. Okay, can you kind of see when I drag it around it actually is see through, so I can change the color behind it and the color changes there. If this is a Jpeg, pick a color for the background and that would be it forever. So PNG is awesome. They have loads of colors as well. You can use millions of colors and a PNG but it also has transparency and you might be saying, why don't we just use those? Because the file sizes are huge for PNG in comparison to a jpeg. So you've got to do a trade off. Do I need transparency? Cool. If you do then you have to leave behind if you don't like this image here, definitely a Jpeg because there's no transparency. So I might as well have all the goodness of the colors with the low file size. Now, the third option, the SVG is quite new. So if you haven't heard of this, it's a scalable vector graphic. Okay, And victor is the cool bit. So if you know about vector graphics, you're going to go really, you can do victor online. It's like you totally can. If you've never heard of vector before, you might search the term, it's victor. Okay, V E c T o R because we won't cover it too much in here, but the benefit of it. Okay, As long as it's a really simple shape, like an icon or logo, SVG would be terrible for this even if you wanted transparency, it would be terrible because there's just so much detail. But for simple shapes, SVG are brilliant. So logos here, we're going to switch this out for an SVG and look at the perks. So let's switch it out first and see the difference and then we'll explain the perks for an SVG. So in your graphics, Okay, sorry, in your graphics in your exercise files, so if you go to exercise files, project two, there was a lion PNG that we used earlier on. We're going to use this one called SVG copy it, go to your desktop, put it in your project to folder in your images and paste it in now in your code. Okay. Go to visual studio code here under your image tag in your logo. Div Okay, switch out PNG for SVG. Okay, let's have a little look at the difference. So this is the original one and get ready. Look at the second one ready, crisping clear. Okay, so if you're working you're obviously watching this video and sometimes the quote depending on your internet. Um sometimes people write comments on the bottom like it looks the same. Um you might be looking at a really low resolution of the video. Often if you check in the bottom right of your video you can like raise or lower the quality of the video that you're watching Okay. Just so that you can see these details but let's make it a bit more obvious so I can zoom in. So if I zoom in on this one, I'm holding command plus heading out a couple of times. That's on a Mac control plus on a pc just zooming into my website so that you can kind of see the real big difference. Okay, so PNG uses pixels to make its graphic and while it was really small it was fine. Okay, had a slightly blurry edge but victor. Okay, this SVG it scales to infinity. Okay, you can scale it as big as you like and the cool thing about it is that it will always be crisp and clear on the outside and still have a very small file size. You could get a PNG looking really good at this size. Okay. You can make it bigger and make it great but the file size is going to get really, really big so you'll find lots of websites now using SVG. S browser compatibility is really good now so if it's an icon or a logo using SVG, that's a good kind of blanket rule if it's a an image. Okay, I'll show you a good example. So this one here. Okay, this is a graphic I made for a later part of the class and let's say I wanted to look exactly like this. Okay, my giant weird meat yogurt that I made for you guys, but it's got a background color. This would work best as a Jpeg will do, I'll show you how to export all these in a second, but let's understand them first. So this would be great as a Jpeg because it's got lots of colors in here and you know, it's reasonably photographic and the file size will be nice and small. But let's say I needed to have empty background, this little checkerboard things, computers way of saying that there's nothing behind it. Okay, so this would have to be a PNG. Okay, why wouldn't it be an SVG? And SVG needs that really simple details. If this was an SVG, it just file size would be huge and it would look terrible and it just wouldn't work. I can't make this an SVG and SVG perfect for this type of thing. When there is like a really simple lines, it's anything done in illustrator can be exported as an SVG because that's really basic basic shapes, simple colors, easy Jpeg for images. PNG images that need transparency and anything that is really simple lines like icons and small little graphics arrows, that sort of thing would be perfect for an SVG. Like here's I mentioned gifts, gifts. The only reason you use gifts these days, if you need to animate them. Okay, gifts have a real big drawback as in the, they only have 256 colors, which is a pain. Okay, So you only can do small things and the colors can't be too broad and just there's no reason to use it unless you want to animate it. And even then animating gIFs, a really niche kind of use case you can animate in CSS and lots of other, better ways. So I'm not going to cover gifts here. I do cover a lot more in my other safe Photoshop and illustrator classes. We make all sorts of animated gIFs there, but we're not going to use a kind of traditional web design now. Alright, what I'll do is now you understand this stuff, I might actually shift the next part of this video to another video so that you can just watch that nice and by itself. So later on you can come back and just show you how to kind of export these S V G S P N G s and J pigs easily. Yeah. So let's do that in the next video

Class Materials

Bonus Materials with Purchase

Exercise Files

Completed Files

buy this class

$00

Buy Class

Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

79.7K Students

99% Recommend this Class

00 Student Work

0 Video lessons in HD
00h 00m of class content
Exclusive bonus content
Lifetime access, anywhere, anytime
Streaming access on desktop and mobile browsers
Download and offline access with class purchase
Offline sync with our iPhone & iPad apps
100% satisfaction guarantee

Daniel Walter Scott

Multi-award winning, influential media designer & Adobe Certified Instructor with 15+ yrs of experience.

SEE INSTRUCTOR'S CLASSES

topics covered in this class

Branding Web Design UX Design Design Projects

Ratings and Reviews

Viwosoft Technologies

Great tutorial - your clear instructions and concise explanations make learning HTML5 & CSS3 a breeze!

2,000+ classes ranging from fundamentals to advanced techniques.

SVG vs. JPG vs. PNG

SVG vs. JPG vs. PNG

Lesson Info

47. SVG vs. JPG vs. PNG

Lessons

How This Class is Structured

What to Download

Creating Our First Webpage

What is HTML5 & CSS3

Head vs. Body vs. Html Tag

Title & Description

What Code Editor Should I Use

Using Diy Tags

What is a CSS Class

How to Create Nested Divs

Class Project

External CSS

Creating Our Index Style Pages

Testing Your Website

Check Your Code For Errors

What are HTML5 Structure Tags

Add HTML5 structure elements

How to Set the Color of the Background

Adding Images to a Website

How to Center an Image

Change the Font Size & Color

Make a Clickable Link

Stretching Background Image

Making a Div Tag Transparent

Simple Website Text Navigation

CSS Compound Classes

Class Project 02

Class Project 02 - COMPLETE

Add an Email Button to a Website

Add Google Maps to Your Website

Making a Website Live

Uploading via SFTP

Setting Up Our New Project

CSS Reset

Min-height vs. Height

Div Tags Onto One Line

Getting div tags onto one line using Flexbox in HTML & CSS

Evenly Spaced Div Tags

Two Div Tags of Different Sizes

Vertically Center Content

Class Project 3

Class Project 3 - COMPLETE

Change Default Fonts

Installing Google Fonts

What are PX & EM & REM

Change Line Height

SVG vs. JPG vs. PNG

How to Create a SVG, JPG, or PNG

Block Images vs. Background Images

Finishing Up Our Cards

Icons via Font Awesome

Making a Div Container Clickable

Box-sizing & Border-box

How to Make A Colored Button

Why Can't I Add Margin or Paddding

Rounded Corners

Drop Shadows

Backup Your Website

Reusing a Button Class

Class Project 04

Class Project 04 -COMPLETE

Adding a Horizontal Rule

Make Divs Wrap Onto Separate Lines

Hover Color & Animating a Button

Pseudo Classes

Simple Dropdown Navigation

Adding Our Dropdown to the Website

Useful Shortcuts and Tips in VS Code

Large Background Image

How to Connect 2 Pages

Simple PHP Form Work

Placeholder Form Text

Multi Line Form Text Box

Form Check Marks