Optimize Images

[Rahulm2310]

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

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.

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

After Optimization : Size -> 66.2 KB

[annabauza]

Please remeve comments like I want to work on this issue from description.

[Rahulm2310]

@annabauza removed it.

[annabauza]

@Rahulm2310 also remove from description @annabauza Please share your thoughts 😊 other then that issue is approved

[Rahulm2310]

@annabauza now can it be assigned to me ?

[rutvi18]

Can I take up the issue?

[Rahulm2310]

@rutvi18 Please have a look at other available issues. I am already looking into it. Thanks

[annabauza]

Technically you have not been assigned @Rahulm2310 , however indeed you asked first to be assigned to this issue. In other hand you have created the issue, so I'm not sure here. @isabelcosta @mayburgos can you help me out here?

[Rahulm2310]

@annabauza I have not started working on it. I am just looking for good libraries we could use for image compression . 🙂

[isabelcosta]

@annabauza I would say @Rahulm2310 created this, and if this is not considered as "first timers only" then @Rahulm2310 can work on this, for asking for it first.

[annabauza]

Thank you @isabelcosta . @Rahulm2310 yours :)

[Rahulm2310]

@annabauza @isabelcosta Should we use something like Imgbot.
Actually, there are not much image compression libraries for frontend. Most of them are for server side. Ex: imagemin.
Although, currently there are not many images and we can compress each of them manually but it is not a very dev friendly solution. Or, if you guys have a suggestion, please share your views

[annabauza]

I think designers should compress I'll rise this with design team.

[Rahulm2310]

@annabauza yes definitely they can, but I think we need a long term solution which could compress all images we add to the website in future.

[annabauza]

I understand your thinking here, but quality needs to be approved by human designer eye. This is why it's designer responsibility.

[nandini45]

@Rahulm2310 Can u tell us your progress about this issue??

[Rahulm2310]

@nandini45 I thought the design team will handle this issue. If we need manual optimization, I can do it and submit a PR asap. Shall I ?

[Ayushi271]

Hello
My sincere greetings
Is this issue still open?
Can you assign it to me?

[Aaishpra]

Hello My sincere greetings Is this issue still open? Can you assign it to me?

Assigned!

[aditi5050]

Hello @tinniaru3005 can I work on with this issue can you please assign this to me

[tinniaru3005]

Unassigned due to long inactivity so that others can take up the issue.

[tinniaru3005]

Hey @aditi5050, here you go! :)

[aditi5050]

@tinniaru3005 thanks alot :)