In our previous post we looked at the benefits of resizing images and optimizing them for web development.
For that example, we used Google Cloud Storage to store images, but there are more ways to access images using this extension.
This article explores how to access and optimize images from various remote URLs.
The source code for our examples is here. Feel free to clone and learn from the included samples.
Setting up
For this example, we are going to be using web-based technology. This includes:
- Astro.build (https://astro.build/)
- Typescript (Astro Default)
- React (v18.2.0)
- TailwindCss (v3.2.4)
You can use this extension with your preferred technologies too.
Why remote images?
Images can often appear from many sources, from a well-known CMS (WordPress, Shopify) to a custom CMS or even files that have just been emailed over and held on a classic server. They quite simply can come from anywhere!
With the Invertase Firebase Image Extension, you can now ensure that your images are equally optimized from any/multiple sources on the same website.
Installation
Let’s look back at our example from my recent travels; I’d like to bypass now the step of saving my pictures into GCS. Instead, we’re going to pull direct from multiple sources:
- Unsplash (https://unsplash.com/)
- Pexels (https://www.pexels.com/)
- Burst (https://burst.shopify.com/)
Let’s clone our existing images.tsx component and create a new file called `remoteImages.tsx`.
Next, import into the `index.astro` file and add the component to the layout.
/** index.astro */
import RemoteImages from "../components/remoteImages.jsx";/** index.astro */
<RemoteImages/>
<!-- <Images /> -->Next, we will be required to modify the getUrl functions we had used as a wrapper for the URL builder. Modify the function to look like the following:
const getUrl = (url: string, width: number, height: number) => {
const URL = `https://${PROJECT_LOCATION}-${PROJECT_ID}.cloudfunctions.net/ext-image-processing-api-handler/process?operations=`;
const options = builder()
.input({
type: "url",
url,
})
.resize({ width, height })
.output({ webp: { quality: 50 } })
.toEncodedString();
return `${URL}${options}`;
};Note that this has a different input type to the gcs version:
type: Is now “url”, meaning we expect a specific URL as the input.
url: This is the actual URL of the image we will transform.
Adding a remote image
So, now we have a function for adding a remote image, we will need to add the image to our list of images to show off! Let’s add that now…
{
id: 1,
title: "River Restaurant",
url: "https://images.pexels.com/photos/2901215/pexels-photo-2901215.jpeg",
},The properties have been adapted to match our new requirements for the Image Extension API.
And there we have it; an optimized image pulled from a remote source.
Let’s add some more:
{
id: 2,
title: "Mountain Lake",
url: "https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1",
source: "Unsplash",
},
{
id: 3,
title: "Hillside Beach",
url: "https://burst.shopifycdn.com/photos/straw-parasols-on-a-sandy-beach.jpg?width=925&format=pjpg&exif=1&iptc=1",
source: "Burst",
},Explore the network tab, and we will see three images, each pulled from a unique resource:
Similar to the GCS images in the previous article, we have now downloaded an image from a source and optimized it in real-time.
Summary
Following this article, we have optimized images for multiple devices and platforms. In addition, we can now not only source these images through GC, we can also skip our storage and optimize images direct from multiple sources!
Feel free to try different sizes, quality image types, and much more to see what you can achieve with this extension.
Once again, check out our samples for more inspiration and guidelines on using this Firebase Extension.
Stay tuned for more updates and exciting news that we will share in the future. Follow us on Invertase Twitter, Linkedin, and Youtube, and subscribe to our monthly newsletter to stay up-to-date. You may also join our Discord to have an instant conversation with us.