History of Web Formats
Lesson 3 from: File Formats Explained: Everything You Need to KnowJason Hoppe
History of Web Formats
Lesson 3 from: File Formats Explained: Everything You Need to KnowJason Hoppe
Lessons
Class Introduction
01:43 2History of File Formats
14:12 3History of Web Formats
10:36 4Options to Save Files for Web
05:00 5Save Files as JPEG
13:19 6Save Files as GIF or PNG
18:06 7Options for Scalable Vector Graphics
09:35 8Save Files for Print
11:35Lesson Info
History of Web Formats
So when it came to web formats, obviously, you know print has been around a lot longer than the web, but all the print applications and web applications pretty much started in the mid to late 80's. So, if I was working in the 80's and I had a Photoshop or Illustrator file and I needed to save this for the web, I would end up having to save my image file as a GIF, graphic interchange format. And yes we have that battle, is it a "JIF" or is it a "GIF". I'll let you figure that one out. People say it's a "G," whatever. It's a GIF file. So when I'm working on something I could go ahead and save my file as a GIF, and on the web it would go. If it was type, it was for images, because we didn't get JPEG's until 1992. So there were five years when all the images looked pretty bad because it had to be saved as a GIF. And the whole reason why the GIF came out is because back in the day we had these two battling internet companies, that I'm sure this will bring you way back for the people out the...
re. You'd get all these CD's in the mail like every week. And you had CompuServe and you had AOL. And those were the two main battles. It was the whole VHS Beta competition. Well, in CompuServe decided that they needed an image format in order to be able to put content on the web. So this became their graphic image format, developed by CompuServe. And, that became the defacto until somebody decided, you know we needed a better format that's gonna provide us a lot more color range. So that's why the JPEG was created. So again, you could take your Photoshop or Illustrator file export it to a JPEG in ' and you could have content for the web. But as time went on what happened was when you created a GIF file, CompuServe charged a royalty. So anybody who included the ability to write to a GIF file, there was a royalty that had to be paid to CompuServe. So people said you know what, no we're not gonna do that, and we wanna develop a format that's going to do the same thing as a GIF. And so we have a PNG, which is a portable network graphic. And it does many of the same things as a GIF file does. And there's also one step above what a GIF file will do and that is a PNG-24. The PNG-24 allows us to have not only transparency but translucent drop shadows and see through items. So the PNG.. was something that wasn't widely supported at first because the browsers didn't support it. And then people started catching on and then software basically said, okay, if I don't want to pay the royalties, we're just go ahead and adopt the PNG format and we're not going to have the GIF format. Even though PNG's and GIF's do the exact same things, the software manufacturers didn't have to pay the royalty. PNG-24's, we're gonna show you this is because it's a lot more dynamic and universal than a PNG. And it kind of bridges the gap between a JPEG and a PNG file. But either way I can take a Photoshop or Illustrator file, export to a PNG and save it right for the web. And of course this didn't come out until 1996, this was a long time coming. You know because PageMaker had come out ten years prior which is a long time. So, now.. stepping up even closer in time just 15 years ago, back when we had Flash, which was revolutionary for the time. Flash actually allowed you to take vector graphics and put the vector on the web. So it didn't actually display in rasterized format. And lots of issues with Flash, so Flash has been sort of going away. So, scalable vector graphics or SVG was created. And an SVG is exactly that. It is a file format that is vector so it actually displays as vector on the web, because up until that point every single thing, any image or any type or any logo, always displayed as pixels. You know we had a PNG, we had a GIF and we had JPEG, but it was all pixel based. So the SVG, or scalable vector graphic came along and if you build your files using vector graphics it will translate into vector scalable. Which means in today's world of having responsive web sites, where it can be used on a tablet or a computer, or a device you want something that's going to adapt to the size and orientation. Thus, the scalable vector format. So it's great. So that's new as of 2001. It sounds like it's all new and it's been around for 15 years. And people are probably saying, it's like, where was I? And it's like, I don't know it's been a long time ago. So I can create vector in Photoshop. Yes, absolutely can. And I do. And I can create vector in Illustrator and export them to a scalable vector graphic to retain the vector qualities for web and devices. Now, I can also take any of my Illustrator or Photoshop files, export them as a GIF file. Still have that support. A JPEG for images, or a PNG for logos, graphics and type. And those are all gonna display as raster on the web. And then I can use them for all my devices as well. So pretty much all these web formats. And anything from Illustrator, Photoshop now, SVG, vector graphics for my web, or devices. When it comes to PDF's, since we can go ahead and we can export virtually anything as a PDF, we can use them for print because it retains all the vector and all the raster qualities and all the type. But we can also display a PDF on the web or use it for print. No a PDF doesn't really get integrated into a website. It's just simply a file on the website that can be displayed on the web. Unlike having an actual JPEG that's written into the HTML and displayed as part of it, a PDF is a file on there that's all self contained. So, I can use it to display on the web, but I can also download it and print it directly, retaining all the vector and raster qualities in that PDF. And then.. we never really had the ability to vary.. to write a file directly to HTML. And there's still a lot of.. more improvement that can be made on this. But we've seen Dreamweaver, where you can kind of go in and do the coding. But if you ever wanted to go in and take a design that you've done and actually export it to the web, that's where InDesign really stepped up. InDesign finally got to the point where you could actually take your layout, and in pretty good fashion, you could then go ahead and export that to HTML so that you roughly could get what you saw on the screen in a print version, into HTML with the placement of graphics. And then with the advent of all the e-readers and.. devices, you can actually now export this to an e-Pub format so that you can get a simple reader version or you can get a more advanced reader version of your file with text and graphics, and be able to put that all together. And this is something that we could never really export HTML from Photoshop, never from FreeHand, never from.. PageMaker because the web was so young that you always had to write all your code. But InDesign has actually stepped it up where we can now take it, write HTML for our final formats and a lot of the e-pubs that you get are designed and produced directly from InDesign. So that's the basic overview of the formats that we have and a little bit of the history. And we have a question. I want to make sure we have some basic terms, make sure that people reiterate that they understand what they are. So could you define what raster and vector are again? Absolutely. So when you have a raster format, a raster format is basically pixel based. So if I take a photograph and I open it up in Photoshop, you see all the pixels that are squares. And that is a rasterized or a pixel based file. And that is going to be a fixed number of pixels, so I have a fixed amount of information. And when I display that on the web or a device at the size that I'm working at, you don't normally see the pixels, but each pixel is a piece of information. If I were to take that image and I were to make it much larger, I would begin to see the degradation happening because I have a fixed amount of information in that image. A vector based file, is nothing but shapes and fills. And so the perfect example of what a vector file is, is type. If you put type in to any application you know if you're working Illustrator, or FreeHand or Word, and you increase the size of the type, the type doesn't start to look worse. It actually just simply grows. And that's a vector. So it's infinitely expandable always clean edges, and it literally is just shapes and fills. So that's basically the difference between a vector and a raster. And so this is from Cathy Callus who is joining from Chicago. Hey Chicago! Are GIF's and PNG's the same size? And I know were gonna go into that more, but are those the same size approximately? GIF's and PNG's are gonna be pretty much the same. It's a different format but you're gonna see that.. the similarities are virtually identical. Alright, cool. Let us know where you're joining us from again, and keep the conversation going. Wonderful. And just to reiterate, you know there's a lot of people out there that have used these file formats over the years. And I just taught at Adobe Max a few weeks ago, and I was talking about some of these formats and people are like, oh my gosh, you shouldn't use this format for this. So I've been looking forward to doing this file format class for a long time. And, so we're gonna get started into actually building these so you can see what goes on with each and every file.
Class Materials
Bonus Materials with Purchase
Bonus Materials with RSVP
Ratings and Reviews
Rebecca Chapman
I love Jason's style and approachability! I love how he explains things and starts right from the beginning. Highly recommend.
E Ahn
His makes it very easy to understand with clear, articulate, systematic approach. Great voice and effective delivery. I tried to understand this subject many times and it has never been clear until I heard this lecture.
Khadijah Abdul Nabi
Amazing amount of industry relevant and practical information! Great delivery.
Student Work
Related Classes
Fundamentals