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.

https://media.licdn.com/media/gcrc/dms/image/C5112AQHIdfj8qecUKQ/article-cover_image-shrink_600_2000/0?e=2124662400&v=beta&t=7dz5H5Wha6XaSPeDpbYkuVnteqUT7vaboZ4GqDnluTk

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:

https://media.licdn.com/dms/image/C5112AQEj0_tUTSVnCw/article-inline_image-shrink_1500_2232/0?e=2124662400&v=beta&t=BLJsm6WFjz2_C1ICDhZONHfBIgOPfS1-gm8Q-boBoyE

Working with Raster and Vector images:

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.

The JPEG image format has a number of different compression modes. Three popular modes are baseline (sequential), Progressive JPEG (PJPEG) and lossless.

Read complete article


79 0 0