Convert image formats for web
Each of the best image formats for web admits some kind of optimization. Lossy formats like JPEG or WEBP may be optimized using measurements of perceptual quality to tune the quality factor or the color subsampling setting. Compared to the quality factor of the compression algorithm, this kind of metrics manage to better capture the actual impact in terms of visual quality. Lossless formats like PNG and GIF also admit some kind of optimization by filtering the image and adjusting the bit depth. It's a kind of soft lossy compression.
Format conversion can be easily done with many applications. An example are the image editors included by default in the operative systems, like Preview in macOS. We have also more advanced free and open source libraries that can be used in the command line. For instance, converting an image to WEBP with ImageMagick could be as easy as:
convert input.jpg -quality 75 output.webp
However, get the best of every format to be used on the web is not an easy task, than can involve several tools and parameters. For instance, once of the best ways to optimize PNG images is using PNGQuant or Gifsicle for GIF images. While compressing JPEG images demands complex parametrizations for the best performance.
We have packaged all this tools and all our knowledge as a SAAS to provide best in class tools to build image transformation and optimization workflows for web. Moreover, our graphical interface simplifies bulk image processing with online wysiwyg tools. So, you can easily convert and edit all your images directly from your browser.
Since Abraia is built on an API first approach, it also provides instegrations for different purposes like the deployment of watch local folders for image optimization or the transformation of images from the command line.
Abraia supports a long list of formats as input images and allows to get optimized images in the formats that can be currently used in the web, like JPEG, WEBP, PNG, or GIF. Moreover, it supports a number of transformations that can be applied to image batches. So you can easily convert and optimize your images to be published on the web with the best balance between quality and file size.
Convert image to JPG
The JPEG image format is the best format to publish photos on the web. So, you must convert all your images to JPG before to publish them on the web. However, convert the image to JPEG is not going to be enough to serve the image in the right way. You also need to perform some optimizations, the image must be resized, or better served as responsive image, and compressed with the right parameters.
abraia optimize --width 1920 garlic-original.jpg garlic-optimized.jpg
The command before limit the maximum size of the image to a width of 1920 pixels (FullHD viewport) and perform the JPEG compression. The service choose the right compression parameters to get the best result. The image have been reduced from 452kB to 240kB.
Convert image to PNG
The PNG image format is commonly used for graphics and transparent images. It can produce heavy images when it is used for photos with transparent background. In this cases, it needs to be optimized using tools like pngquant or be converted to webp. The problem using webp is that it does not work on Safari.
abraia optimize strawberry.psd strawberry.png
The command before convert a photoshop psd file with transparent background to PNG and optimize it reducing the color depth to 8 bits (PNG8). The image weight is reduced from 815kB on PNG24 (24 bits of color depth) to 293kB on PNG8 (8 bits of color depth). However, if we can use the WebP format, we can save 188kB with regard the optimized PNG.
abraia optimize strawberry.png strawberry.webp
Convert image to GIF
The GIF format is mainly used with short and low cuality animations, because is universally supported. Usually it is a better choice to use the MP4 video format for animations. This reduce the file size and provides much better quality. For animations it is also a better option to use WebP, but the recomended format is MP4 video. In some cases, specially with a very low number of colors and size, it can provides some weight reduction respect the PNG format.
abraia optimize strawberry.png strawberry.gif
You can easily convet images to GIF and check if this provides some benefit, but take into account the previous recomendations.
Convert PSD to JPG
A .PSD file is a layered image file used in Adobe PhotoShop. PSD is a proprietary file format used by default by Photoshop for saving data. When an image is complete, the layers must be flatten and converted to a non-propietary file format to be shared, like (JPG and PNG). Once a PSD image has been flatten by conversion, it cannot be converted back to PSD and the user can no longer work with the image's layers. So the PSD format is used for editing, and the result is exported to be used on web.
abraia optimize strawberry.psd strawberry.jpg
The previous command just convert a PSD file to be used on web, adding a white background in this case because the JPG format is used (it does not support transparency). You can easily export a batch of Photoshop files with a simple command. Just copy your PSD files to a folder, for instance the
photoshop folder, and convert all the files in that folder.
abraia optimize photoshop
Converting between image formats and optimizing them to be used on the web can be an overwhelming task which demands more simple tools to provide the best results with the lowest cost.