Replace 14 homepage 'showcase' brand images to scaled images (100x100)

[elharony]

It's my first PR, so forgive me if it's not organized or something! 🙏

I found that we are resizing the Showcase section images using CSS, which isn't recommended. Instead, we need to Use Scaled Images directly. It seriously affects our website performance, here's GTMetrix Report:

I resized all images (without decreasing its quality nor changing its extension) to 100x100. Total 14 images size was 574KB, and now it becomes 81.3KB (~86% smaller). This should give us a green Grade A on GTMetrix Serve Scaled Images criteria 👌

UPDATE: I changed them to 100x100 instead of 68x68 as it appears to be hardcoded to 100x100 on the Showcase Page, now it won't break the UI there.

[react-native-bot]

Deploy preview for react-native ready!

Built with commit 394b2dd

https://deploy-preview-1361--react-native.netlify.com

Changes to docs/ are reflected in the next "master" version.

Thank you for your contributions.

_{How to Contribute • Documentation Sources}

[elharony]

Any updates, @rickhanlonii ?

[rickhanlonii]

@elharony, thanks for submitting this!

On the left is your change and the right is production:

Switching to 100x100 causes blurring on retina screens, can you do this with 200x200 or 300x300? That should fix the blurring 👍

[elharony]

Thanks @rickhanlonii for checking it out and providing such feedback!

We can't switch them to 300x300 as many of them is less than 300x300, but 200x200 is good for all 14 images, except the artsy, it's 167x167.

Well, I have a few suggestions here:

1. Stick with 150x150, it will suit all current images & possibly future images as well.
2. Keep them 200x200 except the artsy logo as it will look even worse if we scale it up (Bigger size, Bad quality!)

What do you think, Ricky? I would be happy to continue working on this part according to your feedback/suggestion to make it scalable for any future images as well.

[nearestnabors]

What a wonderful idea! I have a suggestion: check out this format to accomodate retina screens as well as lower DPI without burdening one over the other:

<img 
  src="/img/2016/p_rachel-in-the-cubicle.png" 
  srcset="/img/2016/p_rachel-in-the-cubicle2x.png 2x" 
  height="338" width="600" alt="A manga-style illustration of Rachel Nabors winking from behind a computer monitor in an implied cubicle." 
/>

(From this old blog post)

You would use:

<img 
  src="/img/100x100.png" 
  srcset="/img/200x200.png 2x" 
  height="100" width="100" alt="Brand X" 
/>

Unless you don't have a 200x200 pic, in which case this works fine:

<img 
  src="/img/100x100.png" 
  height="100" width="100" alt="Brand X" 
/>

What do you all think?

[rickhanlonii]

Sounds good to me! Sorry for the delay @elharony I must have missed the notification!

[elharony]

Great. So, I will go for #1 Suggestion and keep the in 150x150, right @rickhanlonii ?

[rickhanlonii]

Oh sorry, my message is confusing, I think we should go with @rachelnabors' solution which is your option 1, along with the updated image tags she provided 👍

[nearestnabors]

Any movement on this @elharony? I'd soooo love to have this update on the site if you can get to it!

[rickhanlonii]

@elharony if you're not interesting in doing the full <img> tag version, updating this to use your option number 2 of using 200x200 for all images except artsy is good too!

[rickhanlonii]

@orta do you know where we could find a artsy logo that's at least 200x200?

[elharony]

Hey @rickhanlonii ,

Very sorry for being late, I am doing a Frontend Diploma with OpenClassrooms and I had some projects to finish. I've done the requested update, please give it another try!

[orta]

Here's a copy: https://is4-ssl.mzstatic.com/image/thumb/Purple123/v4/70/64/3f/70643fc6-24c0-1878-c4a4-cbb92f8fc199/AppIcon-0-1x_U007emarketing-0-0-GLES2_U002c0-512MB-sRGB-0-0-0-85-220-0-0-0-4.png/460x0w.png

[elharony]

Thank you @orta . I've updated the Artsy logo.
@rickhanlonii Now, all of them are updated to 200x200 and optimized. Let me know if this PR needs any further changes

[rickhanlonii]

Alright looks great thank you!

[rickhanlonii]

btw I just created this issue to update the Facebook logo if you're interested!

#1524

[elharony]

Thanks for approving this PR. I am interested in #1524 and I will fix it! 👍