Cloudinary Blog

Compressing, Resizing, and Optimizing PHP Images

By Prosper Otemuyiwa Jul 12, 2020

Compressing, Resizing, and Optimizing PHP Images

Image optimization, which results in the smallest possible file size but no loss in visual quality, is a mandatory step before delivery. That way, you save bytes and improve website performance because the smaller the image files, the faster the browser can download and render them on viewers’ screens.

This article shows you how to compress images with PHP, one of the most common server-side languages for building web apps.

Advantages of Compressing and Optimizing Images With PHP

The faster images load on your website, the more likely visitors will return, yielding higher conversion rates. In fact, half of all visitors expect websites to load within two seconds. Surveys from Akamai and Gomez have revealed that—

Lengthy load time is a major contributing factor of 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.

Compressing Images With PHP

You can compress images in PHP in one of the following ways:

Through PHP’s built-in functions, such as imagejpeg(), which takes the path of the output image and quality specification between 1 and 100. As a prerequisite, install the PHP’s GD Graphics Library.
Through the PHP Image Optimizer, a PHP library built by Piotr Sliwa, which leverages several libraries, including OptiPNG, pngquant, and [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 PHP Image 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.

An Ideal Alternative for Compressing Images With PHP

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 content delivery networks (CDNs) ensures that images are seamlessly displayed on viewers’ devices.

Cloudinary offers the following image compression capabilities:

Automatic quality adjustment and encoding: Once you have added the q_auto parameter to an image URL, 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:
To fine-tune the visual quality of your images through automation, add the q_auto:best. q_auto:low, q_auto:good, or q_auto:eco parameter, as you desire.
Automatic formatting: Adding the f_auto parameter to image URLs causes Cloudinary to optimally format images. In most cases, Chrome users would receive a WebP (.webp); Internet Explorer users, a JPEG-XR (.jxr); and Safari users, a JPEG 2000 (.jp2). If a browser does not support any of those formats, Cloudinary delivers the image in the format depicted by the file extension.
In case you add both the f_auto and q_auto parameters to the URL of a JPEG image, Cloudinary’s automated quality algorithm halts chroma subsampling, retaining the JPEG format with no switch to WebP. That’s a quality safeguard because the lossy WebP format always performs chroma subsampling, which might reduce the visual quality of some images.

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 Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_0.5/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :width=>0.5, :crop=>"scale")

PHP v1:

cl_image_tag("sample.jpg", array("width"=>"0.5", "crop"=>"scale"))

PHP v2:

(new ImageTag('sample.jpg'))
  ->resize(Resize::scale()->width(0.5));

Python:

CloudinaryImage("sample.jpg").image(width="0.5", crop="scale")

Node.js:

cloudinary.image("sample.jpg", {width: "0.5", crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().width(0.5).crop("scale")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: "0.5", crop: "scale"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: "0.5", crop: "scale"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="0.5" crop="scale" />
</Image>

Vue.js:

<cld-image publicId="sample.jpg" >
  <cld-transformation width="0.5" crop="scale" />
</cld-image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="0.5" crop="scale">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(0.5).Crop("scale")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(0.5).crop("scale")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(0.5).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/h_200/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :height=>200, :crop=>"scale")

PHP v1:

cl_image_tag("sample.jpg", array("height"=>200, "crop"=>"scale"))

PHP v2:

(new ImageTag('sample.jpg'))
  ->resize(Resize::scale()->height(200));

Python:

CloudinaryImage("sample.jpg").image(height=200, crop="scale")

Node.js:

cloudinary.image("sample.jpg", {height: 200, crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().height(200).crop("scale")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {height: 200, crop: "scale"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {height: 200, crop: "scale"})

React:

<Image publicId="sample.jpg" >
  <Transformation height="200" crop="scale" />
</Image>

Vue.js:

<cld-image publicId="sample.jpg" >
  <cld-transformation height="200" crop="scale" />
</cld-image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation height="200" crop="scale">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Height(200).Crop("scale")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().height(200).crop("scale")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setHeight(200).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)

Here, Cloudinary maintains the aspect ratio but resizes the image to the height and width you specified.

URL Ruby PHP v1 PHP v2 Python Node.js Java JS jQuery React Vue.js Angular .NET Android iOS All

URL:

https://res.cloudinary.com/demo/image/upload/w_200,h_100/sample.jpg

Ruby:

cl_image_tag("sample.jpg", :width=>200, :height=>100, :crop=>"scale")

PHP v1:

cl_image_tag("sample.jpg", array("width"=>200, "height"=>100, "crop"=>"scale"))

PHP v2:

(new ImageTag('sample.jpg'))
  ->resize(Resize::scale()->width(200)->height(100));

Python:

CloudinaryImage("sample.jpg").image(width=200, height=100, crop="scale")

Node.js:

cloudinary.image("sample.jpg", {width: 200, height: 100, crop: "scale"})

Java:

cloudinary.url().transformation(new Transformation().width(200).height(100).crop("scale")).imageTag("sample.jpg");

JS:

cloudinary.imageTag('sample.jpg', {width: 200, height: 100, crop: "scale"}).toHtml();

jQuery:

$.cloudinary.image("sample.jpg", {width: 200, height: 100, crop: "scale"})

React:

<Image publicId="sample.jpg" >
  <Transformation width="200" height="100" crop="scale" />
</Image>

Vue.js:

<cld-image publicId="sample.jpg" >
  <cld-transformation width="200" height="100" crop="scale" />
</cld-image>

Angular:

<cl-image public-id="sample.jpg" >
  <cl-transformation width="200" height="100" crop="scale">
  </cl-transformation>
</cl-image>

.NET:

cloudinary.Api.UrlImgUp.Transform(new Transformation().Width(200).Height(100).Crop("scale")).BuildImageTag("sample.jpg")

Android:

MediaManager.get().url().transformation(new Transformation().width(200).height(100).crop("scale")).generate("sample.jpg");

iOS:

imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setWidth(200).setHeight(100).setCrop("scale")).generate("sample.jpg")!, cloudinary: cloudinary)

Cloudinary supports many image-cropping modes: scale, fit, mfit, fill, lfill, limit, pad, lpad, mpad, crop, thumb, imagga_crop, and imagga_scale.

Conclusion

Properly optimizing and caching images is a crucial step for 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.

Want to Learn More About Compressing And Optimizing Images?

Recent Blog Posts

How to Prepare for Core Web Vitals by Optimizing Rich Media

By Mickey Aharony Apr 28, 2021

Optimize Media to Get Ready for Google’s Core Web Vitals

For years, Google has been updating its search algorithm to prioritize end-user experience, displaying the most relevant and helpful content at the top of search results. The latest—and maybe the most significant—update so far is Core Web Vitals (CWVs), which are new metrics announced a year ago that will, starting in June, begin determining search rankings. With this update, Google is being abundantly clear that visual experience of webpages is paramount.

By Prosper Otemuyiwa Apr 26, 2021

Compressing, Resizing, and Optimizing Videos in Laravel

Videos are large media files—in most cases, at least four times larger than images—and are often created for ads, marketing campaigns, and instructional content to convey as much information as possible in a short time. Ensuring that videos do not buffer all the time and that the user’s data is protected from rapid consumption due to heavy page weight must be the modus operandi for all website builders and e-business owners.

By Jason Khoury Apr 21, 2021

Five Ways to Effectively Manage Online Media

The digital economy is driven by highly visual experiences. After all, viewers process images 60,000 times faster than text. Therefore, it’s no surprise that top-notch visual media has been an essential component of a captivating e-commerce experience for years. Nor is it surprising that visual media’s importance only rose during the COVID-19 pandemic, a reality for all retailers, including our client Levi’s.

By Rebecca Peltz Apr 19, 2021

Creating an API With Python Flask to Upload Files to Cloudinary

Code

Cloudinary offers SDKs for many programming languages and frameworks. Even though it also offers an Upload API endpoint for both back-end and front-end code, most developers find the SDKs very helpful. If you're working with a powerful back-end framework like Python Flask, you'll be happy to hear that a Python SDK is now available.
This tutorial walks you through the process of building an API to upload images to Cloudinary. You can also upload other file types, including video and even nonmedia files, with the API.

By Meir Feinberg Apr 15, 2021

How to Use the Cloudinary Media Editor Widget

At Cloudinary, we manage the entire pipeline of media assets for thousands of customers of varying sizes from numerous verticals.

As part of our commitment to support the entire flow of media assets, we are now introducing an intuitive media editing widget: an out-of-the-box, interactive UI providing your users with a set of common image editing actions for immediate use on your website or web app. The widget is interactive and simple, built on Cloudinary's transformation capabilities, and requiring only a few lines of code to integrate. Afterwards, you can seamlessly and effortlessly add content to your site or app with no need for in-house image editing capabilities.

From Novel Concept to Natural Shopping Habit: How Shoppable Video is Gaining Ground in E-Commerce

By Amit Erental Apr 14, 2021

Shoppable Video Is Becoming Popular in E-Commerce

As pandemic restrictions necessitated, many shopping trips in 2020 took place outside the traditional brick-and-mortar store, or at least void of the physical aisle-browsing experience. Same-day curbside pickup became a safe and convenient alternative, and e-commerce transactions skyrocketed as consumers shopped online. In fact, Digital Commerce 360 estimates that, compared to 2019, e-commerce transactions grew by more than 40% last year.