Great overview. On dev.to we load different formats based on the situation and browser. Cloudinary handles a lot of the heavy lifting if our code is correct, which is really nice.
Because Chrome supports WebP and it's also our most popular browser in terms of traffic, most of our image traffic is served as WebP.
The subject is pretty poorly understood so this article goes a long long way.
I work as a staff software engineer at a med tec company. We are mainly programming in C++ but my background is also a functional one (Haskell, OCaml).
In the past I did research in program analysis.
I really like SVG , they can be easily responsive, not just because "scalable" is in the name, they're good for performance and accessibility and when mixing it with JavaScript , we can do a lot of amazing things, I mean look at the projects with d3.js. I like PNG for the transparency wen I need it, and jpeg when I need to make the website faster , of course without loosing a remarkable losss of quality.
This is a cool article Sarah ,as always β₯
You can use archer-svgs to load svg async and cache it in localStorage, when you reuse svg without http request!Remove svgs from your js-bunilde and Thin your js-bundle forever!(eg: Dont reload 100kb svg bundle only for 1kb svg update!)
Full stack developer with a focus on front-end development and a strong skillset in JavaScript technologies, including React and Node.js. Proficient in building modern and responsive web applications.
Thank you for the great post. I've never thought about it before, but after your post I am convinced that I will in the future. It was always like this for me: "Hmmmm.... What should I choose?... PNG or JPEG... Let it be PNG, WHO CARES!" :) Thanks.
You can use archer-svgs to load svg async and cache it in localStorage, when you reuse svg without http request!Remove svgs from your js-bunilde and Thin your js-bundle forever!(eg: Dont reload 100kb svg bundle only for 1kb svg update!)
I am a self taught developer that works best when floating in between design and engineering teams. I enjoy sharing what I know via short instructional screencasts and the occasional written post.
Japanese translator turned software engineer. I work mostly with Ruby and Rails. Currently a post-bacc computer science student @ University of Colorado.
Location
Connecticut
Education
University of Colorado, Ohio State University, IUC (for Japanese)
Great overview. On dev.to we load different formats based on the situation and browser. Cloudinary handles a lot of the heavy lifting if our code is correct, which is really nice.
Because Chrome supports WebP and it's also our most popular browser in terms of traffic, most of our image traffic is served as WebP.
The subject is pretty poorly understood so this article goes a long long way.
Thanks Ben for sharing this. Cloudinary is great for image management. I'm amazed at what can be done with it. Thank you for reading. :)
Do you still use gif?
I really like SVG , they can be easily responsive, not just because "scalable" is in the name, they're good for performance and accessibility and when mixing it with JavaScript , we can do a lot of amazing things, I mean look at the projects with d3.js. I like PNG for the transparency wen I need it, and jpeg when I need to make the website faster , of course without loosing a remarkable losss of quality.
This is a cool article Sarah ,as always β₯
Thanks for sharing this. Others can learn from the way you use it. Thank you. :)
You can use archer-svgs to load svg async and cache it in localStorage, when you reuse svg without http request!Remove svgs from your js-bunilde and Thin your js-bundle forever!(eg: Dont reload 100kb svg bundle only for 1kb svg update!)
Thank you for the great post. I've never thought about it before, but after your post I am convinced that I will in the future. It was always like this for me: "Hmmmm.... What should I choose?... PNG or JPEG... Let it be PNG, WHO CARES!" :) Thanks.
I'm glad you like itππ
You can use archer-svgs to load svg async and cache it in localStorage, when you reuse svg without http request!Remove svgs from your js-bunilde and Thin your js-bundle forever!(eg: Dont reload 100kb svg bundle only for 1kb svg update!)
This is great!
Thanks for the article. Please, what's the name of the course you took on responsive images?
Sorry for my really late reply. It's a free course on Udacity called Responsive Images.
No worries, thanks.
Thanks for this article! I didn't know much about the image types besides transparency. Bookmarked :)
I'm glad you like itππ
Great one Chima but "The PNG is an image format designed for the web..., It comes in two formats: PNG-8 and PNG-24"; what of PNG-32