Images make a website feel alive, but they can also slow it down and cause legal trouble if you handle them carelessly. Today, I'll share what I learned about images for use on web.
Optimizing Media Assets
Three things matter when using images on a web page: size, format and compression.
1. Size
If you style an image to display at 640X480 (640px wide & 480 px tall), we should use an image file of the same size. If we use a 1920X1080 image file for this small display space the users are forced to download data that they'll never see. A smaller resolution means smaller file, which in turn means faster page.
2. Format
PNG and JPG are the most common formats for images. But these are no longer the best option for web use. For web, WEBP or AVIF are the most optimized (but may cause compatibility issues for some older browsers)
3. Compression
We can run compression algorithms on our images to shrink the image size. But not all compressions run the same way
- Lossless formats like PNGs can be compressed without any quality loss, because the original data can be reconstructed perfectly. Using tools like PNGCRUSH it's very easily doable
- Lossy formats like JPGs lose quality from compression though
Image Licenses
Images are intellectual property, and most of the time they're protected by copyright. By default they're all rights reserved, so we can't just use any image we want from the internet in our page. To use these images we need to:
- Get written permission from the copyright holder.
- or Purchase a license from the creator
- or Use the image in a way that falls under fair use.
Fair use is a tricky one. We must be both limited and transformative in our use case.
Then there are Public Domain images. These images have no copyright attached and can be used freely. Images released under Creative Commons 0 are treated as public domain. Sites like Pixabay, Unsplash etc. have images which are free to use.
SVGs
PNG and JPG are raster formats: they store color value on every pixel. This means they don't upscale well and get pixalated or blurry.
On the other hand, SVGs (scalable vector graphic) work differently. It stores color values as paths and equations that plot points, lines and curves, so it can be scaled to any size with no loss in quality.
SVG store their data in XML, so we can write SVGs directly inside our HTML code using the svg element
-----
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="45" fill="yellow" />
<circle cx="35" cy="40" r="5" fill="black" />
<circle cx="65" cy="40" r="5" fill="black" />
<path d="M30 65 Q50 85 70 65" stroke="black" stroke-width="3" fill="none" />
</svg>
-----
Basic syntax
svg: The container housing all the elements. Everything else goes inside it.
circle: Used to draw a circle
path: draws curves or lines
Best place to use SVGs: Icons, Logos. Font awesome is the most popular icon library which also use SVGs.
There we have it. Basics of using images on the web.
Thank you for reading!!!
No comments:
Post a Comment