Image Resize Knowledge
Why is there a resize knowledge page?
I am the author of the website.
I am a full-stack engineer.
I have always been interested in compression and file structure.
In my spare time at work, I learn various technologies by consulting many technical standard documents.
After experiencing many tools, I gradually have my own ideas. I can combine product usability, user privacy protection and professional means for specific product functions to create a comfortable and safe tool experience.
This is the website you see.
At present, I will first do a good job of image resize function, and will gradually expand and develop new functions in the future. Please wait and see.
In the process of developing the website, I encountered many valuable problems and some technical traps.
I will share these things and hope that someone can give me some suggestions to make this website better and serve more users.
Why do you need a resize function?
When I use some online websites and fill in the material form, I always encounter the situation that my photos do not meet the requirements of the website.
For example, the photo of my ID card (taken with an iPhone) is 1333x1000 resolution, WebP format, and 141KB file size, but the online website requires it to be in JPG format, less than 1024x768 resolution, and less than 100KB file size.
In this case, I can only manually convert the image format from WebP format to JPG format, and then manually reduce the resolution.
In reducing the resolution, I may have to repeat it many times to meet the final 100KB requirement.
This set of operations is very inconvenient.
Imagine that as an engineer, I feel so inconvenient even though I am proficient in using computers. For thousands of ordinary users, they will feel even more desperate.
In this case, I plan to make the resize function first, preferably one-click processing, and the user only needs to specify the "100KB".
How do I implement basic functions?
The pictures we commonly use are in multiple file formats.
Jpg/jpeg files are a lossy compression format developed by the Joint Photographic Experts Group.
Generally speaking, jpg files cannot display transparent content (for details, please refer to Introduction of jpg on Wikipedia).
During the encoding (compression) process of jpg/jpeg files, we can specify the compression quality parameters to control the balance between the quality and size of the compressed files.
On macOS, the default compression quality of jpg/jpeg files is 70%, which can take into account both good quality and not too large file size.
png files are a lossless compression format developed by Portable Network Graphics.
files can display transparent content (for details, please refer to Introduction of png on Wikipedia).
png files can store colors in the form of palettes, but can only save up to 256 colors. In some specific situations, the palette can be used to compress images.
It is almost impossible to compress a MB-level image to the KB level without changing the image resolution.
Even if it can be done, the image quality will be greatly lost and it is actually unusable.
Therefore, two methods need to be used together to handle resizing.
The first method is to reduce the resolution of the image.
image resolution is the number of pixels contained in the image in width and height. The higher the resolution, the more colors the image can carry, and the content of the image will be richer to the human eye.
The second method is mentioned above, by adjusting the compression parameters of jpg encoding, the image quality is slightly sacrificed while the resolution remains unchanged, so as to achieve the purpose of compressing the file size.
After actual testing, I found that for resizing from MB to KB, reducing the resolution is a more effective method.
Therefore, in the overall approach, I will first reduce the image resolution, then reduce the image quality, and finally achieve the goal of resizing.
How do I ensure the privacy of users?
In fact, there are already many websites on the Internet that provide image resizing functions, but after actual use experience, I found that these websites all use the server to do resizing without exception.
This means that users have to upload their images to the server through the website, resize them on the server, and then download the resulting images to local use.
This back and forth consumes extra network bandwidth.
From the perspective of privacy and security, this approach also has some hidden dangers.
First, when users upload images, they may encounter third-party attacks, causing the images to be leaked to third-party attackers during the upload process.
If the image content contains private information, these privacy information will be leaked.
Secondly, after the image is uploaded to the server, the server needs to save a copy of the image so that it can be resized on the server. Therefore, for the sake of user privacy, the copy of the image saved on the server needs to be cleared in time.
Fortunately, I have seen the function of deleting uploaded images on most image resizing websites. Finally, in terms of performance, if a user uploads a "dangerous image", such as an image that is too large and exceeds the processing capacity of the server, it may cause the service to crash and affect all users using the website.
Based on the above considerations, I decided to use a new idea to implement this function.
My starting point is that since there are many hidden dangers in processing image resize on the server side, can we process the resize directly on the user's local computer instead of processing it on the server side?
Fortunately, in the field of web front-end technology, there is a technology called "WebAssembly", which allows us to run some codes that can only run on the server side directly on the user's local computer.
The specific meaning of WebAssembly can be found at Wikipedia .
Based on WebAssembly, I developed a library called "resize-image", which can run on the user's local computer and can handle image resize functions.
Processing image resize on the user's local computer can avoid user privacy leakage and server crashes, thereby improving the user experience.
In addition, since the upload and download steps are skipped, using WebAssembly technology can also make the resize speed a little faster.
Is there anything else that can be optimized?
Of course, there are many areas that can be optimized in the resize strategy and functional details.
For example, the resizing strategy of the png palette mentioned above, when the color distribution of the image is at a certain level, it is hoped that the resizing will not affect the image quality.
- For example, it can support more image file formats, such as bmp/webp, etc.
- For example, it can support batch processing of multiple image files, further freeing the user's hands.
- For example, making an App on a mobile phone is more convenient to use.
- ...
However, because my energy is limited, in the subsequent optimization process, I will focus on 1-2 optimization tasks, so that I can focus more on the production of high-quality websites.
Finally, thank you for reading, and I hope this website can bring some help to you.
Do you want to experience the image resize function now? Click here to resize