Please enable JavaScript.
Coggle requires JavaScript to display documents.
IMAGES - Coggle Diagram
IMAGES
SWITCH
Resolution
Different
Mobile
Tablet
Desktop
Relative
Sized
Images
Solves
Reducing
Resolution
Browser
Use
Srcset
"p.jpg 400w,
p@2x.jpg
800w,..."
Responsive
Remove
Width
Css
Sizes
(max-width: 500px) 100vw,
(max-width: 700px) 50vw,
33vw
Deciding
ImageSizes
ResponsiveBreakpoints.com
DATA-URLS
Optimization
Embed
Image
Directly
Search
Data
URL
Generator
Use
Img
Src
data:image/png;base64,...
Problems
Increased
Size
Complexity
Slow
Mobile
TYPES
Formats
JPG
16M-colors
No
Transparency
Animation
GIF
256-colors
With
Transparency
Animation
PNG-WebP
16M-colors
With
Transparency
Animation
WebP
Modern
Using
Picture
Source
Type
webp
jpeg
srcset
"path 1x, ..."
img
Fallback
Image
Raster
Vector
Maths
Used
Icons
Logos
Background
Svgbackgrounds.com
UTILITIES
Clipping
Image
Part
Search
Clip
CSS
Generator
Uses
Clip-Path
Filters
Grayscale
Blur
Contrast
Brightness
Saturate
Sprites
Combine
Images
Generator
Uses
Background
Property
Problem
Flexible
Not
Small
Images
Only
Optimization
SUPPORT
High
Density
Terms
Resolution
Physical
Logical
DPR
Physical/Logical
'>1
High
Density
Make
4
3
2
Using
Img
Src
Base
Srcset
"p.jpg 1x,
p@2x.jpg
2x, ..."
Only
Homepage
FixedSize
ART
Direction
Different
Image
Resolution
Use
Picture
Source
Media
"(max-width: 500px)"
"(min-width: 501px)"
Srcset
Cropped.jpg
Original.jpg
Img
Fallback
FONT-ICONS
Sources
Font-Awesome
Ionicons
Material-Design-Icons
Font-Awesome
Register
Create
Kit
Script
Add
Use
Span
Class
Fas
Fa
User-Friends
2x
Control
Wrap
Parent
Span
Change
FontSize
Color
Css
DISPLAY
Content
Img
Alt
Description
Screenreaders
Empty
Decorative
Purpose
Background
Decorative
URL()
ImagePath
Repeat
Avoid
Vals
No-Repeat
Repeat-X/Y
Position
Value
horizontal vertical
100px 100px
Default
top-left
Can
-ve
Relative-Unit
Size
Value
Width Height
Cover
Aspect
Ratio
Attachment
Fixed
For-scrolling