‘Responsive Images’ Videos

  • Kevin Hoffman: Optimizing Responsive Images in WordPress

    Kevin Hoffman: Optimizing Responsive Images in WordPress

    WordCamp Boston 2018Speaker: Kevin Hoffman

    January 10, 2019 — While the benefits of image optimization are well known, in practice, it is one of the most misunderstood topics in all of WordPress. With the addition of responsive images and an influx of new solutions in the marketplace, the topic of image optimization deserves an updated take on best practices for the modern responsive landscape.

    This talk begins with a step-by-step analysis of how WordPress processes images by default. With this baseline understanding established, we will review common misconceptions about image optimization techniques that sometimes do more harm than good. One such example is the practice of optimizing images *before* upload, which actually has no effect on the generated image sizes.

    By exploring a combination of best practices and common snafus, the audience will take away the key concepts necessary to optimize responsive images in a manner that works with WordPress, not against it.

  • Милен Петрински – Гонзо: Отзивчиви изображения и WordPress

    Милен Петрински – Гонзо: Отзивчиви изображения и WordPress

    WordCamp Sofia 2017Speaker: Милен Петрински – Гонзо

    November 16, 2017 — Когато създаваме теми за WordPress грижата за оптималното зареждане на изображенията някак остава на заден план. А и WordPress нали вече поддържа отзивчиви изображения? Всъщност не е точно така. Най-важната част от осигуряването на правилно и оптимално зареждане на изображения се пада на разработчиците на теми и всъщност никак не е трудно!

    Presentation Slides »

  • Sharon France: Honey - You’re Not Even Responsive

    Sharon France: Honey – You’re Not Even Responsive

    WordCamp Sydney 2016Speaker: Sharon France

    February 9, 2017 — How I learned to stop worrying and love WordPress: a beginner’s tale

    Three years ago I decided to wrest back control of my website and what better way to do that than to build a WordPress site?

    So I did that, with a little help from a coding friend, and there it has sat, like a lump ever since: not updated, not doing anything, definitely not responsive (does it need a shot of adrenaline?) and definitely my own personal testament to fear of both web design and the internet’s unceasing affair with change (shudder).

    But today that changes. Today I commit to resuscitating my website and on the way I shall do my best to chronicle the journey: the good, the bad and the ugly… hopefully there is not so much ugly!

    Presentation Slides »

  • Kevin Hoffman: Demystifying Responsive Images in WordPress

    Kevin Hoffman: Demystifying Responsive Images in WordPress

    WordCamp Pittsburgh 2016Speaker: Kevin Hoffman

    October 8, 2016 — Whether you are an advanced WordPress theme developer or simply editing content from the dashboard, there is one question that everyone asks at one point or another:

    What size should my images be?

    This already complex question takes on a whole new dynamic with the recent addition of responsive images in WordPress 4.4. While the basic concept of responsive images may be easy to grasp, a true understanding of the inner workings is far more elusive. In this talk, we will demystify responsive images and learn how to strike a proper balance between image performance and image quality within any context.

    Presentation Slides »

  • Ethan Butler: Using the REST API for Better Responsive Images

    Ethan Butler: Using the REST API for Better Responsive Images

    WordCamp Asheville 2016Speaker: Ethan Butler

    August 19, 2016 — WordPress 4.4 was a milestone release, with the addition of both responsive images and a REST API. In this session, I’ll demonstrate API endpoints and JavaScript I’ve written for using the REST API and AJAX to load responsive background images into sites.

    This technique has several advantages: first, using the background-image property is more semantic and powerful than traditional s. Second, you can have a dynamic background on an otherwise cached page. Third, you have more information available about how your user is viewing your site than just their viewport width.

    The session will include three short demos: First, a basic demonstration of the technique. Second, using array_rand on the server to pull in a random background image. And as a finale, using the ambient light API in OSX Firefox to load in “day time” and “night time” images.

    Take aways:

    The addition of responsive images into the WordPress core was powerful, but it doesn’t solve every problem and isn’t always semantic.
    Using AJAX to load images has many benefits because you can know more about the client.
    The WordPress REST API can be used for more than you realize.

    Presentation Slides »

  • Bernhard Kau: Better Themes with Scalable Vector Graphics (SVG)

    Bernhard Kau: Better Themes with Scalable Vector Graphics (SVG)

    WordCamp Nuremberg 2016Speaker: Bernhard Kau

    April 21, 2016 — A responsive design has become a standard of modern WordPress theme. But not only the content of a website has to be optimized for the mobile screen. The theme should also provide high resolution images and icons. Using SVG images here is usually the best way to accomplish this goal. This session will give a brief overview on how you can utilize Scalable Vector Graphics.

    Presentation Slides »

  • Piero Bellomo: Immagini responsive – Oltre il max-width: 100%

    Piero Bellomo: Immagini responsive – Oltre il max-width: 100%

    WordPress Meetup TorinoSpeaker: Piero Bellomo

    April 13, 2016 — Viste una serie di richieste sempre più complesse da parte dei clienti molto esigenti, esamineremo i metodi più efficaci di come renderizzare le immagini responsive, e impareremo a incorporarle — fin dall’inizio — nel flusso di lavoro di WordPress.

    Presentation Slides »

  • Piero Bellomo: Responsive Images – Beyond max-width: 100%

    Piero Bellomo: Responsive Images – Beyond max-width: 100%

    WordCamp Torino 2016Speaker: Piero Bellomo

    April 5, 2016 — Through a series of increasingly complex requests from an imaginary, albeit very demanding client, we will review the most effective methods of rendering truly responsive images, and learn how to embed them — right from the start — in your WordPress workflow. You will walk away safe in the knowledge you own all the right tools to achieve bulletproof responsive art-directed seo-friendly lazy-loading images. (phew!)

    Presentation Slides »

  • Felix Ortega: Imágenes responsive en WordPress

    Felix Ortega: Imágenes responsive en WordPress

    WordCamp Cantabria 2015Speaker: Felix Ortega

    December 7, 2015 — Imágenes responsive en WordPress

  • Adam Smith: Responsive Images Without a Plugin

    Adam Smith: Responsive Images Without a Plugin

    WordCamp Asheville 2015Speaker: Adam Smith

    September 9, 2015 — Retina screens will soon become the new standard for resolution but not all users need to be served a giant image. The giant image looks crisp on a retina screen but it also creates bloated page load. In the talk we dive into how to support responsive images without using a heavy WordPress plugin. We go step by step, breaking down how the picture element works, browser support fallbacks, native wordpress image resizing and serving the correct image based on viewports and pixel density. We finish up with the future of serving images based on new media queries.

    Presentation Slides »