OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.
Course image
Udacity logo

Responsive Images

Cameron Pittman and Sam Dutton

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

We found an offer that may be relevant to this course.
Save money when you learn. 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.
Take
40%
off
UDACITY40

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.
Read more
Optimize images to display beautifully on all screen sizes. Learn about the difference between Raster vs Vector images, responsive CSS units, and setting up optimization tools.
Dive deep into image alternatives like CSS and icon fonts and learn common strategies to alleviate latency.
Learn to use the srcset attribute and the picture element to choose images of the right size for your application for every viewing context.

Good to know

Know what's good
, what to watch for
, 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

Save Responsive Images to your list so you can find it easily later:
Save

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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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

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.
Cover image
CSS: The Definitive Guide
Save
Provides a deep dive into CSS, including advanced techniques for responsive design and image optimization.
CSS: The Definitive Guide: Web Layout and...
Paperback
$$$
CSS: The Definitive Guide: Visual Presentation for...
Paperback
$$$
CSS: The Definitive Guide
Kindle Edition
$$$
Cover image
CSS Mastery
Save
Provides a deep dive into advanced CSS techniques, including responsive design, image optimization, and performance.
CSS Mastery: Advanced Web Standards Solutions
Kindle Edition
$$
CSS Mastery: Advanced Web Standards Solutions
Paperback
$$
Cover image
Responsive Web Design with HTML5 and CSS
Save
Provides a comprehensive overview of responsive web design principles and techniques, including image optimization and responsive CSS units.
Responsive Web Design with HTML5 and CSS - Fourth...
Paperback
$$
Responsive Web Design with HTML5 and CSS: Develop...
Paperback
$$
Responsive Web Design with HTML5 and CSS: Build...
Kindle Edition
$$
Responsive Web Design with HTML5 and CSS: Develop...
Kindle Edition
$$
Cover image
Ordering Disorder
Save
Provides a collection of expert articles on responsive design, including image optimization and performance.
Ordering Disorder: Grid Principles for Interaction...
Paperback
$$
Ordering Disorder: Grid Principles for Web Design...
Unknown Binding
$$$$
Ordering Disorder: Grid Principles for Web Design...
Kindle Edition
$$
Cover image
Adobe Dreamweaver CC Classroom in a Book
Save
Provides a comprehensive overview of SVG, a vector-based image format that is often used for responsive design.
Adobe Dreamweaver CC Classroom in a Book
Paperback
Check
Adobe Dreamweaver CC Classroom in a Book
Kindle Edition
Check
Cover image
HTML5 & CSS3 For The Real World
Save
Provides a practical guide to HTML5 and CSS3, including responsive design and image optimization.
HTML5 & CSS3 For The Real World: Powerful HTML5 and...
Paperback
$$
HTML5 & CSS3 For The Real World
Paperback
$
HTML5 & CSS3 For The Real World: Powerful HTML5 and...
Kindle Edition
$$
Cover image
High Performance Browser Networking
Save
Covers the fundamentals of browser networking and optimization techniques, including image loading and caching.
High Performance Browser Networking: What every web...
Paperback
$$
(中文) Web性能权威指南 (图灵程序设计丛书) (Chinese Edition)
Kindle Edition
$
Cover image
Front-End Back-End Development with HTML, CSS,...
Save
Provides a practical guide to web design and development, including image optimization and responsive design.
Front-End Back-End Development with HTML, CSS,...
Hardcover
$$$
Cover image
The Principles of Beautiful Web Design
Save
Provides guidance on visual design principles and best practices, including image selection and composition.
The Principles of Beautiful Web Design
Paperback
$$
The Principles of Beautiful Web Design
Kindle Edition
$$
Cover image
Designing for Interaction
Save
Provides a discussion on the importance of constraints in design, including how to work with responsive design limitations.
Designing for Interaction
Paperback
Check
Designing for Interaction
Kindle Edition
Check

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Here are nine courses similar to Responsive Images.
Multicloud Foundations
Most relevant
Responsive Web Images
Most relevant
HTML for Beginners: Working with Images
Most relevant
Mastering Advanced Color Grading in Photoshop
Images and Links in HTML
Learn Figma - UI/UX Design Essential Training
Machine Learning for Computer Vision
Create Amazing Graphics and Art using Stable Cascade
Modern CSS for Beginners 2023 web design getting started
Course image
Effort
10 hours
Via
Udacity
Instructors
Cameron Pittman
Sam Dutton
Language
English
Good to know
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
Share and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser