pixboost / transformimgs Goto Github PK
View Code? Open in Web Editor NEWOpen source image CDN.
Home Page: https://hub.docker.com/r/pixboost/transformimgs
License: MIT License
Open source image CDN.
Home Page: https://hub.docker.com/r/pixboost/transformimgs
License: MIT License
Is there currently a plan to support cache storage for input/output images to reduce processing time? We can save produced AVIF/Webp or other optimized/filtered images in a local storage for future use when client sends same/similar requirements. Or is this done in the proxy/CDN layer?
https://pixboost.com/img/v2/homepage/animation-js.svg - hitting this SVG directly from Chrome will serve gzipped version less than 100Kb
Hitting the same URL from transformimgs will serve uncompressed version ~450Kb:
http://localhost:8080/api/img/https://pixboost.com/img/v2/homepage/animation-js.svg/asis
When implementing:
The use case:
Add svg file format support to /optimise endpoint.
Does this application support PDFs as a possible upload media?
I saw that PNGs / JPEGs can be resized, so maybe PDFs are not supported...
Apologies if this was answered online somewhere, I tried to find the answer in the issues and google, but failed...
Press Release (not implemented yet):
There is a new feature in open source Image CDN to better support screens with DPI > 1.
Here is the blog post inspiration for the feature: https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/
Currently, there is no support for DPI on API level, and developers use <img>
tag with different source sets, e.g.
<img src="https://yourwebsite/image.jpg" srcset="
https://yourwebsite/image.jpg/resize?size=300 300w,
https://yourwebsite/image.jpg/resize?size=400 400w,
https://yourwebsite/image.jpg/resize?size=500 500w,
https://yourwebsite/image.jpg/resize?size=600 600w,
https://yourwebsite/image.jpg/resize?size=1200 1200w,
https://yourwebsite/image.jpg/optimise 2400w"
alt="image"
sizes="(min-width: 768px) 200px,
600px"
width="2400" height="2400">
In the example above we provide sources for different sizes, so a web browser can pick the correct one based on the image size in the viewport, screen DPI and possible other factors.
For instance, if we load the image on mobile device on the screen witth DPI = 3, then the web browser will load 600px
variant (3 * 200). On the other hand if we load the same image on desktop with DPI = 1 and the display image width is 600px then the browser will pick the same variant - 600 * 1 = 600px
This approach has performance drawbacks:
To address above limitations we introduced new query parameter ?dpi
that you can use with <picture>
tag.
There is a new query parameter dpi
that accepts float number value, e.g. 1.5, 2, 3.4.
Examples:
https://yourwebsite/image.jpg/resize?size=300&dpi=2
https://yourwebsite/image.jpg/resize?size=300&dpi=3.5
The ?dpi
query parameter is best used with the picture
element where you can pass screen dpi using -webkit-min-device-pixel-ratio
media query
<picture>
<source
media="(-webkit-min-device-pixel-ratio: 2)"
src="https://yourwebsite/image.jpg/optimise?dpi=2"
srcset="
https://yourwebsite/image.jpg/resize?size=300&dpi=2 300w,
https://yourwebsite/image.jpg/resize?size=400&dpi=2 400w,
https://yourwebsite/image.jpg/resize?size=500&dpi=2 500w,
https://yourwebsite/image.jpg/resize?size=600&dpi=2 600w,
https://yourwebsite/image.jpg/resize?size=1200&dpi=2 1200w,
https://yourwebsite/image.jpg/resize?size=1800&dpi=2 1800w,
https://yourwebsite/image.jpg/optimise?dpi=2 2400w"
sizes="(min-width: 768px) 200px,
600px"
>
<source
media="(-webkit-min-device-pixel-ratio: 3)"
src="https://yourwebsite/image.jpg/optimise?dpi=3"
srcset="
https://yourwebsite/image.jpg/resize?size=300&dpi=3 300w,
https://yourwebsite/image.jpg/resize?size=400&dpi=3 400w,
https://yourwebsite/image.jpg/resize?size=500&dpi=3 500w,
https://yourwebsite/image.jpg/resize?size=600&dpi=3 600w,
https://yourwebsite/image.jpg/resize?size=1200&dpi=3 1200w,
https://yourwebsite/image.jpg/resize?size=1800&dpi=3 1800w,
https://yourwebsite/image.jpg/optimise?dpi=3 2400w"
sizes="(min-width: 768px) 200px,
600px"
>
<img
src="https://yourwebsite/image.jpg/optimise"
srcset="
https://yourwebsite/image.jpg/resize?size=300 300w,
https://yourwebsite/image.jpg/resize?size=400 400w,
https://yourwebsite/image.jpg/resize?size=500 500w,
https://yourwebsite/image.jpg/resize?size=600 600w,
https://yourwebsite/image.jpg/resize?size=1200 1200w,
https://yourwebsite/image.jpg/resize?size=1800 1800w,
https://yourwebsite/image.jpg/optimise 2400w"
alt="image"
sizes="(min-width: 768px) 200px,
600px"
width="2400" height="2400"
>
</picture>
IMO, the main use of the feature would be using relative images sizing (vw, %) combined with Width
client hint which then won't require setting different sizes for different breakpoints.
From the quick look on things there is not much value on implementing with only Chrome supporting it.
Tickets to track in the other browsers:
Understand how PNG's alpha channels and tRNS chunk work. If the alpha mask is binary (that is, either fully transparent or fully opaque), see if the transparent parts correspond to a single color or gray shade; if so, eliminate the alpha channel from the PNG file and use the tRNS chunk (cheap transparency'') instead. Alternatively, see if the total number of color+alpha combinations is 256 or fewer; if so, write a colormapped image with a tRNS chunk. If the user requests that an RGBA image be converted to indexed color, do so intelligently. The combination of PNG's PLTE and tRNS chunks amounts to a palette whose entries are RGBA values. The exact same algorithms that quantize and dither a 24-bit RGB image down to an 8-bit palette-based image can be used to quantize and dither a 32-bit RGBA or 16-bit grayscale+alpha image down to an 8-bit RGBA palette. In particular, you cannot treat color values and transparency values as if they are separate, unrelated entities; attempting to partition the palette into a
color part'' and a transparent part'' makes no more sense than attempting to partition a standard RGB palette into red, green, and blue parts. If you do cheap transparency poorly, the user will be forced to use a full alpha channel, quadrupling her file size. For grayscale, an alpha channel
merely'' doubles the size. Note that the icicle image in Figure C-1 in the color insert is actually colormapped. Aside from the garish background--which was actually generated by the viewing application--the full-resolution half looks pretty darned good, doesn't it?
Add a configuration flag to reduce quality of the resulting images when Save-Data
header is on.
Consideration:
HTTP Header Description
Can I Use
Browsers Implementation Tickets:
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.