When we build image cards, sections, and everything in between, we try our best to stay away from background images. Background images have a few issues when it comes to page speed. Background images use the maximum size image as it's not pulled from the media library.
We take the time to create absolutely positioned images that act and feel like background images. These image are pulled from the Media Library. This provides us the benefit of using alt tags that we assign to provide additional SEO benefit. But from a page speed stand point. Images pulled from the Media Library are assigned based on the viewport screen size.
Because we are using oxygens Media Library to call images, the images are pulled based on the screen size. This is huge for mobile devices. Why load the 1200px or 1600px version of an image when all you need is 300px. By using the Media Library in oxygen rather than the media url, we take advantage of the ability to pull images that have sizes that correspond the the viewport.
Mobile Traffic is a large part of web users these days. This percentage is only growing by the year. We need to honor the mobile users by ensuring that we only call the image sizes required for a quality user experience. Most mobile devices are on cellular data and therefore don't have the fast, powerful internet that we expect from our home and office routers. By calling smaller images we reduce the load time on page and therefore keep users engaged for longer.
Let's make sure we use every trick in the book for our clients. Keeping users on the page and engaged can only happen if they don't leave because our site won't load. Page speed increases are a key to keeping our ranking up on google. Let's face it, we don't need to our run the bear, just the people in the race next to us. If we can do small things to keep up above our competitors, we will have an edge on our competition.
