To make it even easier, we used a Wordpress plugin called Fly Dynamic Image Resizer to dynamically create image sizes on the fly. Because we need a lot of different versions of the image, it saves us a lot of time to let Wordpress create these versions for us using the add_image_size() function. Super clever! Getting into it!īeforehand, it's good to note that was build using Wordpress. It now has the perfect set of ammunition to fire the right image at the user. The browser combines this information with the stuff it already knows, like screen width, pixel density, device type, slow bandwidth, etc. What the rendered width of the image will be at certain breakpoints ( sizes).Which image sources, or files, your site has available ( srcset).What these attributes do is tell the browser two necessary things: Srcset and sizes are two powerful attributes of the tag. Since I'm just changing resolutions, I found out srcset and sizes where the best way to get the job done. To make sure all these images won't affect the time it takes the page to load too much, implementing responsive images was essential. The design of the website is (of course) very visual. FEM FEM is an online magazine for young women who want to develop themselves in terms of career, health, style and happiness. Here's how I solved this problem for the website, which we launched mid september. All of these were quite basal and didn't really cover a situation like I had with a lot of different breakpoints and image variations. I've been reading quite a few blog posts for good examples and best practices on how to efficiently scale my images. Instead I will use one of our latest projects as a real-world example to explain how I implemented responsive images in practice. I'm not gonna bore you with a long story about the theory behind responsive images, nor am I going to talk about the potential profits for the page speed. I'm going to talk about responsive images. And I don't necessarily mean 'Save for web' when exporting your jpeg's. But the big thing - literally - to gain those vital Google PageSpeed points, is to optimize your images. Of course, the response time of your web server plays a major role as well as browser caching and minifying source files and scripts. If your page takes more than average to load, visitors will bounce without any regrets. You can get there via CSS (and not worry about what’s declared in the HTML) like this: video ).resize() That’s sorta what became FitVids.jsĮxcept rather than deal with all that resizing business, FitVids.js loops over all the videos and adds the aspect-ratio enabling HTML wrapper and CSS necessary.The web is all about speed nowadays. It’s important that you remove the height declaration when you do this so that the aspect ratio of the video is maintained as it grows and shrinks, lest you get awkward “bars” to fill the empty space (unlike images, the actual video maintains it’s aspect ratio regardless of the size of the element). Well, yep, you can! If you are using standard HTML5 video, that will make the video fit the width of the container. Simple and contrived, but still ridiculous and embarassing. What if the parent container for that video shrinks narrower than the declared 400px? It will bust out and probably look ridiculous and embarrassing. Guess what? Declaring static widths isn’t a good idea in fluid width environments. In each of these video-embedding scenarios, it is very common for a static width and height to be declared. Let’s cover how to make them all fluid width while maintaining an appropriate height based on their aspect ratio. You might be using YouTube, Vimeo, or some other video provider that provides code to display videos. You might be self-hosting the video and presenting it via the HTML5 tag. There are lots of ways in which video can be displayed on your site. IN A WORLD of responsive and fluid layouts on the web, ONE MEDIA TYPE stands in the way of perfect harmony: video.
0 Comments
Leave a Reply. |