High-pixel-density screens affect how raster images such as JPGs and PNGs are displayed. In this video, discover a few ways to support images and high-pixel-density displays.
- [Instructor] In a previous lesson,…we talked about how high pixel density displays…affect raster images, such as JPEGs and PNGs.…Let's go over a few ways to support images…when displayed on high pixel density screens.…One option is to use icon fonts, or SVGs,…instead of JPEGs or PNG images.…Both icon fonts and SVGs are more scalable,…because they are vector-based,…while raster-based images are not.…You can also apply CSS styles to both icon fonts and SVGs.…
This may be easier for making design changes,…since you can update the CSS,…rather than create a new image.…Icon fonts and SVGs are not appropriate for photographs,…so if you need to use a PNG or JPEG image,…there are a couple of options.…You can target both Retina and non-Retina screens…by using a larger image.…Sizing JPEGs and PNG images up…will make it appear blurry,…but you can scale them down without losing quality.…Since Retina screens have double the amount of pixels,…we can use an image that is double the size.…
Let's say you need an image to be equivalent…
- Designing with a grid
- Working with a flexbox
- Retina and high-density displays
- Raster and vector graphics
- Retina and images
- Animation and shapes
- CSS3 keyframes and animation
- CSS shapes
- CSS shape functions
- Responsive typography
- Fluid typography
- Accessibility and ARIA
- Style guides for CSS
Skill Level Intermediate
2. Retina Displays and Images
3. Animation and Shapes
4. Tools and Tips
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.