---
title: Super Easy Responsive Images with Viewport Cookies
date: 2012-06-12T22:24:10+00:00
modified: 2012-06-12T22:48:31+00:00
image:: https://kaspars.net/wp-content/uploads/2012/06/viewport-cookies-adaptive-images-wordpress.jpg
permalink: https://kaspars.net/blog/adaptive-images-viewport-cookies
post_type: post
author:
name: Kaspars
avatar: https://reverse.kaspars.net/gravatar/avatar/92bfcd3a8c3a21a033a6484d32c25a40b113ec6891f674336081513d5c98ef76?s=96&d=mm&r=g
post_tag:
- How to
- Nginx
- Snippet
category:
- Web Performance
- WordPress
---
# Super Easy Responsive Images with Viewport Cookies
Here is the idea behind the **Viewport Cookies**:
1. first, detect the width of the device viewport using javascript and store its value in **a `viewport` cookie** from within the ``;
2. use that cookie in the backend (with Nginx `image_filter` or a PHP script) to resize, cache and serve images of appropriate size for that particular viewport.
The great thing about this method is that it doesn’t require any modifications to the image tags and the javascript is kept to the bare minimum.
### Part 1: Store the Screen Width in a Cookie Using Javascript
Javascript is the only thing that can detect parameters such as browser window dimensions and device screen size, so we have to use javascript until (and if) browsers start setting this data in HTTP request headers.
Cookies, however, are the only dynamic thing that can be passed together with the request to the backend without changing the request URL. So we use them both to first choose an optimal reduced image width and then store it into a cookie called `viewport` which the browser will send along **all the subsequent requests**, including for the images.
Keep in mind that cookies are set per domain name and in case you’re of using a Content Delivery Nework for serving static assets you will have to set the `viewport` cookie **from the CDN**.
```
```
You can use whatever logic and levels of adaptiveness you want, but keep in mind that not setting a viewport cookie for larger screens will save you cache hits.
Here is a simple filter for WordPress that will put it into your theme’s ``:
```
add_action( 'wp_head', 'add_viewport_cookie_js' );
function add_viewport_cookie_js() {
?>