Skip to main content

SVG vs. JPG vs. PNG

Lesson 47 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

SVG vs. JPG vs. PNG

Lesson 47 from: Build a Responsive Website Using HTML5 & CSS3

Daniel Walter Scott

buy this class

$00

$00
Sale Ends Soon!

starting under

$13/month*

Unlock this classplus 2000+ more >

Lesson Info

47. SVG vs. JPG vs. PNG

Lessons

Class Trailer

Getting Started

1

How This Class is Structured

01:41
2

What to Download

02:57

Introduction to HTML & CSS

3

Creating Our First Webpage

05:55
4

What is HTML5 & CSS3

08:24
5

Head vs. Body vs. Html Tag

09:01
6

Title & Description

05:54
7

What Code Editor Should I Use

02:42
8

Using Diy Tags

06:26
9

What is a CSS Class

09:05
10

How to Create Nested Divs

05:03
11

Class Project

05:24
12

External CSS

09:07
13

Creating Our Index Style Pages

12:16

Project 1: Restaurant Website

14

Testing Your Website

08:47
15

Check Your Code For Errors

11:01
16

What are HTML5 Structure Tags

05:47
17

Add HTML5 structure elements

16:02
18

How to Set the Color of the Background

05:10
19

Adding Images to a Website

04:38
20

How to Center an Image

01:14
21

Change the Font Size & Color

14:11
22

Make a Clickable Link

08:45
23

Stretching Background Image

05:38
24

Making a Div Tag Transparent

02:36
25

Simple Website Text Navigation

06:43
26

CSS Compound Classes

07:02
27

Class Project 02

02:05
28

Class Project 02 - COMPLETE

04:48
29

Add an Email Button to a Website

03:49
30

Add Google Maps to Your Website

11:25
31

Making a Website Live

16:50
32

Uploading via SFTP

11:50
33

Setting Up Our New Project

03:46

Project 2: Bike Repair Website

34

CSS Reset

15:22
35

Min-height vs. Height

07:01
36

Div Tags Onto One Line

05:23
37

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

05:23
38

Evenly Spaced Div Tags

04:42
39

Two Div Tags of Different Sizes

07:13
40

Vertically Center Content

07:20
41

Class Project 3

02:51
42

Class Project 3 - COMPLETE

05:39
43

Change Default Fonts

04:19
44

Installing Google Fonts

12:44
45

What are PX & EM & REM

14:56
46

Change Line Height

04:33
47

SVG vs. JPG vs. PNG

07:04
48

How to Create a SVG, JPG, or PNG

11:00
49

Block Images vs. Background Images

08:32
50

Finishing Up Our Cards

09:10
51

Icons via Font Awesome

16:31
52

Making a Div Container Clickable

09:55
53

Box-sizing & Border-box

06:19
54

How to Make A Colored Button

07:46
55

Why Can't I Add Margin or Paddding

11:08
56

Rounded Corners

04:17
57

Drop Shadows

06:24
58

Backup Your Website

05:00
59

Reusing a Button Class

03:10
60

Class Project 04

02:58
61

Class Project 04 -COMPLETE

05:45
62

Adding a Horizontal Rule

03:51
63

Make Divs Wrap Onto Separate Lines

12:14
64

Hover Color & Animating a Button

03:33
65

Pseudo Classes

09:31
66

Simple Dropdown Navigation

20:04
67

Adding Our Dropdown to the Website

14:50
68

Useful Shortcuts and Tips in VS Code

13:28
69

Large Background Image

09:24
70

How to Connect 2 Pages

10:42
71

Simple PHP Form Work

17:49
72

Placeholder Form Text

05:46
73

Multi Line Form Text Box

02:18
74

Form Check Marks

03:04
75

Form Radio Button

06:07
76

Form Drop Down Menu

05:48
77

How to Style Your Form

12:55

Project 3: Responsive Portfolio Website

78

What does responsive website design mean

04:17
79

How to change a website layout size color when at different sizes using media queries

11:28
80

How to test your website on a tablet or mobile phone from Visual Studio Code

06:00
81

How to change the layout of a responsive website for mobile vs desktop

16:02
82

How to turn things on and off for mobile tablet & desktop responsive websites

06:03
83

What is pixel density responsive images pixel ratio dp px in webdesign

14:47
84

How to export responsive images for website from XD Photoshop Illustrator

05:11
85

How to add responsive images to website using 100% width in HTML & CSS

06:08
86

How to use srcset to change images in HTML for responsive website

10:15
87

How to add a css style to the first line of a p tag on a website (

11:18
88

How to make the header footer full width but the inside centered

05:36
89

Class Project 05 – Header design

03:12
90

Class Project 05 – Header design COMPLETE

06:25
91

How to use a span tag or span class in HTML to change text

10:32
92

How to pin the navigation to the top of a website fixed nav

03:17
93

How to make a simple responsive mobile menu using CSS only

08:21
94

What is Javascript vs Jquery in website web design

06:35
95

How to make a burger menu 3 line mobile navigation for a website

15:11
96

How to switch a menu nav from desktop to mobile phone

21:45

Project 4: Bootstrap Yogurt Website

97

Overview of what Bootstrap 4 is in website design

07:57
98

How to install Bootstrap 4 on a website using Visual Studio Code

06:27
99

Quick overview of how the Bootstrap Grid Layout works in VS Code

10:49
100

Quick overview of how Bootstrap Components works in VS Code

09:23
101

Quick overview of how Bootstrap CSS Styles works in VS Code

08:20
102

How to customize the default Bootstrap 4 css styles

13:51
103

How to use Bootstrap Layout Grid Experiment 1

10:20
104

How to make 100% header & uneven widths in Bootstrap 4

07:16
105

How to create uneven col widths in Bootstrap 4

07:27
106

How to add padding & margins using Bootstrap 4 in VS Code

12:03
107

How to change layout of Bootstrap depending on mobile or desktop

15:46
108

How to turn things on & off on your website using Bootstrap 4

05:30
109

Google Chrome Inspect

12:40
110

Add Shadows to Text & Boxes

07:06
111

Change the Default Buttons

06:16
112

Responsive Images in Bootstrap 4

09:34
113

How to Center Text & Div Tags

04:16
114

Customize the Bootstrap Navbar

07:29
115

Add Your Own Logo

03:58
116

Change the Default Nav Styles

12:12
117

Fix the Navigation to the Top

04:41
118

Col Images & Col Background

07:56
119

Bootstrap Border & Rounded Corners

04:20
120

Bootstrap 4 Carousels

05:13
121

Card Groups

03:29
122

Drop Shadows On Bootstrap Cards

02:25
123

Clickable Boxes in Bootstrap 4

04:02

Final Quiz

124

Final Quiz

Lesson Info

SVG vs. JPG vs. PNG

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

Ratings and Reviews

Viwosoft Technologies
 

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

Student Work

RELATED ARTICLES

RELATED ARTICLES