How Image Optimization in Front-end optimization one of the key thing required for the best User Experience
FEO Front-end optimization, often known as content optimization or simply optimization. FEO is the process of fine-tuning your website to make it more browser-friendly and quicker to load. There are several ways to improve and optimize:
- Reducing HTTP Requests
- File Compression
- Cache Optimization
- Code Minification
- Image Optimization
Since the website’s compiles of HTML, CSS, JavaScript, Images and Other web components. Taking the stats from the Alexa. The project tracks how the web is built by periodically crawling the most popular sites (300,000+ from the Alexa Top 1M list) and recording and aggregating analytics on the number of resources, content types, and other metadata for each individual destination.
Images often account for most of the downloaded bytes on a web page and also often occupy a significant amount of visual space.
How Image Optimization works:
Working with Raster and Vector images:
The JPEG image format has a number of different compression modes. Three popular modes are baseline (sequential), Progressive JPEG (PJPEG) and lossless.
- Raster graphics represent images by encoding the values of each pixel within a rectangular grid of pixels. They are not resolution or zoom independent.
- Vector graphics use points, lines and polygons to represent images and formats using simple geometric shapes (e.g logos) offering a high-resolution and zoom like SVG handle this use case better.
Baseline JPEGs (the default for most image editing and optimization tools) are read complete article here
Originally published at https://www.linkedin.com on May 2, 2018.
