diff --git a/app/helpers/image_helper.rb b/app/helpers/image_helper.rb
new file mode 100644
index 0000000..6717349
--- /dev/null
+++ b/app/helpers/image_helper.rb
@@ -0,0 +1,5 @@
+module ImageHelper
+  def image_thumb(image, size)
+    image.thumb(size).encode("jpg", "-quality 90")
+  end
+end
diff --git a/app/views/images/_image.html.erb b/app/views/images/_image.html.erb
new file mode 100644
index 0000000..43a3604
--- /dev/null
+++ b/app/views/images/_image.html.erb
@@ -0,0 +1,17 @@
+<picture>
+  <source srcset="<%= image_thumb(@image.image, "2000x2000").url %>"
+          media="(min-width: 960px) and (-webkit-min-device-pixel-ratio: 2),
+                  (min-width: 960px) and (min-resolution: 192dpi)">
+  <source srcset="<%= image_thumb(@image.image, "1000x1000").url %>"
+          media="(min-width: 960px)">
+  <source srcset="<%= image_thumb(@image.image, "1400x1400").url %>"
+          media="(min-width: 640px) and (-webkit-min-device-pixel-ratio: 2),
+                  (min-width: 640px) and (min-resolution: 192dpi)">
+  <source srcset="<%= image_thumb(@image.image, "700x700").url %>"
+          media="(min-width: 640px)">
+  <source srcset="<%= image_thumb(@image.image, "960x960").url %>"
+          media="(-webkit-min-device-pixel-ratio: 2),
+                  (min-resolution: 192dpi)">
+  <source srcset="<%= image_thumb(@image.image, "480x480").url %>">
+  <img src="<%= image_thumb(@image.image, "480x480").url %>" itemprop="image">
+</picture>
diff --git a/app/views/images/show.html.erb b/app/views/images/show.html.erb
index 9c9157c..7d3aa0e 100644
--- a/app/views/images/show.html.erb
+++ b/app/views/images/show.html.erb
@@ -6,7 +6,7 @@
 
 <div class="show-image">
   <div class="image-container">
-    <%= image_tag(@image.image.url) %>
+    <%= render "image", image: @image %>
   </div>
 
   <div class="image-info">