This content originally appeared on Scotch.io RSS Feed and was authored by William Imoh
Even though a picture is worth a thousand words, as the English adage goes, it costs a pretty penny to store and deliver images online. Hence the common goal of many modern web-development tools to minimize the impact of images and other media assets on site performance.
This post, part 1 of a three-part series, shows you how to build an optimized webpage by leveraging gatsby-transformer-cloudinary plugin and gatsby-image, ultimately sourcing and transforming responsive remote images in a GatsbyJS project.
Here are the steps:
- Install GatsbyJS and its dependencies.
- Set up the project configuration and layout.
- Handle single- or multiple-image queries from Cloudinary through gatsby-transformer-cloudinary.
- Optimize the sourced images with Cloudinary and lazy-load them with gatsby-image.
- Transform the images with Cloudinary.
- Design a responsive layout and typography with Chakra UI.
Normally with gatsby-
This content originally appeared on Scotch.io RSS Feed and was authored by William Imoh
William Imoh | Sciencx (2020-05-24T18:13:19+00:00) Serving Remote Optimized Images w/ gatsby-image. Retrieved from https://www.scien.cx/2020/05/24/serving-remote-optimized-images-w-gatsby-image/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.