Tag: images

Steve Day presenting on Retina-Ready WordPress

Retina-Ready WordPress: Feb 2015 meetup

We talked about Retina-Ready WordPress at our Feb. 19, 2015 meetup. Below are the notes.

Steve Day presenting on Retina-Ready WordPress
Steve Day presenting on Retina-Ready WordPress

High Density Images

Presented by Steve Day

Jetpack Photon and WP Retina 2x

Presented by Chad Warner

Jetpack Photon

What it is

  • Jetpack module
  • CDN for images
  • Runs on WordPress.com infrastructure

How it works

  • “[W]e just grab the best version that we can find, and manipulate that single source image for whatever size, crop, or filter happens to be requested at the time. That lets us do cool things, like upscaling for Retina displays, as well.” George Stephanis, Jetpack dev
  • “There’s a script we load with photon that will detect if your user is on a Retina display, and then swap out images for the higher-resolution versions.” George Stephanis, Jetpack dev
  • Photon filters content but doesn’t change the info in the database.
  • Photon currently only acts on images in posts and pages, as well as featured images (post thumbnails). Also works for CPTs.
  • Photon will apply to old posts and new ones alike and can be turned on or off easily.
  • Photon looks at the img element’s width and height attributes and then serves an image resized to those dimensions or to the width of the containing element (whichever is smaller).

How to use

Enable the Photon module in your Jetpack settings.

WP Retina 2x

  • Tutorial
  • Creates the image files required by Retina (High DPI) devices and displays them to your visitors accordingly.
  • Supports 4 different methods to serve the images to your visitors.

How to use 

  1. Make a full backup (in case images are damaged)
  2. Settings > Retina
    1. Basics
      1. Disabled Sizes: select those that are not used by theme (often thumbnail, possibly unused theme-specific sizes)
      2. Enable Auto Generate
  3. Media > Retina > Generate

X-Icon Editor: favicon generator

Generates single favicon.ico containing 64×64, 32×32, 24×24, and 16×16 px favicon.