Come fare un box con gli angoli arrotondati?

							border-radius: 30px;
							box-shadow: 0 0 10px 1px #080808;
						

“The fastest and best-optimized resource is a resource not sent.”
Ilya Grigorik

Immagini Responsive

							img {
								max-width: 100%;
								height: auto;
							}
						

Srcset

800px

400px

200px / 150px

200px col

Srcset + sizes

200px col (sizes ON)

Image Lazy Load

Intersection Observer API

						let lazyImageObserver = new IntersectionObserver((entries, observer) => {
							entries.forEach(entry => {
								if (entry.isIntersecting) {
									let loadImage = entry.target;
									loadImage.src = image.dataset.src;
									lazyImageObserver.unobserve(loadImage);
								}
							})
						})
					

						lazyImageObserver.observe(element);
					

						let lazyImageObserver = new IntersectionObserver((entries, observer) => {
							entries.forEach(entry => {
								if (entry.isIntersecting) {
									let loadImage = entry.target;
									loadImage.src = image.dataset.src;
									lazyImageObserver.unobserve(loadImage);
								}
							})
						})
					

						let lazyImageObserver = new IntersectionObserver((entries, observer) => {
							entries.forEach(entry => {
								if (entry.isIntersecting) {
									let loadImage = entry.target;
									loadImage.src = image.dataset.src;
									lazyImageObserver.unobserve(loadImage);
								}
							})
						})
					

						let lazyImageObserver = new IntersectionObserver((entries, observer) => {
							entries.forEach(entry => {
								if (entry.isIntersecting) {
									let loadImage = entry.target;
									loadImage.src = image.dataset.src;
									lazyImageObserver.unobserve(loadImage);
								}
							})
						})
					

						let lazyImageObserver = new IntersectionObserver((entries, observer) => {
							entries.forEach(entry => {
								if (entry.isIntersecting) {
									let loadImage = entry.target;
									loadImage.src = image.dataset.src;
									lazyImageObserver.unobserve(loadImage);
								}
							})
						})
					

						let lazyImageObserver = new IntersectionObserver((entries, observer) => {
							entries.forEach(entry => {
								if (entry.isIntersecting) {
									let loadImage = entry.target;
									loadImage.src = image.dataset.src;
									lazyImageObserver.unobserve(loadImage);
								}
							})
						})
					

						if ("IntersectionObserver" in window) {
							let lazyImageObserver ...
						} else {
							// Fallback
						}
					

lazySizes

https://afarkas.github.io/lazysizes/index.html

Vector vs Raster Images

Inline SVG

						.iconColor {
							fill: yellow;
						}
					

							.iconColor {
								fill: transparent;
								stroke: yellow;
								stroke-width: 5px;
							}
						

Symbols

Font Icons

• Fontello
• IcoMoon

Ricapitoliamo...

• Responsive Images
• New File Formats
• Lazy Loading
• SVG Icons
• Don't use images (when not needed)

Q&A

Thanks