Showcase
Showcase
Summary
1. Intro
Gradient Image Processing is currently running in a live environment. The gradient team utilizes it in two projects. This document presents how Gradient Image Processing is used to obtain compressed and scaled images. The result images have the dimensions required by the desired place for presentation.
2. Usage Examples
The usage examples section is composed of two examples. The first is about Gradient Image Processing integration with the Everyday Economy page and the other is about Gradient Image Processing Integration with Gradient page. The focus is set on the Everyday Economy page. Integration with the Gradient page is performed under the same practices.
2.1. Example One - Everyday Economy page
For the Everyday Economy page, eight versions of every image are required. These are:
- JPEG and WEBP (width: 1300px, ratio preserved),
- JPEG and WEBP (width: 410px, ratio preserved),
- JPEG and WEBP (width: 900px, ratio preserved),
- JPEG and WEBP (width: 100px, ratio preserved).
In the screenshots below you can see the places where these result images are utilized, and also check them on the Everyday Economy page.
JPEG and WEBP (width: 1300px, ratio preserved)
Check it out on Everyday Economy page
JPEG and WEBP (width: 410px, ratio preserved)
Check it out on Everyday Economy page
JPEG and WEBP (width: 900px, ratio preserved)
Check it out on Everyday Economy page
JPEG and WEBP (width: 100px, ratio preserved)
So, let's talk about the steps required for these images to be presented in the configuration needed for this page, using Gradient Image Processing.
2.1.1. Configurations
The first step is to set up eight configurations for these four pictures (four for JPEG, and four for WEBP). On how to set up configurations, please check Usage Manual - 3.3 Insert Configurations.
2.1.2. Storage
When you upload the images you need, Gradient Image Processing stores the original image in the archive storage and all result images (result images are images created by configurations you set up earlier) to runtime storage.
You can use a server for runtime storage, which is different from archive storage. Why? Well, maybe for result images, you want a server that has higher bandwidth, and for original images, you want a server that has more available storage. The reasoning behind this is that archive images are not accessed as nearly as often as runtime images, so optimized storage size for archive images and optimized bandwidth amount for runtime images makes sense.
On more on options for modification of Gradient Image Processing, please check Tehnical Architecture - 5. Options for modification.
In the Everyday Economy page case, we use one place for storing images. The place contains an archive storage folder for storing original images and a runtime storage folder for storing result images.
2.1.3. Upload
For image upload, integration with Gradient Image Processing using different programming languages is explained in detail. Covered programming languages are Javascript, PHP, Python, and Java.
Please check Usage Manual - Integration with Gradient Image Processing to find the one that suits you, so you can do the integration.
In the following screenshot, you can see how did we save the image info to the database after a successful upload. It can be seen that table contains eight different images, each for one configuration.
Besides image upload, also removal of original and resulting images is integrated into the Everyday Economy page. Removal of the image implies removing the original image and all resulting images created out of it.
2.1.4. Usage of the result images
In the screenshot above, you have seen how we saved image path information after a successful upload. What we did is we connected our blog post ID to which the image is related, the result image path retrieved from Gradient Image Processing, and our custom label for the result image position. We use the saved path to present the resulting image in the desired place.
2.2. Example Two - Gradient page
The second example that uses Gradient Image Processing is the Gradient page. You can check how it looks like on Gradient page.