Skip to content

[WIP] Image compression #688

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

[WIP] Image compression #688

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1c255b4
Optimized all home page images
dr-ep May 5, 2020
151ac09
Optimized all home page images
dr-ep May 5, 2020
a7a4d7f
wip
dr-ep May 5, 2020
bb6bfdb
wip
dr-ep May 5, 2020
877cd46
Merge branch 'image-compression' of github.com:elasticpath/react-pwa-…
dr-ep May 5, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 21 additions & 21 deletions src/components/src/B2cHomePage/b2c.home.page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,19 +27,19 @@ import Config from '../../../ep.config.json';

import './b2c.home.page.scss';

import bannerImage1 from '../../../images/site-images/b2c-banner-1.png';
import bannerImage2 from '../../../images/site-images/b2c-banner-2.png';
import bannerImage3 from '../../../images/site-images/b2c-banner-3.png';
import productImage1 from '../../../images/site-images/b2c-product-1.png';
import productImage2 from '../../../images/site-images/b2c-product-2.png';
import productImage3 from '../../../images/site-images/b2c-product-3.png';
import productImage4 from '../../../images/site-images/b2c-product-4.png';
import productImage5 from '../../../images/site-images/b2c-product-5.png';
import productImage6 from '../../../images/site-images/b2c-product-6.png';
import productImage7 from '../../../images/site-images/b2c-product-7.png';
import bannerImage1 from '../../../images/site-images/optimized/b2c-banner-1.jpg';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We shouldn't need to rename the file extension. ImageContainer should be fetching the allowed image types from the config, and displaying the fall-back filetypes if the preceding doesn't exist.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we do decide to go with jpgs though our fallback imgs should be changed to jpgs

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree, this was more of a POC to demo different image compression ratios.

import bannerImage2 from '../../../images/site-images/optimized/b2c-banner-2.jpg';
import bannerImage3 from '../../../images/site-images/optimized/b2c-banner-3.jpg';
import productImage1 from '../../../images/site-images/optimized/b2c-product-1.jpg';
import productImage2 from '../../../images/site-images/optimized/b2c-product-2.jpg';
import productImage3 from '../../../images/site-images/optimized/b2c-product-3.jpg';
import productImage4 from '../../../images/site-images/optimized/b2c-product-4.jpg';
import productImage5 from '../../../images/site-images/optimized/b2c-product-5.jpg';
import productImage6 from '../../../images/site-images/optimized/b2c-product-6.jpg';
import productImage7 from '../../../images/site-images/optimized/b2c-product-7.jpg';


const bannerFileName1 = 'b2c-banner-1.png';
const bannerFileName1 = 'b2c-banner-1.jpg';
const bannerFileName2 = 'b2c-banner-2.png';
const bannerFileName3 = 'b2c-banner-3.png';
const productFileName1 = 'b2c-product-1.png';
Expand All @@ -59,7 +59,7 @@ const B2CHomePage: React.FunctionComponent = () => {
return (
<div className="home-page-b2c">
<section className="main-banner">
<ImageContainer className="main-banner-image" fileName={bannerFileName1} imgUrl={bannerImage1} />
<img className="main-banner-image" src={bannerImage1} alt="" />
<div className="main-banner-title-wrap">
<div className="container">
<h2 className="goods-heading">{intl.get('b2c-main-banner-heading')}</h2>
Expand Down Expand Up @@ -90,7 +90,7 @@ const B2CHomePage: React.FunctionComponent = () => {
<button type="button" className="ep-btn primary learn-more-btn">{intl.get('learn-more')}</button>
</div>
</div>
<ImageContainer className="main-goods-image" fileName={productFileName1} imgUrl={productImage1} />
<img className="main-goods-image" src={productImage1} alt="" />
</div>
</li>
<li className="main-goods__cell">
Expand All @@ -101,7 +101,7 @@ const B2CHomePage: React.FunctionComponent = () => {
<p className="goods-description">{intl.get('b2c-product2-description')}</p>
<button type="button" className="ep-btn primary learn-more-btn">{intl.get('add-to-cart-2')}</button>
</div>
<ImageContainer className="main-goods-image" fileName={productFileName2} imgUrl={productImage2} />
<img className="main-goods-image" src={productImage2} alt="" />
</div>
</li>
<li className="main-goods__cell">
Expand All @@ -114,7 +114,7 @@ const B2CHomePage: React.FunctionComponent = () => {
</p>
<button type="button" className="ep-btn primary learn-more-btn">{intl.get('b2c-product3-label')}</button>
</div>
<ImageContainer className="main-goods-image" fileName={productFileName3} imgUrl={productImage3} />
<img className="main-goods-image" src={productImage3} alt="" />
</div>
</li>
<li className="main-goods__cell">
Expand All @@ -126,7 +126,7 @@ const B2CHomePage: React.FunctionComponent = () => {
{intl.get('b2c-product4-description')}
</p>
</div>
<ImageContainer className="main-goods-image" fileName={productFileName4} imgUrl={productImage4} />
<img className="main-goods-image" src={productImage4} alt="" />
</div>
</li>
<li className="main-goods__cell">
Expand All @@ -137,7 +137,7 @@ const B2CHomePage: React.FunctionComponent = () => {
{intl.get('b2c-product5-heading')}
</h3>
</div>
<ImageContainer className="main-goods-image" fileName={productFileName5} imgUrl={productImage5} />
<img className="main-goods-image" src={productImage5} alt="" />
</div>
</li>
</ul>
Expand All @@ -146,7 +146,7 @@ const B2CHomePage: React.FunctionComponent = () => {
</section>

<section className="main-banner banner-section-2">
<ImageContainer className="main-banner-image" fileName={bannerFileName2} imgUrl={bannerImage2} />
<img className="main-banner-image" src={bannerImage2} alt="" />
<div className="main-banner-title-wrap">
<div className="container">
<h2 className="goods-heading">{intl.get('b2c-main-banner-heading2')}</h2>
Expand Down Expand Up @@ -174,7 +174,7 @@ const B2CHomePage: React.FunctionComponent = () => {
<h3 className="goods-title">{intl.get('b2c-product6-heading')}</h3>
<p className="goods-description">{intl.get('b2c-product6-description')}</p>
</div>
<ImageContainer className="main-goods-image" fileName={productFileName6} imgUrl={productImage6} />
<img className="main-goods-image" src={productImage6} alt="" />
</div>
</li>
<li className="main-goods__cell">
Expand All @@ -184,7 +184,7 @@ const B2CHomePage: React.FunctionComponent = () => {
<h3 className="goods-title">{intl.get('b2c-product7-heading')}</h3>
<p className="goods-description">{intl.get('b2c-product7-description')}</p>
</div>
<ImageContainer className="main-goods-image" fileName={productFileName7} imgUrl={productImage7} />
<img className="main-goods-image" src={productImage7} alt="" />
</div>
</li>
</ul>
Expand All @@ -193,7 +193,7 @@ const B2CHomePage: React.FunctionComponent = () => {
</section>

<section className="main-banner banner-section-3">
<ImageContainer className="main-banner-image" fileName={bannerFileName3} imgUrl={bannerImage3} />
<img className="main-banner-image" src={bannerImage3} alt="" />
<div className="main-banner-title-wrap">
<div className="container">
<h2 className="goods-heading">{intl.get('b2c-main-banner-heading3')}</h2>
Expand Down
2 changes: 1 addition & 1 deletion src/ep.config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"cortexApi": {
"path": "/cortex",
"scope": "vestri",
"pathForProxy": "http://localhost:9080",
"pathForProxy": "https://reference.epdemos.com",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

leftover config

"reqTimeout": "30000"
},
"supportedLocales": [
Expand Down
Binary file added src/images/site-images/optimized/b2c-banner-1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/site-images/optimized/b2c-banner-2.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/site-images/optimized/b2c-banner-3.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/site-images/optimized/b2c-product-1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/site-images/optimized/b2c-product-2.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/site-images/optimized/b2c-product-3.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/site-images/optimized/b2c-product-4.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/site-images/optimized/b2c-product-5.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/site-images/optimized/b2c-product-6.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/site-images/optimized/b2c-product-7.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/site-images/optimized/hero-banner-0.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/images/site-images/optimized/maintenance-banner.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.