Ottimizzare e ridimensionare le immagini in AWS S3 in tempo reale con ImageKit

Condividi questo articolo:


Collega il tuo bucket AWS S3, privato o pubblico, direttamente a ImageKit e inizia a fornire immagini ottimizzate e trasformate in tempo reale con pochi minuti di sforzo.

AWS Simple Storage Service o S3 è uno degli storage basati su cloud più utilizzati in tutto il mondo. Fornisce un’archiviazione infinita con un alto uptime, accesso immediato e scalabilità in base alle vostre esigenze.

Un uso comune dello storage AWS S3 è quello di memorizzare file di grandi dimensioni, come le immagini. Le immagini sono spesso enormi e devono essere conservate per tempi molto lunghi. Memorizzarle in S3 ti toglie il dolore di gestire lo storage da solo o di aggiungere continuamente spazio sul tuo server.

Caratteristiche mancanti per l’ottimizzazione delle immagini nativamente su AWS S3

Mentre S3 è eccellente per l’archiviazione delle immagini, non fornisce le seguenti caratteristiche, che sono ormai fondamentali per ogni sito web che voglia seriamente offrire un’esperienza eccezionale ai suoi utenti –

leggi anche:

Google Cloud Platform : guida ai servizi e recensione

  • La capacità di poter comprimere le immagini
  • La capacità di convertire le immagini in formati più nuovi e migliori come WebP
  • La capacità di ridimensionare e ritagliare le immagini per l’uso in diverse pagine della nostra applicazione
  • E forse un requisito più avanzato potrebbe essere quello di essere in grado di queste e più avanzate manipolazioni come il watermarking delle immagini, la creazione di miniature intelligenti in tempo reale senza dover scrivere o mantenere soluzioni complesse per questo. Il più delle volte, la gestione delle immagini non è il vostro core business, e non volete spenderci molto tempo.

Cos’è ImageKit e come ottimizza le immagini in S3?

ImageKit.io è un CDN di immagini basato sul cloud con funzioni di ottimizzazione e trasformazione delle immagini in tempo reale che ti aiutano a fornire immagini perfettamente ottimizzate su tutti i dispositivi.

È integrato con AWS CloudFront per la consegna delle immagini (e anche di altri file non immagine). Oltre 15.000 sviluppatori e aziende servono già miliardi di immagini ottimizzate tramite ImageKit e il suo CDN ogni giorno. Quindi, non è necessario pagare per un CDN separato se si utilizza ImageKit.

Potete collegare il vostro bucket AWS S3 a ImageKit e iniziare a fornire immagini ottimizzate in pochi minuti. Senza scrivere una sola riga di codice.

Ottimizzazione delle immagini su S3 + ImageKit – Come funziona?

Vediamo come viene gestita una richiesta quando si ottimizzano le immagini S3 tramite ImageKit.

Quando una richiesta arriva a ImageKit, l’immagine viene consegnata dalla cache del CDN.
Se l’immagine non è presente nella cache del CDN, ImageKit cerca di fornire l’immagine dalla sua cache interna. Di solito, le immagini che vengono trasformate una volta rimangono nella cache di ImageKit per un po’ di tempo.
Se l’immagine non si trova anche in questa cache interna, allora ImageKit prende l’immagine dal vostro bucket AWS S3 collegato a ImageKit, la ottimizza, e la trasforma in tempo reale e la invia di nuovo all’utente.
Dopo questa prima elaborazione che richiede in media circa 200ms, l’immagine viene memorizzata nella cache interna di CDN e ImageKit, portando il tempo di risposta per quasi il 98- delle richieste di immagini a meno di 50ms.

Impostare ImageKit e AWS S3 per l’ottimizzazione e il ridimensionamento delle immagini

Configuriamo AWS S3 con ImageKit e iniziamo a fornire immagini ottimizzate. Ci vorranno pochi minuti se si seguono i passaggi qui.

1. Creare un nuovo account ImageKit

Il primo passo è quello di creare un nuovo account ImageKit se non lo avete già fatto. Si ottengono 20GB di larghezza di banda in uscita gratuita ogni mese per sempre senza aggiungere alcun dettaglio della carta di credito.

ImageKit ha sei regioni per l’elaborazione delle immagini. Selezionate una regione che sia uguale al vostro bucket S3 o che sia vicina ad esso.

2. Creare un nuovo utente in AWS

ImageKit ha bisogno solo di un accesso di sola lettura o, più precisamente, di un accesso GetObject al vostro bucket S3. Si raccomanda di creare un utente separato in AWS da utilizzare in ImageKit.

Potete creare un nuovo utente andando nella console IAM di AWS. Per questa demo, abbiamo creato un utente chiamato imagekit-s3-demo-integration con accesso programmatico, cioè accesso tramite chiavi, abilitato.

Hai solo bisogno di creare un nuovo utente a partire da ora. Non preoccupatevi dell’accesso che concedete a questo utente. Lo faremo nella prossima sezione.

Una volta che l’utente è stato creato, copiate la sua chiave di accesso e la sua chiave segreta, perché la useremo più tardi per integrarci con ImageKit.

3. Assegnare l’accesso al bucket

Abbiamo un bucket chiamato imagekit-s3-demo-integration per questa demo con un paio di immagini in esso.

Il bucket di cui sopra è privato, ma i passi qui saranno gli stessi, anche per un bucket pubblico. Abbiamo bisogno di fornire l’accesso GetObject su questo bucket all’utente appena creato.

a. Per farlo, clicchiamo sul pulsante “Add Permissions” per questo utente. Selezionate “Allega direttamente le politiche esistenti” e poi cliccate su “Crea politica”.

b. Selezionate l’opzione JSON creator per la policy e usate il seguente JSON per creare la policy che fornisce l’accesso GetObject al nostro bucket demo. Si noti che è necessario cambiare il nome del bucket con quello del proprio bucket.

{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "VisualEditor0",
"Effect": "Allow",
"Action": "s3:GetObject",
"Resource": [
"arn:aws:s3:::imagekit-s3-demo-integration",
"arn:aws:s3:::imagekit-s3-demo-integration/*"
]
}
]
}

Abbiamo chiamato la nostra politica ImageKitS3DemoIntegration. Una volta salvata la policy, appare così –

c. Allega questa politica appena creata all’utente e conferma che l’utente nel pannello IAM ha questa politica allegata.

4. Aggiungere l’accesso in ImageKit

Ora useremo le chiavi di accesso e segrete per il nuovo utente che abbiamo creato in AWS per consentire a ImageKit di accedere al bucket S3. La documentazione per lo stesso può essere trovata anche qui – Documentazione.

In ImageKit, andate nella sezione Origins sotto External Storage e poi cliccate sul pulsante “Add Origin”. Cambiare “Origin type” in “Amazon S3 Bucket” e aggiungere i valori nei campi corrispondenti.

Una volta salvato, se questa è la prima origine che avete aggiunto nel vostro account ImageKit, verrà automaticamente mappata rispetto ad un endpoint URL. Se questo non avviene automaticamente, potete sempre andare nella sezione degli endpoint URL e aggiungere questa nuova origine S3 nella sequenza delle preferenze di origine.

Accediamo all’immagine ottimizzata tramite ImageKit
Il nostro bucket di esempio ha un’immagine nel percorso monuments/eiffel-tower.jpeg. L’immagine eiffel-tower.jpeg ha una dimensione iniziale di 938kb.

Come indicato sotto l’endpoint URL all’interno della tua dashboard ImageKit, per accedere a questa immagine usando ImageKit, devi aggiungere l’endpoint URL dalla tua dashboard ImageKit con il percorso dell’immagine nel bucket.

E voilà!

Senza aggiungere altri parametri all’URL, l’immagine è ora ridotta a 583KB di dimensione e viene anche convertita automaticamente in formato immagine WebP nei browser supportati.

Non solo l’ottimizzazione automatica, puoi anche ridimensionare e trasformare le immagini nel tuo bucket S3 in tempo reale. Basta specificare la giusta trasformazione nell’URL dell’immagine

Ecco l’immagine di cui sopra ridimensionata ad una larghezza di 300px –

Possiamo anche specificare sia l’altezza che la larghezza per ottenere una miniatura quadrata di questa immagine.

 

Ci sono molte altre trasformazioni in ImageKit. Tutte possono essere utilizzate con le immagini nel secchio AWS S3. È possibile utilizzare la funzione di ritaglio intelligente per centrare automaticamente il soggetto dell’immagine nella miniatura di uscita. Oppure si possono usare gli overlay per creare banner dinamici, controllare come vengono gestiti il rapporto d’aspetto e il ritaglio dell’immagine, e così via.

Ecco un video che dimostra l’uso di alcune di queste trasformazioni sull’immagine.

Ottimizzazione delle immagini in tempo reale per AWS S3 senza scrivere alcun codice
E proprio così, ottimizzare e ridimensionare le immagini nel tuo bucket AWS S3 diventa davvero semplice. Una facile integrazione e inizi a fornire immagini ottimizzate in pochi minuti.

Se utilizzate alcune metriche come Google Lighthouse per monitorare le immagini sul vostro sito web, allora sarete in grado di spuntare tutti i punti relativi alle immagini da quella lista utilizzando ImageKit con il minimo sforzo.

Iniziate subito con ImageKit!

ImageKit viene fornito con un account gratuito per sempre che ti dà accesso a tutte le funzionalità di ottimizzazione e trasformazione delle immagini da utilizzare con il tuo bucket S3. E ottieni 20GB di larghezza di banda gratuita per la consegna ogni mese.

Iscriviti ora e inizia a fornire immagini perfettamente ottimizzate sui tuoi siti web e sulle tue app.

 


Per ulteriori informazioni visita il sito: immagi.net

Condividi questo articolo: