A Web Developer's Guide to Images

Learn about images for web sites and how to use them effectively
Course info
Rating
(113)
Level
Intermediate
Updated
Nov 21, 2012
Duration
2h 39m
Table of contents
Introduction
jQuery Plugins and CSS 3
Performance
Miscellaneous
Description
Course info
Rating
(113)
Level
Intermediate
Updated
Nov 21, 2012
Duration
2h 39m
Description

Images are a central part of virtually every web site. Learn the various types of images and when each is appropriate. Review some useful jQuery plugins and CSS 3 features related to images. Study the performance impact of images and how to use the most efficiently. Learn how to use images with responsive web design techniques and high pixel density displays.

About the author
About the author

Robert is a Microsoft MVP, a Progress Developer Expert (Fiddler), and a 3rd degree black belt in Tae Kwon Do. He regularly speaks at national and international events.

More from the author
Responsive Web Images
Beginner
1h 55m
Jun 27, 2016
Useful jQuery Plugins
Intermediate
3h 6m
Jan 17, 2014
More courses by Robert Boedigheimer
Section Introduction Transcripts
Section Introduction Transcripts

Introduction
Hi, welcome to this Pluralsight course: A Web Developer's Guide to Images. We're going to look at several things in this first module. We're going to look at a couple of image editing tools, one of them is paint. NET which is a free editing software for Windows. We're also going to look at a moderately priced image editing software, Corel PaintShop Pro. We're going to discuss the differences between bitmaps and vector graphics and when to use each one appropriately. So the bitmaps, we're going to look at JPEGs, GIFs, PNGs, and WEBP and from a vector graphics, we're going to look at SVG. And finally, we're going to look at the Img tag and some of the attributes and the appropriate use of this tag on your webpages.

jQuery Plugins and CSS 3
In this module, we're going to focus on some common jQuery image plugins. I want to show examples of plugins that I've used that are just unique ways to display images that work across browser. Years ago, these are things that would have been difficult to do. Now that jQuery has kind of abstract away the browser layer, there's a lot of plugins that have unique ways to display or use images that we'll walkthrough. We'll talk about CSS 3. There's opportunities to do new things around images in CSS 3. There's also the opportunity to replace places where we had to use images in the past where we maybe able to use a CSS 3 feature and avoid having an image altogether. And finally when we talk about CSS 3 and we look at what kind of browser support there is for given features, we'll talk about using modernizr for our fallbacks, so in particular situations where the browsers don't support a given feature. We'll see how we can do a fallback to polyfills and shims and things that we could do to make that feature still available in an older browser.

Performance
In this module we're going to focus on web performance from the perspective of images we used on web pages. We're going to look more at Image Optimizations, talk about Content Expirations, look at CSS Sprites, and Image Maps as techniques to reduce the number of images that need to be downloaded for an individual page. We'll look at the Data URI which is the ability to take an image and embed it directly in either a style sheet or an HTML page so we don't need an extra request. We'll also talk about Content Distribution Networks to see how we can leverage this to place our images closer to our end users. We'll also look at using multiple domain names by spreading domain names across or images across the series of domain names. We can have the browsers use more parallel connections to our web servers.

Miscellaneous
In this final module, we're going to look at a lot of miscellaneous features around using images for websites. The first again is the Aspect Ratio, we talked about that earlier but we'll show why that matters to keep that consistent when you're making changes or resizing images. We're going to look at Responsive Images, responsive web design is becoming a new technique for developing sites that can adapt for different devices and foreign factors. And we want to look at how we should give images back so they perform well. We're going to look at Higher Pixel Density Displays and see well, how that will impact our image strategy. We'll show how you can use Design Placeholders so you can do wire framing of a page and put in place this placeholders were we know we're going to put an image but don't have an image yet. We'll talk about Image Watermarks and the ability to imbed watermarks inside an existing image so people can't take the image. We'll look at Uploading Images to a website. We'll talk about where you can Get Images. We'll look at one example of how you can interface within image site like Flickr from. NET. And we'll look at some cool new stuff that is coming around, images that you may not be familiar with.