Including images in content often involves a choice between quality and size, that is, between the pixel size of the image, eg: 1024px x 760px and the size of the file, eg: 120Kb. The more pixels there are in the image, the larger the file size. By resizing an image on upload, you can reduce its overall file size.
JCE Pro includes a number of upload options for resizing images, as well as reducing the file size of uploaded images.
Resizing images on upload
The simplest optimization technique is to reduce the dimensions of the image. Your camera may be able to capture high resolution images of 4000px by 3000px but images of this size are almost never appropriate for websites.
When uploading images in the File Browser, Image Manager Extended or File Manager, resizing the images is as easy as enabling the Resize option, and setting a width and/or height. In the example below, an image of 4032px by 3024px is resized to 1024px by 768px, reducing the file size of the image from 8.4Mb to 767.68 Kb.
Resizing can be done on more than one uploaded image at a time, and individual images can have different resize options. See Uploading and resizing multiple images.
Reducing file size by setting the image quality
The file size of the image can be further reduced by lowering the Resize Quality of the image. This is a percentage value and represents the amount of compression applied to the image when it is saved, and can be set in Editor Profiles -> Editor Parameters -> Filesystem.
The same image, resized to 1024px by 768px, with the Resize Quality set to 80%, now results in a file size of 126.36Kb, with little or no noticeable loss in quality.
Removing EXIF data
When you take a photo with your camera or phone, information about the device and the image are stored in a special metadata format within the image, called EXIF data. This metadata might contain general information about the image, such as the image dimensions, file size, format etc. as well as information about the device it was taken on, such as the make and model, exposure time, f-stop etc. The EXIF data for the image above contains a lot of information!
File Name : beach.jpg
Directory : .
File Size : 8.0 MB
File Permissions : rw-r--r--
File Type : JPEG
File Type Extension : jpg
MIME Type : image/jpeg
JFIF Version : 1.01
Exif Byte Order : Big-endian (Motorola, MM)
Make : Apple
Camera Model Name : iPhone SE
Orientation : Horizontal (normal)
X Resolution : 72
Y Resolution : 72
Resolution Unit : inches
Software : Photos 3.0
Modify Date : 2018:04:20 13:22:00
Exposure Time : 1/3205
F Number : 2.2
Exposure Program : Program AE
ISO : 25
Exif Version : 0221
Date/Time Original : 2018:04:20 13:22:00
Create Date : 2018:04:20 13:22:00
Components Configuration : Y, Cb, Cr, -
Shutter Speed Value : 1/3205
Aperture Value : 2.2
Brightness Value : 11.51316132
Exposure Compensation : 0
Metering Mode : Multi-segment
Flash : Off, Did not fire
Focal Length : 4.2 mm
Subject Area : 2015 1511 2217 1330
Run Time Flags : Valid
Run Time Value : 218157691899166
Run Time Scale : 1000000000
Run Time Epoch : 0
Acceleration Vector : 0.9851924975 -0.006573300676 0.0127389264
Sub Sec Time Original : 465
Sub Sec Time Digitized : 465
Flashpix Version : 0100
Color Space : sRGB
Exif Image Width : 4032
Exif Image Height : 3024
Sensing Method : One-chip color area
Scene Type : Directly photographed
Exposure Mode : Auto
White Balance : Auto
Focal Length In 35mm Format : 29 mm
Scene Capture Type : Standard
Lens Info : 4.15mm f/2.2
Lens Make : Apple
Lens Model : iPhone SE back camera 4.15mm f/2.2
XMP Toolkit : XMP Core 5.4.0
Creator Tool : Photos 3.0
Date Created : 2018:04:20 13:22:00
Current IPTC Digest : d41d8cd98f00b204e9800998ecf8427e
IPTC Digest : d41d8cd98f00b204e9800998ecf8427e
Image Width : 4032
Image Height : 3024
Encoding Process : Baseline DCT, Huffman coding
Bits Per Sample : 8
Color Components : 3
Y Cb Cr Sub Sampling : YCbCr4:4:4 (1 1)
Aperture : 2.2
Image Size : 4032x3024
Megapixels : 12.2
Run Time Since Power Up : 2 days 12:35:57
Scale Factor To 35 mm Equivalent: 7.0
Shutter Speed : 1/3205
Create Date : 2018:04:20 13:22:00.465
Date/Time Original : 2018:04:20 13:22:00.465
Circle Of Confusion : 0.004 mm
Field Of View : 63.7 deg
Focal Length : 4.2 mm (35 mm equivalent: 29.0 mm)
Hyperfocal Distance : 1.82 m
Light Value : 15.9
In addition, if the setting is enabled on your device, the GPS location of where the image was taken will also be stored in the EXIF data!
The GPS location recorded in a photo taken at the Acropolis in Athens, Greece:
GPS Latitude : 37 deg 59' 1.37" N
GPS Longitude : 23 deg 43' 45.52" E
GPS Position : 37 deg 59' 1.37" N, 23 deg 43' 45.52" E
Of course, recording this information can be useful in some cases, but it need not be shared with the world when you upload the image to your site.
This data can add up to 64Kb to the image size, and in some cases where a thumbnail of the image is stored in the EXIF data, much more. Removing this data can therefore reduce the size of the image, and perhaps more importantly, remove information that you might prefer not to share with everyone.
The Remove Image EXIF Data option can be enabled in Editor Profiles -> Editor Parameters -> Filesystem and is disabled by default.
With the Remove Image EXIF Data option enabled, the EXIF data of the image is reduced to the much shorter list below, with a 4Kb reduction in file size.
File Name : beach.jpg
Directory : .
File Size : 122 kB
File Permissions : rw-r--r--
File Type : JPEG
File Type Extension : jpg
MIME Type : image/jpeg
JFIF Version : 1.01
Resolution Unit : inches
X Resolution : 72
Y Resolution : 72
Image Width : 1024
Image Height : 768
Encoding Process : Baseline DCT, Huffman coding
Bits Per Sample : 8
Color Components : 3
Y Cb Cr Sub Sampling : YCbCr4:4:4 (1 1)
Image Size : 1024x768
Megapixels : 0.786
Image processing on your server is usually done by one of two PHP extensions - GD2 or IMagick. The latter is preferred, as it is more efficient, consumes less memory and is therefore better at processing large images. GD2 will always remove EXIF data from a resized image, regardless of the Remove EXIF Data option. You can check if IMagick is available on your site in System -> System Information -> PHP Information. Speak to your host if you do not see it listed.
These features, and many more, are available with a JCE Pro Subscription.