Retina-Ready WordPress: Feb 2015 meetup
We talked about Retina-Ready WordPress at our Feb. 19, 2015 meetup. Below are the notes.
High Density Images
Presented by Steve Day
- Steve’s post
- Retina Images on GitHub
- Use Real Favicon Generator to generate favicons for a variety of platforms.
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
- Make a full backup (in case images are damaged)
- Settings > Retina
- Basics
- Disabled Sizes: select those that are not used by theme (often thumbnail, possibly unused theme-specific sizes)
- Enable Auto Generate
- Basics
- Media > Retina > Generate
X-Icon Editor: favicon generator
Generates single favicon.ico containing 64×64, 32×32, 24×24, and 16×16 px favicon.
