Image optimization is a mandatory step for delivering images with the smallest possible file size while maintaining visual quality. That way, you save bytes and improve your website performance because the smaller the image files, the faster the browser can download and render them on your viewers’ screens.
Currently, web developers build apps in a variety of programming languages, such as PHP, Python, and Ruby. This article shows you how to optimize images in PHP, one of the most common server-side languages on the web.
The faster images load on your website, the higher your conversion rates. In fact, half of all online visitors expect websites to load within two seconds. Surveys from akamai.com and Gomez have revealed that—
- Lengthy load time is a major contributing factor to page abandonment, which becomes more likely with each additional second of load time. Nearly 40 percent of visitors abandon a page after only three seconds.
- Seventy-three percent of mobile users have experienced problems with load times on their devices.
- A one-second delay in load time can cut visitor satisfaction by 16 percent, leading to a seven-percent or higher drop in conversion rate.
You can optimize images in PHP in one of the following ways:
- Through PHP’s built-in functions, such as `imagejpeg(). That function takes the path of the output image and quality specification between 1 and 100. As a prerequisite, install the GD library for PHP.
- Through the Image Optimizer, which is a PHP library, built by Piotr Sliwa, for optimizing images by leveraging several libraries, including OptiPNG,
[jpegoptim](http://jpegclub.org/jpegtran/). The Image Optimizer can compress image files by 10-70 percent without sacrificing visual appeal.
- With the PHP Image Cache, a simple PHP class that compresses images on the fly. Once compression is complete, the Image Cache caches the image in your browser and then returns the image’s new source.
- With Imagick, a native PHP extension for creating and modifying images by means of the ImageMagick API.
With Cloudinary, you can efficiently optimize media assets—regardless of programming language. One reason is that, by default, Cloudinary automatically performs certain optimization steps on all transformed images. Plus, its integrated, fast delivery capability through CDNs ensures that your images are seamlessly displayed on your viewers’ devices.
Cloudinary offers the following optimization capabilities:
Automatic quality adjustment and encoding: Once you have set up the
q_autoparameter for an image, Cloudinary chooses the optimal quality-compression level and encoding settings according to the image content, its format, and the viewing browser. The result is a compressed image with superior visual quality. See this example:URL:Java:Vue.js:Angular:.Net:Android:
To fine-tune the visual quality of your images, set up the
q_auto:ecoparameter, as you desire.
Automatic formatting: The
f_autoparameter enables Cloudinary to analyze the image content and select the best format for delivery. For example, it might deliver images as WebP to Chrome or as JPEG-XR to Internet Explorer but retain the original format for all other browsers. With both
q_autoin place as parameters, Cloudinary would still deliver WebP and JPEG-XR to the relevant browsers. However, if the quality algorithm determines that PNG-8 or PNG-24 is the optimal format, Cloudinary might deliver selected images in either of those formats.
Resizing and cropping: By adding the width (
w) and height (
h) parameters to their URLs, you can resize images with Cloudinary, as in this example:URL:Java:React:Vue.js:Angular:.Net:Android:URL:Java:React:Vue.js:Angular:.Net:Android:
Here, Cloudinary maintains the aspect ratio but resizes the image to the height and width you specified.
Properly optimizing and caching images is a crucial step toward enhancing website performance. The tips this post offers are just a start. See the Cloudinary documentation for more ideas on optimization of JPEG images without compromising quality and on image transformations.
Cloudinary offers easy-to-use, cloud-based media-management solutions for the world’s top brands. With offices in the U.S., U.K., and Israel, Cloudinary has quickly become the de facto solution used by developers and marketers at major companies around the world to streamline rich-media management and deliver optimal end-user experiences.
- Website Image Optimization and Fast Delivery With Cloudinary
- Vue.js Tutorial: Images Optimization for Web Apps
- Python Image Optimization and Manipulation
- Image Optimization in Ruby
- Image Optimization for WordPress
- Learn About the Pros and Cons of JPEG 2000
- Adopting the WebP Image Format for Android on Websites Or Native Apps
- Ten Website Image Mistakes That Slow Load Times
- Automatically Reduce Image Size Without Losing Quality
- Automate Placeholder Generation and Accelerate Page Loads
- Three Ways to Do Progressive JPEG Encoding