diff --git a/app/models/photo.rb b/app/models/photo.rb
index 02406d0..c835881 100644
--- a/app/models/photo.rb
+++ b/app/models/photo.rb
@@ -8,7 +8,13 @@ class Photo < ActiveRecord::Base
                                          :size8 => "224x224#",
                                          :size5 => "140x140#",
                                          :size3 => "84x84#",
-                                         :size2 => "56x56#" },
+                                         :size2 => "56x56#",
+                                         :size17x2 => "952x952#",
+                                         :size11x2 => "616x616#",
+                                         :size8x2 => "448x448#",
+                                         :size5x2 => "280x280#",
+                                         :size3x2 => "168x168#",
+                                         :size2x2 => "112x112#" },
                             :storage => :s3,
                             :s3_credentials => "#{Rails.root}/config/s3.yml",
                             :s3_protocol => "https",
diff --git a/app/views/categories/index.html.erb b/app/views/categories/index.html.erb
index eb9d35b..a2b92d6 100644
--- a/app/views/categories/index.html.erb
+++ b/app/views/categories/index.html.erb
@@ -1,3 +1,5 @@
+<%= render 'shared/photo_styles', photos: @photos, size: 11 %>
+
 <% content_for :navigation do %>
   <div class="sg-5 page-links">
     <% if @categories.previous_page -%>
@@ -14,7 +16,7 @@
 <% @num_blank = 4 - @categories.length -%>
 
 <% @photos.each do |photo| %>
-  <div class="sg-11 photo" style="background: url('<%= photo.photo.url(:size11) %>')">
+  <div class="sg-11 photo" id="<%= photo.name.parameterize %>">
     <%= link_to_photo photo %>
   </div>
 <% end %>
diff --git a/app/views/home/index.html.erb b/app/views/home/index.html.erb
index 2617ae4..7489207 100644
--- a/app/views/home/index.html.erb
+++ b/app/views/home/index.html.erb
@@ -1,9 +1,11 @@
+<%= render 'shared/photo_styles', photos: [@photo], size: 17 %>
+
 <% content_for :navigation do %>
   <%= render 'shared/main_nav' %>
 <% end %>
 
 <% if @photo %>
-  <div class="sg-17 photo" style="background: url('<%= @photo.photo.url(:size17) %>')">
+  <div class="sg-17 photo" id="<%= @photo.name.parameterize %>">
     <%= link_to_photo @photo %>
   </div>
 <% end %>
diff --git a/app/views/photos/index.html.erb b/app/views/photos/index.html.erb
index 4687b50..da56767 100644
--- a/app/views/photos/index.html.erb
+++ b/app/views/photos/index.html.erb
@@ -1,3 +1,5 @@
+<%= render 'shared/photo_styles', photos: @photos, size: 5 %>
+
 <% content_for :navigation do %>
   <div class="sg-5 page-links">
     <% if @photos.previous_page -%>
@@ -24,7 +26,7 @@
 <% @num_blank = 11 - @photos.length -%>
 
 <% @photos.each do |photo| %>
-  <div class="sg-5 photo" style="background: url('<%= photo.photo.url(:size5) %>')">
+  <div class="sg-5 photo" id="<%= photo.name.parameterize %>">
     <%= link_to_photo photo %>
   </div>
 <% end %>
diff --git a/app/views/shared/_photo_styles.html.erb b/app/views/shared/_photo_styles.html.erb
new file mode 100644
index 0000000..ecfdd9b
--- /dev/null
+++ b/app/views/shared/_photo_styles.html.erb
@@ -0,0 +1,18 @@
+<style type="text/css">
+  <% photos.each do |photo| %>
+    #<%= photo.name.parameterize %>.sg-<%= size %> {
+      background: url(<%= photo.photo.url(:"size#{size}") %>);
+    }
+  <% end %>
+  @media
+  only screen and (-webkit-min-device-pixel-ratio: 1.5),
+  only screen and (min--moz-device-pixel-ratio: 1.5),
+  only screen and (min-device-pixel-ratio: 1.5) {
+    <% photos.each do |photo| %>
+      #<%= photo.name.parameterize %>.sg-<%= size %> {
+        background: url(<%= photo.photo.url(:"size#{size}x2") %>);
+        background-size: 100%;
+      }
+    <% end %>
+  }
+</style>