Get a quote.

tell us what you are looking to achieve & we will design a strategy to reach your goals. rather speak to someone? call 0800 222 9300.

Submit.

We'll do our best to respond within 2 working hours.

If you need a quicker response please call us on 0800 222 9300.

clicky / #Magazine.

call 0800 222 9300 lines open now until 5pm today

Get a quote.

news / 3 years ago

Retina graphics using Retina.js.

As Apple continue to bring out new devices with the double pixel display known as "Retina" displays it is encouraging more and more web designers to start creating retina versions ...

38 views / 1 reading right now

Author.

Oliver Yeates

[CEO & Founder]

Published.

16/01/2013 @ 18:18pm

A great little script which we have been using is Retina.js.  Retina.js is a simple piece of JavaScript which checks for double sized pixel versions of each of your graphics as they load.

You can download it here, you then need to call it in the header of your website like this:

<script type=”text/javascript” src=”http://www.yourwebsite.com/js/retina.js”></script>

The script initially allows the standard image to load (in the interests of speed) before searching for the double pixel version and then subtly replacing the standard image with the retina version.

The process is relatively simple but it will require you to recreate your images in a double pixel size first before saving a double pixel version with “@2x” appended to the end of the file name and then saving the standard image.  (example: a logo saved as “logo.png” would need the double sized version saving as “logo@2x.png” and saved in the same directory as the standard image)

We are going through our website currently updating some of the graphics such as this one:

Standard version: (https://www.clicky.co.uk/wp-content/uploads/web-trends-2013.png)

Double pixel version: (https://www.clicky.co.uk/wp-content/uploads/web-trends-2013@2x.png)

The results are great but the process is incredibly time consuming, especially if you have a lot of images.

The main thing to consider is all future images are best started on a double pixel width canvas before you start to build the graphic.

If you have a Retina display check out our home page to see the results.

Links: Retina.js 

About the Author | Google

#more

featured / 4 days ago

Darwin Escapes wins Website of the Year at the Prolific North Awards 2016.

just for fun / 5 days ago

5 sites we love right now.

news / 6 days ago

YouTube introduces ‘snackable’ Bumper ads.

insight / 7 days ago

Dedicated vs. Shared Hosting Solution | Which Server Setup is Right for you?.

insight / 1 week ago

Smart Goals in AdWords.

news / 1 week ago

Google’ s parent Alphabet report 17% rise in quarterly revenue.

company / 2 weeks ago

Samantha Joins Clicky.

news / 2 weeks ago

Promoted Pins Available in the UK.

company / 2 weeks ago

David joins Clicky.

featured / 2 weeks ago

Free guide: How to get started with programmatic advertising.

news / 2 weeks ago

Google claim “YouTube ads are more effective than TV ads”.

news / 2 weeks ago

New Website for Pink Parcel.

insight / 2 weeks ago

ApplePay coming to browsers in time for Christmas?.

insight / 2 weeks ago

Euro 2016 & YouTube a match made in football heaven.

just for fun / 3 weeks ago

The Emoji miscommunication problem.

View more.

New Service

Spotify Ads are here.

Spotify is the world’s largest dedicated music streaming service with over 60 million users streaming an average of around 2.5 hours of music a day in any of 58 countries/markets.

learn more