diff --git a/ui/component/loginGraphic/index.jsx b/ui/component/loginGraphic/index.jsx
index 7b5f888da..003352735 100644
--- a/ui/component/loginGraphic/index.jsx
+++ b/ui/component/loginGraphic/index.jsx
@@ -1,13 +1,36 @@
 // @flow
 import React from 'react';
 import { SITE_NAME, LOGIN_IMG_URL } from 'config';
+import { getThumbnailCdnUrl } from 'util/thumbnail';
 
 function LoginGraphic(props: any) {
   const [error, setError] = React.useState(false);
-  const src = LOGIN_IMG_URL;
+  const [src, setSrc] = React.useState('---');
+  const containerRef = React.useRef<any>();
+  const imgUrl = LOGIN_IMG_URL;
 
-  return error || !src ? null : (
-    <div className="signup-image">
+  React.useEffect(() => {
+    if (containerRef.current && containerRef.current.parentElement && containerRef.current.parentElement.offsetWidth) {
+      const newWidth = containerRef.current.parentElement.offsetWidth;
+
+      let newSrc = imgUrl && imgUrl.trim().replace(/^http:\/\//i, 'https://');
+      // @if TARGET='web'
+      // Pass image urls through a compression proxy, except for GIFs.
+      newSrc = getThumbnailCdnUrl({ thumbnail: newSrc, width: newWidth, height: newWidth * 2 });
+      // @endif
+
+      setSrc(newSrc);
+    } else {
+      setSrc(imgUrl);
+    }
+  }, []);
+
+  if (error || !imgUrl) {
+    return null;
+  }
+
+  return (
+    <div className="signup-image" ref={containerRef}>
       <img alt={__('%SITE_NAME% login image', { SITE_NAME })} src={src} onError={() => setError(true)} />
     </div>
   );
diff --git a/ui/scss/component/_main.scss b/ui/scss/component/_main.scss
index af73b85ff..5d5eadb84 100644
--- a/ui/scss/component/_main.scss
+++ b/ui/scss/component/_main.scss
@@ -336,12 +336,17 @@
   max-width: 47rem;
 
   .card__second-pane {
+    width: 50%;
     border: none;
     display: flex;
     align-items: center;
     justify-content: center;
     background: var(--color-login-graphic-background);
 
+    @media (max-width: $breakpoint-small) {
+      width: 100%;
+    }
+
     .signup-image {
       @media (max-width: $breakpoint-small) {
         width: 50%;