Explore

Responsive Images

Approx. 2 weeks

Save Course

Go to Course

Brief Introduction

Quick load times and responsive content leads to higher conversions. There's much more to images on the web than . Attributes like , markup techniques using CSS, fonts, and inline images, and the brand new element are now available to help you create the best possible experience for your users. This course will help you ensure that you deliver the highest quality images with the fewest possible bytes.

Course Summary

Learn how to optimize images for different screen sizes and resolutions, and improve website performance with responsive images.

Key Learning Points

Understand the importance of responsive images
Learn techniques for optimizing images
Implement responsive images on your website

Learning Outcomes

Understand responsive images and their importance
Learn how to optimize images for different screen sizes and resolutions
Implement responsive images on your website

Prerequisites or good to have knowledge before taking this course

Familiarity with HTML and CSS
Knowledge of image formats and compression techniques

Course Difficulty Level

Intermediate

Course Format

Self-Paced
Online

Similar Courses

Web Performance Optimization
Responsive Web Design Fundamentals

Related Education Paths

Related Books

Description

Go beyond image tags! Learn how to make images a part of your responsive design workflow.

Requirements

You should be comfortable working with simple HTML, CSS and JavaScript. Experience with image creation and processing tools will also help. See the Technology Requirements for using Udacity.

Knowledge

Instructor videosLearn by doing exercisesTaught by industry professionals

Outline

lesson 1 Getting up and Running Start debugging on your mobile devices to work with responsive images with Sam Dutton. Get started with Developer Tools and mobile debugging. lesson 2 Units, Formats, Environments Compare different kinds of images on the web and the units you can use to scale them. Set up your development environment so that responsive images are a part of your workflow. Apply responsive image principles in a real-world scenario! lesson 3 Images with Markup Dive into using markup techniques like CSS and icon fonts to create responsive graphics. Learn how to use markup techniques that are natively responsive and often extremely lightweight. Replace extraneous images with markup techniques add social media icons to the responsive blog project! lesson 4 Full Responsiveness Make your images fully responsive using the new element! Learn to use the srcset and sizes attributes. Make the blog project fully responsive by implementing to display beautiful images across a range of device widths and pixel ratios.

Summary of User Reviews

Responsive Images is a well-received course on Udacity that teaches how to optimize images for different devices. Students praise the instructors' expertise and engaging teaching style. One of the key aspects that users found good about the course is the practical examples and exercises that helped them apply the concepts in real-world scenarios.

Pros from User Reviews

Engaging and knowledgeable instructors
Practical examples and exercises
Clear and concise explanations
Up-to-date content
Easy-to-navigate course materials

Cons from User Reviews

Some users found the pacing too slow
Not enough advanced content for experienced developers
Limited interaction with other students
Lack of quizzes or assessments
No certification or accreditation

Recommended for you

How to create a blog using WordPress

A beginner's step by step guide for Creating a Responsive and Video intensive blog Hi,   Highly Responsive and works well in all devices, big and small....

Save Course

PSD to Responsive HTML5: Beginner to Advanced

Learn modern web development and convert a photoshop design to a responsive animated HTML5 and CSS3 website from scratch *** UDEMY BESTSELLER FOR "PSD TO HTML" COURSE TOPIC ***...

Save Course

How to Make a Website Without Coding- WordPress & Web Skills

Learn WordPress by making a blog, resume/portfolio, and business website from scratch. No coding or experience required. Without prior experience and without writing code....

Save Course