Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Images in Wordpress

Responsive Images in Wordpress

Learn the reason behind responsive images. What is high density pixilation? How do I deliver a high-res image based on screen resolution? How does Wordpress help and what can I do to make my blog ready for next generation screens.

Adam Smith

July 26, 2015
Tweet

More Decks by Adam Smith

Other Decks in Technology

Transcript

  1. @acodesmith
    IMAGES
    without a plugin
    in Wordpress
    Responsive

    View full-size slide

  2. @acodesmith
    OVERVIEW
    What is Retina or High Density Pixilation?
    Why Is It Important?
    WC3 and the Two Adopted Methods.
    Polyfill and Javascript Requirements.
    Wordpress Media Library Image Settings.
    Updating Tags in Post.
    Fin.

    View full-size slide

  3. @acodesmith
    WHY NO PLUGIN?
    Plugins! Get your Plugins! 10 for $1!

    View full-size slide

  4. @acodesmith
    REALLY UNDERSTAND THE PROBLEM.
    REALLY UNDERSTAND THE SOLUTION.
    “if you know Thy enemies, You know Thy self”
    -Sun Tzu

    View full-size slide

  5. @acodesmith
    SMALLER BOOTSTRAP
    FEWER SECURITY ISSUES
    “WordPress.org can be a blessing or a curse — it is without
    doubt a tool that should be used with caution”
    -woothemes
    YOU ARE NOT RELYING
    ON ANOTHER PROGRAMMERS
    RELEASES CYCLE.

    View full-size slide

  6. @acodesmith
    WHAT IS RETINA?

    HIGH DENSITY PIXILATION? QHD? 4K? 5K?
    The Hardware of Pixels Per Inch (PPI)
    The software of resolution and zoom

    View full-size slide

  7. @acodesmith
    HIGH PIXEL DENSITY
    hardware

    View full-size slide

  8. @acodesmith
    SEEING IS BELIEVING
    A developer can mimic a browser setting to test responsive functionality.

    To see the real benefits a device must be tested in person.
    @acodesmith

    View full-size slide

  9. @acodesmith
    The word ‘retina’ is copyrighted by Apple.
    Let’s stop calling it retina and start calling it high pixel density HPD, QHD, or 4k
    Apple is not the only HPD game in town, but they have pushed technology forward.
    HIGH PIXEL DENSITY FOR THE MASSES
    FROM THE HORSE’S MOUTH - APPLE.COM

    View full-size slide

  10. @acodesmith
    IT’S PHYSICS YA’LL
    The number of pixels needed for clarity is calculated by the
    distance of the device and angle at which the device is being held.
    CELL PHONES REQUIRE THE HIGHEST DENSITY.

    View full-size slide

  11. @acodesmith
    IT’S ONLY GETTING BETTER
    Newer phones companies have touted 500+ ppi!
    w3c.org stats show the growing trend of high resolution devices.
    @acodesmith

    View full-size slide

  12. @acodesmith
    ZOOM IN!
    Software

    View full-size slide

  13. @acodesmith
    If the iPhone6 did not zoom
    into cat-bounce.com the cats
    would render very small.
    The zoom ratio is relative to
    the pixel density.
    1x is stanard.
    2x is high density.
    (nth)x is the future.
    @acodesmith
    In order to utilize their full resolution, high ppi screens render
    the program at a ratio to standard definition.
    1X 2X AND BEYOND

    View full-size slide

  14. @acodesmith
    WHY IS IT
    IMPORTANT?
    Speed, Weight, Performance == UX

    View full-size slide

  15. @acodesmith
    Avoid using images for icons, fonts, gradients or anything else graphical like charts.
    The fewer images the fewer http request. When you must use an image server the correct
    resolution the first time!
    User Experience
    Loading the largest image for all
    devices penalizes the older, usually
    slower, device.
    LOAD TIME
    Mobile devices are tied directly to
    usage. Memory can be limited on
    non high-res older devices.
    PAYLOAD

    View full-size slide

  16. @acodesmith
    WC3 AND THE TWO
    ADOPTED METHODS
    element and the srcset=“” attribute

    View full-size slide

  17. @acodesmith
    The Picture element
    “The HTML element is a container used to specified multiple for a specific contained in it.
    The browser will choose the most suitable source according to the current layout (constraints of the box the image
    will appear in) of the page and the device it will be displayed on (like a normal or hiDPI device).”
    -developer.mozilla.org
    www.html5rocks.com

    View full-size slide

  18. @acodesmith
    The Picture element
    - Better for art direction
    - Easier to read
    - Easier to understand
    PROS
    CONS
    - More coding involved
    - Stange IE fallback hack
    - Minimal support

    View full-size slide

  19. @acodesmith
    The Picture element
    Browser Support
    caniuse.com

    View full-size slide

  20. @acodesmith
    The srcseT and sizes Attributes
    SRCSET
    A list of one or more strings separated by commas indicating a set of image sources for the user agent to use.
    Each string is composed of:
    1. a URL to an image,
    2. optionally, whitespace followed by one of:
    - a width descriptor, that is a positive integer directly followed by 'w'. The width descriptor is divided by the
    source size given in the sizes attribute to calculate the effective pixel density.
    - a pixel density descriptor, that is a positive floating point number directly followed by ‘x'.
    -developer.mozilla.org
    SIZES
    A list of one or more strings separated by commas indicating a set of source sizes.
    Each source size consists of:
    1. a media condition. This must be omitted for the last item.
    2. a source size value.
    Source size values specify the intended display size of the image. User agents use the current source size to select
    one of the sources supplied by the srcset attribute, when those sources are described using width ('w')
    descriptors. The selected source size affects the intrinsic size of the image (the image’s display size if no CSS
    styling is applied). If the srcset attribute is absent, or contains no values with a width descriptor, then the sizes
    attribute has no effect.

    View full-size slide

  21. @acodesmith
    The srcseT and sizes Attributes
    - Browser handles which image to choose.
    - Less coding
    - Native fallback because of the src image.
    - No polyfill and no new tag.
    PROS
    CONS
    - Harder to understand
    - Harder to mix sizes and css layouts together

    View full-size slide

  22. @acodesmith
    The srcseT and sizes Attributes
    Browser Support
    caniuse.com

    View full-size slide

  23. @acodesmith
    POLYFILLS AND JAVASCRIPT
    REQUIREMENTS.
    Regressive Enhancements

    View full-size slide

  24. @acodesmith
    A polyfill, or polyfiller, is a piece of code (or plugin) that provides the
    technology that you, the developer, expect the browser to provide natively.”
    - Remy Sharp
    WITHOUT THE USE OF THE TAG
    JAVASCRIPT IS REQUIRED TO FILL IN THE MISSING INFORMATION.
    - Picturefill
    - Supports srcset and element
    - Built in fallbacks for older browsers
    - RetinaJS
    - Uses javascript to detect pixel density on
    page load.
    - Checks each image for high resolution
    version based on a naming convention.
    - Adaptive Images
    - Using Apache2 / nginx, PHP 5.x and GD
    library.
    - Redirects image request through custom
    PHP script using .htaccess or httpd-conf
    rewrite rules.
    - PHP generates and caches different image
    sizes based on the browser User Agent.

    View full-size slide

  25. @acodesmith
    Polyfill Pros and cons!
    - RetinaJS
    - PRO: Super easy to use, no extra work except
    having high resolution images naming
    convention. 

    Example: myimage2x.jpg
    - CON: Does a $_HEAD request for each
    image to check for 2x suffix!
    - Adaptive Images
    - PRO: Only need to manage the large high
    resolution image. Everything else is done
    automatically.
    - CON: Requires updating to .htaccess and
    image library. Generates images on server,
    increasing server resources.
    - Picturefill
    - PRO: Well support and tested by
    Filament Group.
    - CON: Lot more markup and manual
    image management.

    View full-size slide

  26. @acodesmith
    WORDPRESS MEDIA 

    LIBRARY IMAGE SETTINGS
    Let the system do the work

    View full-size slide

  27. @acodesmith
    Image resize Settings
    NO UPSCALE
    If the image is smaller than the large size the large size will not be created.
    UPLOAD THE BIG GUY
    In order to generate the sizes needed for high density screens the author of the post must
    upload the high resolution image.

    View full-size slide

  28. @acodesmith
    AutoMatic Resizes
    ORIGINAL DIMENSIONS: 580 × 427
    RESIZED
    - coding.jpg
    - coding-300x221.jpg
    - coding-160x160.jpg
    ORIGINAL DIMENSIONS: 2400 × 1800
    RESIZED
    - redpanda.jpg
    - redpanda-1024x768.jpg
    - redpanda-300x225.jpg
    - redpanda-160x160.jpg

    View full-size slide

  29. @acodesmith
    BUT I need more sizes!
    WORDPRESS GOT DA HOOK UP!
    Using Wordpress hooks a user can define a new image size by calling ‘add_image_size’.
    The new image size will be generated like the native sizes set in the media settings.
    HOW DO I FIND A CERTAIN SIZE?
    ‘get_intermediate_image_sizes’ will return an array of all the sizes. Using a Wordpress filter
    called ‘image_size_names_choose’ will set the custom name for your custom sizes.
    Use the hd-screen image by call the ‘get_the_post_thumbnail(‘hd-screen’);‘ function with the
    named size.

    View full-size slide

  30. @acodesmith
    Updating Tags in Post.
    hardwork; Shortcodes; featured image;

    View full-size slide

  31. @acodesmith
    Hardwork!
    Anyone writing a post can manually add all the image sizes to the tag. 


    The process takes time and is hard work for a post with a lot of images, but it requires zero coding. 

    Adding the secretes attribute will not break old browsers! IE 8 will still render the src attribute. :)

    View full-size slide

  32. @acodesmith
    Shortcodes!
    Adding a custom shortcode takes on a few lines of code in your theme’s function.php file.
    The shortcode will generate the secretes attribute based on the attachment id. The attachment id is
    found on the image single view in the media.

    View full-size slide

  33. @acodesmith
    Shortcodes!

    View full-size slide

  34. @acodesmith
    Featured Image!
    The featured image can use the same code, but usually the featured image has a stronger artistic
    value. Due to the nature of the featured image we can use the element when needed.

    View full-size slide

  35. @acodesmith
    Picture Element and Ads
    The picture element also works really well for ads. Depending on the device a user will see a different
    ad size or a completely different image!

    View full-size slide

  36. @acodesmith
    IN CLOSING
    High density marketshare will continue to increase.
    We as developers and designers need to deliver the best experience to ALL our users, not just a certain subset.
    WC3 will continue to refine the solution but we know secretes is here to stay and it works today!
    Javascript will be a requirement for older browsers for certain techniques but it’s not a requirement for just
    using the secretes with the information.
    Wordpress media settings are very powerful and extending the sizes is easy. Start uploading the largest image
    and making Wordpress do the rest.
    Updating tag in the post can be a struggle but shortcodes will help ease the pain.
    The picture element will be your friend when dealing with passionate designers and marketing advertisements.
    Finally, there are many plugins work great. Take the knowledge learned today to choose the right plugin.

    View full-size slide