recentpopularlog in

justinavery : 289   26

<picture>: The Picture element - HTML | MDN
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>.
article  tutorial  289  newslettered 
december 2017 by justinavery
Responsive images - Learn web development | MDN
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.
tutorial  289  newslettered 
december 2017 by justinavery
svg/svgo
Nodejs-based tool for optimizing SVG vector graphics files
tools  289  newslettered 
december 2017 by justinavery
imazen/imageflow: High-performance image manipulation for web servers. Includes imageflow_server, imageflow_tool, and libimageflow
High-performance image manipulation for web servers. Includes imageflow_server, imageflow_tool, and libimageflow
tools  289  newslettered 
december 2017 by justinavery
Image Optimization Sandbox
Fastly Image Optimizer. See our real-time image manipulation service in action
tools  289  newslettered 
december 2017 by justinavery
imgix • Real-time image processing and image CDN
Powerful image processing, simple API Optimize, deliver, and cache your entire image library for fast-loading, stress-free websites and apps
289  newslettered 
december 2017 by justinavery
Cloudinary - Cloud image and video service, upload, storage & CDN
Cloudinary is the media management platform for web and mobile developers. An end-to-end solution for all your image and video needs.
tools  289  newslettered 
december 2017 by justinavery
libvips
build tools

A fast image processing library with low memory needs.
tools  289  newslettered 
december 2017 by justinavery
ImageOptim/Sketch-plugin
ImageOptim plugin for the Sketch app
tools  289  newslettered 
december 2017 by justinavery
Adding webp images progressively | Responsive Web Design
Using the <picture> tag to progressively include webp image types only when supported.
tutorial  289  newslettered 
december 2017 by justinavery
Reducing image sizes
A series of techniques you can use to art direct your images to smaller sizes before you even start compression.
tutorial  289  newslettered 
december 2017 by justinavery
Watching your (image) weight
Improving your page load times (and overall page weight) on posts that are image heavy.
tutorial  289  newslettered 
december 2017 by justinavery
Peekaboo responsive image lazyloading
Using peekaboo to lazyload your nice responsive images. View the page source to see the gritty details.
plugin  images  289  newslettered 
november 2017 by justinavery
Using SVG as placeholders — More Image Loading Techniques
A review of the couple of options when using SVG placeholders to improve the perceived performance of your site.
article  performance  svg  newslettered  284  289 
november 2017 by justinavery
Practical uses for the aspect-ratio media query
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
article  news  newslettered  283  289 
november 2017 by justinavery
Essential Image Optimization
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."
headline  adobemax17  news  newslettered  add-site  279  289 
october 2017 by justinavery
Fundamentals of Responsive Images
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.
tutorial  responsive  images  adobemax17  news  newslettered  279  289 
october 2017 by justinavery
Lozad.js | lozad.js
Highly performant, light ~0.5kb and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API
add-site  plugin  newslettered  276  289 
september 2017 by justinavery
ImageOptim HTTP API for optimization on web servers
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
rwd247  tool  image  performance  Australiad  289  newslettered 
february 2017 by justinavery
The anatomy of responsive images
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.
article  news  responsive-images  newslettered  174  289 
september 2015 by justinavery

Copy this bookmark:





to read