Hello and welcome to RWD Weekly edition #289. This week we're taking a look back over responsive images solutions, tools and articles to ensure if you're serving an image it's the right one for the job.
Coincidentally, I came across this great tweet today which defines why they call it a 'hero image' (take note the the reasoning is a little swear-y). I think that a hero image can set the scene for any web page (see Lynn's example above), but make sure it's relevant and OPTIMISE it before you upload it.
Speaking of Lynn's site, have you clicked and gone to check it out yet? Holy Breakpoint! With a whopping 20 breakpoints (plus the mobile first design) you can step through quite a few layout ideas that Lynn had. Beautifully executed with CSS Grid it is a truly awesome implementation.
| | | Handling images in RWD causes challenges for website performance. Slow page‑loading frustrates users and may prevent them from visiting your site. ImageEngine by ScientiaMobile provides an easy way to accelerate your site via its image‑optimizing, device-aware content delivery network (CDN). | | Articles If you need something technical explained in a way that is super easy to understand then Jake Archibald is often the person to go to. The impressive thing for me is that he has used SVG to paint what you would usually assume to be an image with arrows. Nicely done Jake, nicely done.
So while the title of this post is about utilising the aspect-ration media query the blog post goes into a lot more detail than that. Sure, the media queries are defined by the aspect ration but Chen Hui Jing also uses CSS Grid Layout with Template Areas, Object-Fit for the images and lots of other cool CSS stuff.
A review of the couple of options when using SVG placeholders to improve the perceived performance of your site.
These examples demonstrate the effect different attributes of the <source> attribute have on the selection of the image to display when used inside a <picture>.
This is a wonderfully comprehensive ebook from Addy Osmani. "In 2017, image optimization should be automated. It's easy to forget, best practices change, and content that doesn't go through a build pipeline can easily slip. To automate: Use imagemin or libvips for your build process. Many alternatives exist."
Tutorials In this article we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools HTML provides to help implement them.
The story of Srcset and sizes neatly culminated into a story about peas.
Using the <picture> tag to progressively include webp image types only when supported.
A series of techniques you can use to art direct your images to smaller sizes before you even start compression.
Someone asked me the other day why I still have responsive images as part of my presentation about the future of RWD and the answer is simple. In the current day implementations, not enough people are using a responsive images approach to warrant me taking it out. This is a nice overview of what you should be doing.
Improving your page load times (and overall page weight) on posts that are image heavy
Tools & Resources Nodejs-based tool for optimizing SVG vector graphics files
High-performance image manipulation for web servers. Includes imageflow_server, imageflow_tool, and libimageflow
Fastly Image Optimizer. See our real-time image manipulation service in action
Cloudinary is the media management platform for web and mobile developers. An end-to-end solution for all your image and video needs.
A fast image processing library with low memory needs.
ImageOptim plugin for the Sketch app
Powerful image processing, simple API Optimize, deliver, and cache your entire image library for fast-loading, stress-free websites and apps.
Using peekaboo to lazyload your nice responsive images. View the page source to see the gritty details
Highly performant, light ~0.5kb and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API
For the past few years any image that I save out of photoshop gets put through ImageOptim before it's loaded onto the website. Now they've got a web service available so it can become part of my content creation workflow
Jobs Weebly Engineers enjoy a unique opportunity to work with a wide array of technologies. Engineers are actively encouraged to explore different sectors of the tech stack and delve into specific areas of interest. As a Weebly Engineer you will have the freedom, and be supported by the entire team, to grow professionally.
See you next week for our bumper to bumper responsive images edition.
Cheers,
Justin. | | | |
No comments:
Post a Comment