diff --git a/app/javascript/mastodon/components/media_gallery.js b/app/javascript/mastodon/components/media_gallery.js
index 78ff351308c..2cb1ce51c80 100644
--- a/app/javascript/mastodon/components/media_gallery.js
+++ b/app/javascript/mastodon/components/media_gallery.js
@@ -85,14 +85,24 @@ class Item extends React.PureComponent {
let thumbnail = '';
if (attachment.get('type') === 'image') {
+ const previewUrl = attachment.get('preview_url');
+ const previewWidth = attachment.getIn(['meta', 'small', 'width']);
+
+ const originalUrl = attachment.get('url');
+ const originalWidth = attachment.getIn(['meta', 'original', 'width']);
+
+ const srcSet = `${originalUrl} ${originalWidth}w, ${previewUrl} ${previewWidth}w`;
+ const sizes = `(min-width: 1025px) ${320 * (width / 100)}px, ${width}vw`;
+
thumbnail = (
-
+ >
+
+
);
} else if (attachment.get('type') === 'gifv') {
const autoPlay = !isIOS() && this.props.autoPlayGif;
diff --git a/app/javascript/styles/components.scss b/app/javascript/styles/components.scss
index 91ebd91fd19..84732ed4a9b 100644
--- a/app/javascript/styles/components.scss
+++ b/app/javascript/styles/components.scss
@@ -3453,10 +3453,15 @@ button.icon-button.active i.fa-retweet {
background-repeat: no-repeat;
background-size: cover;
cursor: zoom-in;
- display: block;
- height: 100%;
+ display: flex;
+ align-items: center;
text-decoration: none;
- width: 100%;
+ height: 100%;
+
+ &,
+ img {
+ width: 100%;
+ }
}
.media-gallery__gifv {