anitab-org / anitab-org/anitab-org.github.io

Optimize Images

Abierto
#198 22 comentarios 2 reacciones 1 asignado Reclamado por @aditi5050 Ver en GitHub
Category: User Interface
Lenguaje dominante
JavaScript
Estrellas
155
Forks
190
Métricas de merge de PR
Sin PR fusionados en 30 d

Descripción

### Describe the bug
Large sized images slow down the web pages which creates a less than optimal user experience.
We can reduce the image’s file sizes to help improve our website’s performance.

### To Reproduce
Steps to reproduce the behavior:
1. Go to https://anitab-org.github.io/
2. Right Click -> Inspect Element -> Go to Network Tab
3. Check out the file sizes and loading time

### Expected behavior
We can reduce the image sizes without compromising the image quality.

### Screenshots
Here's an example
![anitab_issue](https://user-images.githubusercontent.com/54268438/105041392-f35de080-5a88-11eb-9cf7-5670219b2b9b.JPG)

Also, the about image is of 1.1 MB which is very large and takes very long to load in a poor internet connection and needs to be optimized.
image-about

### Desktop (please complete the following information):
- OS: Windows 10
- Browser : Chrome
- Version : 87.0.4280.141 (Official Build) (64-bit)

### Additional context
I tried optimizing a image from the website and the size reduced significantly with no reduction in quality.
Before Optimization : Size -> 470.8 KB
![landing 1c27c683](https://user-images.githubusercontent.com/54268438/105042349-2359b380-5a8a-11eb-85ee-1a68d8bb4a50.png)

After Optimization : Size -> 66.2 KB
![landing 1c27c683 (1)](https://user-images.githubusercontent.com/54268438/105042381-2eacdf00-5a8a-11eb-9c5f-7722dc64c72a.png)

![after-compression](https://user-images.githubusercontent.com/54268438/105042458-48e6bd00-5a8a-11eb-9deb-385d1634c457.JPG)

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.