We may earn an affiliate commission when you visit our partners.

Responsive Images

Take Udacity's responsive images course and go beyond image tags! Learn how to make images a part of your responsive design workflow.

Enroll now

Here's a deal for you

Save money when you learn with a deal that may be relevant to this course.

All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.

Use code at checkout. Valid for a limited time only

Bootcamp level quality

Complete hands-on projects and get personalized feedback with Udacity.

What's inside

Syllabus

Sam Dutton, developer advocate at Google, explains the importance of getting responsive images right and helps you setup mobile developer tools.

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Gives a strong foundation in image optimization techniques

Covers essential principles like raster and vector images, and responsive CSS units

Taught by experts in the field, ensuring up-to-date knowledge and credibility

Explores common strategies to improve image loading times and reduce latency

Addresses the importance of optimizing images for various screen sizes and devices

Save this course

Create your own learning path. Save this course to your list so you can find it easily later.

Save

Reviews summary

Mastering responsive image techniques

According to students, this course provides a solid and practical foundation for mastering responsive images. Learners praise the crystal-clear explanations of key concepts like the `srcset` attribute and `picture` element, making complex topics digestible. The instructor, Sam Dutton, is highly engaging and effective, and the hands-on demos are particularly helpful for practical application. Many found the content essential for improving website performance and responsiveness. While recent reviews remain largely positive, some older feedback suggests that certain sections or optimization tools might be slightly introductory or could benefit from updates for advanced learners. Overall, it's considered a must-have for front-end developers aiming to build robust, performant web experiences.

The instructor's clear and digestible teaching style enhances learning.

"Sam Dutton explains the `srcset` attribute and `picture` element with such clarity, making complex concepts easy to understand."

"Sam Dutton makes complex topics digestible."

"Sam Dutton is a very clear and engaging instructor."

Highly beneficial for beginners and those needing a solid foundation.

"This course was exactly what I needed to grasp responsive images."

"It's helpful for absolute beginners to grasp the concepts."

"As an introductory course, it certainly delivers on its promise to improve responsive design workflow."

Effectively demystifies complex responsive image techniques.

"Sam Dutton's explanations of the `srcset` attribute and `picture` element are crystal clear, demystifying responsive image techniques."

"I particularly appreciated the hands-on demos which illustrated how to implement these concepts directly into a web project."

"I learned so much about optimizing images for different devices and how to correctly implement `srcset` and `picture`."

Some content may feel introductory or require updates for advanced learners.

"For someone with a bit more experience, it felt a little too superficial."

"Some tools mentioned might be slightly outdated, suggesting the course could benefit from an update to reflect current best practices."

"It lacks the practical depth I was hoping for... I had to supplement my learning with external resources to fully understand certain concepts."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Responsive Images with these activities:

Guided Responsive Images Tutorial

Show steps

Follow online tutorials to gain practical experience with responsive images.

Show steps

Identify a tutorial or online course on responsive images for beginners.
Follow the tutorial step-by-step, implementing the techniques in your own projects.

Peer Review Session: Image Optimization

Show steps

Obtain feedback from peers to improve your understanding and identify areas for improvement.

Show steps

Connect with classmates or join online forums.
Share your optimized images or code with peers for feedback and discussion.

Image Optimization Exercise

Show steps

Put your knowledge into practice by optimizing images for web use.

Show steps

Gather various images in different formats (e.g., JPG, PNG, SVG).
Use image optimization tools to compress and reduce file sizes.
Compare the original and optimized images in terms of quality and file size.

Four other activities

Expand to see all activities and additional details

Show all seven activities

Web Developer Conference on Responsive Images

Show steps

Attend industry events to expand your knowledge and connect with professionals.

Show steps

Research and identify upcoming conferences focusing on responsive images.
Attend the conference, listen to speakers, and participate in discussions.

Portfolio Project: Responsive Image Website

Show steps

Apply your skills by building a portfolio project that showcases your proficiency in responsive images.

Show steps

Plan and design a website that utilizes responsive images.
Develop the website using HTML, CSS, and JavaScript.
Test the website on different devices and screen sizes.
Deploy the website and showcase it in your portfolio.

Infographic: Responsive Images Best Practices

Show steps

Create a visual summary to reinforce your understanding and share with others.

Show steps

Gather information on responsive images best practices from reputable sources.
Design an infographic using a tool like Canva or Adobe Creative Suite.
Share your infographic on social media or online forums to engage with the community.

Mentor Junior Developers in Responsive Images

Show steps

Reinforce your understanding by sharing your knowledge with others.

Show steps

Identify junior developers or students who need guidance in responsive images.
Provide mentorship, share your expertise, and guide their learning.

Career center

Learners who complete Responsive Images will develop knowledge and skills that may be useful to these careers:

Web Developer

A Web Developer is someone who builds and maintains websites. They are responsible for the design, development, and deployment of websites. This course will help you build a foundation in responsive image techniques that will be essential for your success as a web developer. You will learn how to optimize images for all screen sizes, use the srcset attribute and the picture element to choose the right image for each viewing context, and use CSS and icon fonts to create beautiful and efficient images.

See salaries and explore the career path for Web Developer

Front-End Developer

A Front-End Developer is responsible for the design and implementation of the user interface of a website or application. This course will help you build a foundation in responsive image techniques that will be essential for your success as a front-end developer. You will learn how to optimize images for all screen sizes, use the srcset attribute and the picture element to choose the right image for each viewing context, and use CSS and icon fonts to create beautiful and efficient images.

See salaries and explore the career path for Front-End Developer

UI Designer

A UI Designer is responsible for the design of the user interface of a website or application. This course will help you build a foundation in responsive image techniques that will be essential for your success as a UI designer. You will learn how to optimize images for all screen sizes, use the srcset attribute and the picture element to choose the right image for each viewing context, and use CSS and icon fonts to create beautiful and efficient images.

See salaries and explore the career path for UI Designer

UX Designer

A UX Designer is responsible for the user experience of a website or application. This course will help you build a foundation in responsive image techniques that will be essential for your success as a UX designer. You will learn how to optimize images for all screen sizes, use the srcset attribute and the picture element to choose the right image for each viewing context, and use CSS and icon fonts to create beautiful and efficient images.

See salaries and explore the career path for UX Designer

Art Director

An Art Director is responsible for the visual design of a website or application. This course will help you build a foundation in responsive image techniques that will be essential for your success as an art director. You will learn how to optimize images for all screen sizes, use the srcset attribute and the picture element to choose the right image for each viewing context, and use CSS and icon fonts to create beautiful and efficient images.

See salaries and explore the career path for Art Director

Graphic Designer

A Graphic Designer is responsible for the creation of visual content, such as logos, brochures, and websites. This course will help you build a foundation in responsive image techniques that will be essential for your success as a graphic designer. You will learn how to optimize images for all screen sizes, use the srcset attribute and the picture element to choose the right image for each viewing context, and use CSS and icon fonts to create beautiful and efficient images.

See salaries and explore the career path for Graphic Designer

Product Designer

A Product Designer is responsible for the design of a product, from concept to launch. This course will help you build a foundation in responsive image techniques that will be essential for your success as a product designer. You will learn how to optimize images for all screen sizes, use the srcset attribute and the picture element to choose the right image for each viewing context, and use CSS and icon fonts to create beautiful and efficient images.

See salaries and explore the career path for Product Designer

Marketing Manager

A Marketing Manager is responsible for the development and execution of marketing campaigns. This course may be useful for you if you are interested in learning how to use images to create effective marketing campaigns. You will learn how to optimize images for all screen sizes, use the srcset attribute and the picture element to choose the right image for each viewing context, and use CSS and icon fonts to create beautiful and efficient images.

See salaries and explore the career path for Marketing Manager

Content Manager

A Content Manager is responsible for the creation and management of content for a website or application. This course may be useful for you if you are interested in learning how to use images to create effective content. You will learn how to optimize images for all screen sizes, use the srcset attribute and the picture element to choose the right image for each viewing context, and use CSS and icon fonts to create beautiful and efficient images.

See salaries and explore the career path for Content Manager

Social Media Manager

A Social Media Manager is responsible for the development and execution of social media campaigns. This course may be useful for you if you are interested in learning how to use images to create effective social media campaigns. You will learn how to optimize images for all screen sizes, use the srcset attribute and the picture element to choose the right image for each viewing context, and use CSS and icon fonts to create beautiful and efficient images.

See salaries and explore the career path for Social Media Manager

Search Engine Optimization (SEO) Specialist

A Search Engine Optimization (SEO) Specialist is responsible for improving the visibility of a website or application in search engine results pages (SERPs). This course may be useful for you if you are interested in learning how to use images to improve the SEO of a website or application. You will learn how to optimize images for all screen sizes, use the srcset attribute and the picture element to choose the right image for each viewing context, and use CSS and icon fonts to create beautiful and efficient images.

See salaries and explore the career path for Search Engine Optimization (SEO) Specialist

Data Analyst

A Data Analyst is responsible for collecting, analyzing, and interpreting data to help businesses make better decisions. This course may be useful for you if you are interested in learning how to use images to analyze data. You will learn how to optimize images for all screen sizes, use the srcset attribute and the picture element to choose the right image for each viewing context, and use CSS and icon fonts to create beautiful and efficient images.

See salaries and explore the career path for Data Analyst

Business Analyst

A Business Analyst is responsible for analyzing business processes and identifying opportunities for improvement. This course may be useful for you if you are interested in learning how to use images to improve business processes. You will learn how to optimize images for all screen sizes, use the srcset attribute and the picture element to choose the right image for each viewing context, and use CSS and icon fonts to create beautiful and efficient images.

See salaries and explore the career path for Business Analyst

User Experience (UX) Researcher

A User Experience (UX) Researcher is responsible for conducting research to understand the needs and wants of users. This course may be useful for you if you are interested in learning how to use images to conduct UX research. You will learn how to optimize images for all screen sizes, use the srcset attribute and the picture element to choose the right image for each viewing context, and use CSS and icon fonts to create beautiful and efficient images.

See salaries and explore the career path for User Experience (UX) Researcher

Information Architect

An Information Architect is responsible for designing and organizing the structure and content of a website or application. This course may be useful for you if you are interested in learning how to use images to create a well-organized and easy-to-use website or application. You will learn how to optimize images for all screen sizes, use the srcset attribute and the picture element to choose the right image for each viewing context, and use CSS and icon fonts to create beautiful and efficient images.

See salaries and explore the career path for Information Architect

Reading list

We've selected ten books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Responsive Images.