In order for the site pages to open quickly, you need to use pictures of as low weight (file size) as possible. At the same time, after compression, the image quality should not suffer much.
To find out which format is optimal, we tested GIF , JPG , PNG and WEBP formats , and compared the sizes of the resulting files.
Testing methodology
Compression was carried out on a working site using two programs:
• GD graphics library , built into PHP by default.
• Third-party ImageMagick program and its php extension Imagick .
By reducing the quality setting from 100 to 0 percent, a value was found at which the image quality remained acceptable.
Just say that both the GD and Imagick programs give the same result with the same quality parameter (Q), so all the examples are shown only for images obtained in the GD program .
Actual sizes for large images are 1600x900px, for thumbnails 400x225px - visible sizes may vary.
Thumbnail Image (thumbnail) 400x225px
In terms of compression, the WEBP format is an undeniable leader.
PNG note
The PNG format is practically compressible by both programs and gives a file size an order of magnitude larger than all other formats. In particular, in this test, PNG files had a file size of more than 40 times larger than the WEBP format .
One could use the PNG format for images with a transparent background, however, the WEBP format also works with the alpha channel, and gives, at the same time, a much better result.
, , PNG .
GIF
GIF . GIF , . SVG, GIF ( gif-).
1600x900px
WEBP JPG, 50% .
, WEBP . , , .
WEBP , .
400x225px.
WEBP .
For GD and Imagick programs, it is recommended to set the quality value to 20-30%.