ImageKit.io updates
ImageKit.io updates
imagekit.io

Magento 2 extension 🚀

 

New

 

 

Product images are the first thing shoppers want when they visit your store, and a pixel-perfect first impression is crucial to driving conversions.

We are thrilled to launch the ImageKit extension for Magento 2 that will help you showcase products using high-quality images that load fast. The extension also provides native integration with ImageKit's Digital Assets Management software.

You can download and install the extension from the Magento marketplace or install it via composer as mentioned in the documentation.


ImageKit Magento Extension features

With ImageKit, you can add and deliver images. The ImageKit Dashboard has multiple options to change the behavior of the ImageKit extension when serving images. These are

  1. Custom domain name - Ability to use the custom domain name to deliver media assets, e.g., http://images.yourdomain.com.
  2. Automatic Image Format Optimization - Automatically deliver images converted to modern image formats based on viewing device and browser
  3. Image Quality - Adjust the quality of generated images to balance between visual quality and file size minimization
  4. Image Transforms - Leverage ImageKit Media Library to create or modify assets depending on requirements. Learn more here.
  5. ImageKit Media Library - ImageKit Extension integrates the ImageKit Media Library right into the CMS‌


If you face any issues or have a question, please reach out to us at support@imagekit.io.

Consolidated embedded metadata in upload API response

 

Improvement

 

 

We have improved upload API to return consolidated embedded metadata which includes exif, iptc, and xmp data.

You can request this new embedded metadata by setting embeddedMetadata in responseFields parameter in the upload API request.


// Sample using ImageKit Node.js SDK
var response = await imagekit.upload({
    file : <url|base_64|binary>, //required
    fileName : "my_file_name.jpg",   //required
    responseFields: "embeddedMetadata"
});

👉 Soon, we will update the search API so that you can search assets based on selected embedded metadata fields.


Embedded metadata fields

Below is the embedded metadata stored in this sample image provided by https://iptc.org.

{
    ExifVersion: '0232',
    ImageDescription: 'The description aka caption (ref2019.1)',
    XResolution: 72,
    YResolution: 72,
    ResolutionUnit: 'inches',
    Artist: 'Creator1 (ref2019.1)',
    Copyright: 'Copyright (Notice) 2019.1 IPTC - www.iptc.org  (ref2019.1)',
    DateTimeOriginal: new Date('2019-10-16T19:01:03.000Z'),
    OffsetTimeOriginal: '+00:00',
    ComponentsConfiguration: 'Y,Cb,Cr,-',
    FlashpixVersion: '0100',
    ColorSpace: 'Uncalibrated',
    ObjectAttributeReference: 'A Genre (ref2019.1)',
    ObjectName: 'The Title (ref2019.1)',
    SubjectReference: ['IPTC:1ref2019.1', 'IPTC:2ref2019.1', 'IPTC:3ref2019.1'],
    Keywords: ['Keyword1ref2019.1', 'Keyword2ref2019.1', 'Keyword3ref2019.1'],
    SpecialInstructions: 'An Instruction (ref2019.1)',
    TimeCreated: '19:01:03+00:00',
    Byline: 'Creator1 (ref2019.1)',
    BylineTitle: "Creator's Job Title  (ref2019.1)",
    Sublocation: 'Sublocation (Core) (ref2019.1)',
    ProvinceState: 'Province/State(Core)(ref2019.1)',
    CountryPrimaryLocationCode: 'R19',
    CountryPrimaryLocationName: 'Country (Core) (ref2019.1)',
    OriginalTransmissionReference: 'Job Id (ref2019.1)',
    CopyrightNotice: 'Copyright (Notice) 2019.1 IPTC - www.iptc.org  (ref2019.1)',
    CaptionAbstract: 'The description aka caption (ref2019.1)',
    WriterEditor: 'Description Writer (ref2019.1)',
    ApplicationRecordVersion: 4,
    CountryCode: 'R19',
    CreatorCity: "Creator's CI: City (ref2019.1)",
    CreatorCountry: "Creator's CI: Country (ref2019.1)",
    CreatorAddress: "Creator's CI: Address, line 1 (ref2019.1)",
    CreatorPostalCode: "Creator's CI: Postcode (ref2019.1)",
    CreatorRegion: "Creator's CI: State/Province (ref2019.1)",
    CreatorWorkEmail: "Creator's CI: Email@1, Email@2 (ref2019.1)",
    CreatorWorkTelephone: "Creator's CI: Phone # 1, Phone # 2 (ref2019.1)",
    CreatorWorkURL: 'http://www.Creators.CI/WebAddress/ref2019.1',
    IntellectualGenre: 'A Genre (ref2019.1)',
    Location: 'Sublocation (Core) (ref2019.1)',
    Scene: ['IPTC-Scene-Code1 (ref2019.1)', 'IPTC-Scene-Code2 (ref2019.1)'],
    SubjectCode: ['IPTC:1ref2019.1', 'IPTC:2ref2019.1', 'IPTC:3ref2019.1'],
    AboutCvTermCvId: 'http://example.com/cv/about/ref2019.1',
    AboutCvTermId: 'http://example.com/cv/about/ref2019.1/code987',
    AboutCvTermName: 'CV-Term Name 1 (ref2019.1)',
    AboutCvTermRefinedAbout: 'http://example.com/cv/refinements2/ref2019.1/codeX145',
    AdditionalModelInformation: 'Additional Model Info (ref2019.1)',
    ArtworkCircaDateCreated: 'AO Circa Date: between 1550 and 1600 (ref2019.1)',
    ArtworkContentDescription: 'AO Content Description 1 (ref2019.1)',
    ArtworkContributionDescription: 'AO Contribution Description 1 (ref2019.1)',
    ArtworkCopyrightNotice: 'AO Copyright Notice 1 (ref2019.1)',
    ArtworkCreator: [
      'AO Creator Name 1a (ref2019.1)',
      'AO Creator Name 1b (ref2019.1)'
    ],
    ArtworkCreatorID: ['AO Creator Id 1a (ref2019.1)', 'AO Creator Id 1b (ref2019.1)'],
    ArtworkCopyrightOwnerID: 'AO Current Copyright Owner ID 1 (ref2019.1)',
    ArtworkCopyrightOwnerName: 'AO Current Copyright Owner Name 1 (ref2019.1)',
    ArtworkLicensorID: 'AO Current Licensor ID 1 (ref2019.1)',
    ArtworkLicensorName: 'AO Current Licensor Name 1 (ref2019.1)',
    ArtworkDateCreated: new Date('1919-10-16T19:01:00.000Z'),
    ArtworkPhysicalDescription: 'AO Physical Description 1 (ref2019.1)',
    ArtworkSource: 'AO Source 1 (ref2019.1)',
    ArtworkSourceInventoryNo: 'AO Source Inventory No 1 (ref2019.1)',
    ArtworkSourceInvURL: 'AO Source Inventory URL (ref2019.1)',
    ArtworkStylePeriod: [
      'AO Style Baroque (ref2019.1)',
      'AO Style Italian Baroque (ref2019.1)'
    ],
    ArtworkTitle: 'AO Title 1 (ref2019.1)',
    DigitalImageGUID: 'http://example.com/imageGUIDs/TestGUID12345/ref2019.1',
    DigitalSourceType: 'http://cv.iptc.org/newscodes/digitalsourcetype/softwareImage',
    EmbeddedEncodedRightsExpr: 'The Encoded Rights Expression (ref2019.1)',
    EmbeddedEncodedRightsExprType: 'IANA Media Type of ERE (ref2019.1)',
    EmbeddedEncodedRightsExprLangID: 'http://example.org/RELids/id4711/ref2019.1',
    Event: 'An Event (ref2019.1)',
    GenreCvId: 'http://example.com/cv/genre/ref2019.1',
    GenreCvTermId: 'http://example.com/cv/genre/ref2019.1/code1369',
    GenreCvTermName: 'Genre CV-Term Name 1 (ref2019.1)',
    GenreCvTermRefinedAbout: 'http://example.com/cv/genrerefinements2/ref2019.1/codeY864',
    ImageRegionName: ['Listener 1', 'Listener 2', 'Speaker 1'],
    ImageRegionOrganisationInImageName: [
      'Organisation name no 1 in region persltr2 (ref2019.1)',
      'Organisation name no 1 in region persltr2 (ref2019.1)',
      'Organisation name no 1 in region persltr3 (ref2019.1)'
    ],
    ImageRegionPersonInImage: [
      'Person name no 1 in region persltr2 (ref2019.1)',
      'Person name no 1 in region persltr3 (ref2019.1)',
      'Person name no 1 in region persltr1 (ref2019.1)'
    ],
    ImageRegionBoundaryH: [0.385],
    ImageRegionBoundaryShape: ['rectangle', 'circle', 'polygon'],
    ImageRegionBoundaryUnit: ['relative', 'relative', 'relative'],
    ImageRegionBoundaryW: [0.127],
    ImageRegionBoundaryX: [0.31, 0.59],
    ImageRegionBoundaryY: [0.18, 0.426],
    ImageRegionCtypeName: [
      'Region Boundary Content Type Name (ref2019.1)',
      'Region Boundary Content Type Name (ref2019.1)',
      'Region Boundary Content Type Name (ref2019.1)'
    ],
    ImageRegionCtypeIdentifier: [
      'https://example.org/rctype/type2019.1a',
      'https://example.org/rctype/type2019.1b',
      'https://example.org/rctype/type2019.1a',
      'https://example.org/rctype/type2019.1b',
      'https://example.org/rctype/type2019.1a',
      'https://example.org/rctype/type2019.1b'
    ],
    ImageRegionID: ['persltr2', 'persltr3', 'persltr1'],
    ImageRegionRoleName: [
      'Region Boundary Content Role Name (ref2019.1)',
      'Region Boundary Content Role Name (ref2019.1)',
      'Region Boundary Content Role Name (ref2019.1)'
    ],
    ImageRegionRoleIdentifier: [
      'https://example.org/rrole/role2019.1a',
      'https://example.org/rrole/role2019.1b',
      'https://example.org/rrole/role2019.1a',
      'https://example.org/rrole/role2019.1b',
      'https://example.org/rrole/role2019.1a',
      'https://example.org/rrole/role2019.1b'
    ],
    ImageRegionBoundaryRx: [0.068],
    ImageRegionBoundaryVerticesX: [0.05, 0.148, 0.375],
    ImageRegionBoundaryVerticesY: [0.713, 0.041, 0.863],
    LinkedEncodedRightsExpr: 'http://example.org/linkedrightsexpression/id986/ref2019.1',
    LinkedEncodedRightsExprType: 'IANA Media Type of ERE (ref2019.1)',
    LinkedEncodedRightsExprLangID: 'http://example.org/RELids/id4712/ref2019.1',
    LocationCreatedCity: 'City (Location created1) (ref2019.1)',
    LocationCreatedCountryCode: 'R17',
    LocationCreatedCountryName: 'CountryName (Location created1) (ref2019.1)',
    LocationCreatedLocationId: 'Location Id (Location created1) (ref2019.1)',
    LocationCreatedLocationName: 'Location Name (Location created1) (ref2019.1)',
    LocationCreatedProvinceState: 'Province/State (Location created1) (ref2019.1)',
    LocationCreatedSublocation: 'Sublocation (Location created1) (ref2019.1)',
    LocationCreatedWorldRegion: 'Worldregion (Location created1) (ref2019.1)',
    LocationCreatedGPSAltitude: '480 m',
    LocationCreatedGPSLatitude: '48,16.5N',
    LocationCreatedGPSLongitude: '16,20.28E',
    LocationShownCity: [
      'City (Location shown1) (ref2019.1)',
      'City (Location shown2) (ref2019.1)'
    ],
    LocationShownCountryCode: ['R17', 'R17'],
    LocationShownCountryName: [
      'CountryName (Location shown1) (ref2019.1)',
      'CountryName (Location shown2) (ref2019.1)'
    ],
    LocationShownLocationId: [
      'Location Id 1a(Location shown1) (ref2019.1)',
      'Location Id 1b(Location shown1) (ref2019.1)',
      'Location Id 2a(Location shown2) (ref2019.1)',
      'Location Id 2b(Location shown2) (ref2019.1)'
    ],
    LocationShownLocationName: [
      'Location Name (Location shown1) (ref2019.1)',
      'Location Name (Location shown2) (ref2019.1)'
    ],
    LocationShownProvinceState: [
      'Province/State (Location shown1) (ref2019.1)',
      'Province/State (Location shown2) (ref2019.1)'
    ],
    LocationShownSublocation: [
      'Sublocation (Location shown1) (ref2019.1)',
      'Sublocation (Location shown2) (ref2019.1)'
    ],
    LocationShownWorldRegion: [
      'Worldregion (Location shown1) (ref2019.1)',
      'Worldregion (Location shown2) (ref2019.1)'
    ],
    LocationShownGPSAltitude: ['140 m', '120 m'],
    LocationShownGPSLatitude: ['48,8.82N', '47,57.12N'],
    LocationShownGPSLongitude: ['17,5.88E', '16,49.8E'],
    MaxAvailHeight: 20,
    MaxAvailWidth: 19,
    ModelAge: [25, 27, 30],
    OrganisationInImageCode: [
      'Organisation Code 1 (ref2019.1)',
      'Organisation Code 2 (ref2019.1)',
      'Organisation Code 3 (ref2019.1)'
    ],
    OrganisationInImageName: [
      'Organisation Name 1 (ref2019.1)',
      'Organisation Name 2 (ref2019.1)',
      'Organisation Name 3 (ref2019.1)'
    ],
    PersonInImage: ['Person Shown 1 (ref2019.1)', 'Person Shown 2 (ref2019.1)'],
    PersonInImageCvTermCvId: ['http://example.com/cv/test99/ref2019.1'],
    PersonInImageCvTermId: ['http://example.com/cv/test99/code987/ref2019.1'],
    PersonInImageCvTermName: ['Person Characteristic Name 1 (ref2019.1)'],
    PersonInImageCvTermRefinedAbout: ['http://example.com/cv/refinements987/codeY765/ref2019.1'],
    PersonInImageDescription: ['Person Description 1 (ref2019.1)'],
    PersonInImageId: [
      'http://wikidata.org/item/Q123456789/ref2019.1',
      'http://freebase.com/m/987654321/ref2019.1'
    ],
    PersonInImageName: ['Person Name 1 (ref2019.1)'],
    ProductInImageDescription: ['Product Description 1 (ref2019.1)'],
    ProductInImageGTIN: [123456782019.1],
    ProductInImageName: ['Product Name 1 (ref2019.1)'],
    RegistryEntryRole: [
      'Registry Entry Role ID 1 (ref2019.1)',
      'Registry Entry Role ID 2 (ref2019.1)'
    ],
    RegistryItemID: [
      'Registry Image ID 1 (ref2019.1)',
      'Registry Image ID 2 (ref2019.1)'
    ],
    RegistryOrganisationID: [
      'Registry Organisation ID 1 (ref2019.1)',
      'Registry Organisation ID 2 (ref2019.1)'
    ],
    Creator: 'Creator1 (ref2019.1)',
    Description: 'The description aka caption (ref2019.1)',
    Rights: 'Copyright (Notice) 2019.1 IPTC - www.iptc.org  (ref2019.1)',
    Subject: ['Keyword1ref2019.1', 'Keyword2ref2019.1', 'Keyword3ref2019.1'],
    Title: 'The Title (ref2019.1)',
    AuthorsPosition: 'Creator&#39;s Job Title  (ref2019.1)',
    CaptionWriter: 'Description Writer (ref2019.1)',
    City: 'City (Core) (ref2019.1)',
    Country: 'Country (Core) (ref2019.1)',
    Credit: 'Credit Line (ref2019.1)',
    DateCreated: new Date('2019-10-16T19:01:03.000Z'),
    Headline: 'The Headline (ref2019.1)',
    Instructions: 'An Instruction (ref2019.1)',
    Source: 'Source (ref2019.1)',
    State: 'Province/State(Core)(ref2019.1)',
    TransmissionReference: 'Job Id (ref2019.1)',
    CopyrightOwnerID: [
      'Copyright Owner Id 1 (ref2019.1)',
      'Copyright Owner Id 2 (ref2019.1)'
    ],
    CopyrightOwnerName: [
      'Copyright Owner Name 1 (ref2019.1)',
      'Copyright Owner Name 2 (ref2019.1)'
    ],
    ImageCreatorID: 'Image Creator Id 1 (ref2019.1)',
    ImageCreatorName: 'Image Creator Name 1 (ref2019.1)',
    ImageCreatorImageID: 'Image Creator Image ID (ref2019.1)',
    ImageSupplierID: 'Image Supplier Id (ref2019.1)',
    ImageSupplierName: 'Image Supplier Name (ref2019.1)',
    ImageSupplierImageID: 'Image Supplier Image ID (ref2019.1)',
    LicensorCity: ['Licensor City 1 (ref2019.1)', 'Licensor City 2 (ref2019.1)'],
    LicensorCountry: [
      'Licensor Country 1 (ref2019.1)',
      'Licensor Country 2 (ref2019.1)'
    ],
    LicensorEmail: ['Licensor Email 1 (ref2019.1)', 'Licensor Email 2 (ref2019.1)'],
    LicensorExtendedAddress: [
      'Licensor Ext Addr 1 (ref2019.1)',
      'Licensor Ext Addr 2 (ref2019.1)'
    ],
    LicensorID: ['Licensor ID 1 (ref2019.1)', 'Licensor ID 2 (ref2019.1)'],
    LicensorName: ['Licensor Name 1 (ref2019.1)', 'Licensor Name 2 (ref2019.1)'],
    LicensorPostalCode: [
      'Licensor Postcode 1 (ref2019.1)',
      'Licensor Postcode 2 (ref2019.1)'
    ],
    LicensorRegion: ['Licensor Region 1 (ref2019.1)', 'Licensor Region 2 (ref2019.1)'],
    LicensorStreetAddress: [
      'Licensor Street Addr 1 (ref2019.1)',
      'Licensor Street Addr 2 (ref2019.1)'
    ],
    LicensorTelephone1: ['Licensor Phone1 1 (ref2019.1)', 'Licensor Phone1 2 (ref2019.1)'],
    LicensorTelephone2: ['Licensor Phone2 1 (ref2019.1)', 'Licensor Phone2 2 (ref2019.1)'],
    LicensorURL: ['Licensor URL 1 (ref2019.1)', 'Licensor URL 2 (ref2019.1)'],
    ModelReleaseID: [
      'Model Release ID 1 (ref2019.1)',
      'Model Release ID 2 (ref2019.1)'
    ],
    PropertyReleaseID: [
      'Property Release ID 1 (ref2019.1)',
      'Property Release ID 2 (ref2019.1)'
    ],
    Rating: 1,
    UsageTerms: 'Rights Usage Terms (ref2019.1)',
    WebStatement: 'http://www.WebStatementOfRights.org/2019.1',
    DateTimeCreated: new Date('2019-10-16T19:01:03.000Z'),
    Caption: 'The description aka caption (ref2019.1)',
    Writer: 'Description Writer (ref2019.1)'
  }

Folder upload with directory structure preserved

 

New

 

 

Now you can upload an entire folder while preserving the directory structure of nested files and folders.

Screenshot 2021-08-26 at 1.05.14 PM.png

You can also drag the whole folder on the media library page.


See the list of all files in nested folders

You can see all the added files. Click on edit to change the file name or add tag or set coordinates for a custom focus area.

image.png


Check the nested folder path

In edit mode, you can also check the folder path in which the file will be uploaded. ImageKit will create all nested subfolders if they are not already present in your media library.

image.png

HEIF (HEIC) image format support

 

New

 

 

ImageKit now supports decoding HEIF and HEIC images to web-safe image formats - JPG, PNG, and WebP. ImageKit will automatically determine the formats supported on the requesting device and convert the image to the appropriate format. You can carry out all ImageKit transformations on these images.

Learn more from the docs.

AVIF speed improvement

 

New

 

 

There have been massive speed improvements in the encoding AVIF image. We have updated our systems to leverage these improvements.

Reach out to support@imagekit.io to enable AVIF format on your account.

✅ Backup media library assets

 

New

 

 

You can now backup all media library assets in your S3 bucket by setting up an active backup.

Go to Settings ➡ Backup bucket - https://imagekit.io/dashboard#settings-backup-bucket.

image.png

Learn more from the documentation.

Video transformation and optimization

 

New

 

 

Super excited to launch real-time video transformation and optimization.


✅ URL-based transformation

Similar to images, leverage video transformations on ImageKit.

Using ImageKit.io, you can perform real-time transformations to deliver perfect videos to the end-users. These transformations can be performed by using the URL-based transformation parameters.

        URL-endpoint        transformation   video path                                    
┌──────────────────────────┐┌────────────┐┌───────────────┐
https://ik.imagekit.io/demo/tr:w-300,h-300/sample-video.mp4


✅ Automatic video optimization

Using automatic video format conversion and quality optimization, ImageKit optimize delivery of your videos over the web.

image.png

Contact support at support@imagekit.io, if you do not see video-related options in your dashboard.


✅ Pull from your origin

Configure external storage and start using resizing and optimization on existing videos. ImageKit.io supports the following types of origin:

  • Amazon S3 bucket origin
  • S3-Compatible storages
  • Wasabi Storage
  • Ali Storage
  • Digital Ocean Spaces
  • Any web server origin, for example - Magento, WordPress, etc.
  • Web proxy
  • Azure Blob storage
  • Google Storage
  • Firebase Storage

Check out the limitations of alpha release before using real-time transformations in your application.

🚀 Advanced image editor

 

New

 

 

Introducing the new advanced image editor that allows you to modify creatives right inside the ImageKit media library. A Mini Photoshop so that you don't have to go back to the design team for the final touchup.

image.png

Image resizing & cropping

Resize and crop images to any height and width or choose an option from the list of predefined social presets.

Screenshot 2021-07-06 at 5.00.13 PM.png

Image overlay

Upload images from your computer and create stunning banners. Screenshot 2021-07-06 at 4.59.35 PM.png

Text overlay

Overlay text in a stylish font. Screenshot 2021-07-06 at 4.57.39 PM.png

Control font, size, and background color

Control font family, font size, and background color to match your design.

Screenshot 2021-07-06 at 4.58.40 PM.png

Powerful visual effects

Change color brightness, contrast, saturation, etc., with a simple to use slider. Engage your visitors by using sharp creatives.

Screenshot 2021-07-06 at 4.58.49 PM.png

Nuxt.js integration

 

New

 

 

Nuxt provides plug-and-play image optimization for Nuxt apps using Nuxt Image.

We created the native integration with Nuxt Image and are happy to announce that our PR has been merged in the Nuxt Image Github project.

Check out the official documentation - https://image.nuxtjs.org/providers/imagekit

Let us know if you have any questions. We would be happy to improve the integration in the coming weeks based on your feedback.

Media library storage fix

 

Fix

 

 

There was a bug in the file and folder delete API related to updating media library storage usage.

All files were deleting successfully but in few cases, we were reducing storage usage multiple times. This was resulting in less than the actual number being reported in the dashboard and invoice.

We have fixed this and updated the usage data to match your current media library usage.