Optimize Image Sizes Using Titan CMS

Optimize Image Sizes Using Titan CMS

Choosing the perfect images for your website is half the battle. The other half involves optimizing those images to give users the best possible experience. They hate waiting for images to load or, worse, encountering broken images.

Titan CMS makes managing your images easy and helps you win the optimization battle.

Images and impact, your biggest asset

Aesthetically pleasing visual design and compelling photography lead to happy users, return visits to your site, and conversions. Visual design and imagery correlate directly to your brand impression and credibility. Website imagery should be specific to your brand and products – avoid those generic stock photos -- visually appealing and of good quality.

Images and page speed, your biggest threat

High-quality images bring obvious benefits, but large, uncompressed images slow down the loading of your site and degrade user experience and brand impression. The trick is to find the sweet spot between the two competing interests. Titan CMS helps with that.

Image optimization is paramount

Image optimization must be a conscious component of your web content workflow, but there is no single correct way to optimize images. Optimization factors include file type, compression, pixel dimension, quality, content of encoded data and vector vs raster, among others.

Optimization and file types: Where to begin

The best practice for image compression when uploading photographs into Titan CMS is to save/export as .jpg (.jpeg) files with the longer edge (either height or width) greater than 640 pixels and less than 2000 pixels. If you don’t have access to Adobe Photoshop, many online tools, some of them free, are available for image compression.

With Photoshop, we recommend that you save/export your images to be web optimized at 60-80% quality. Choosing to minimize the included metadata (see below) will also be beneficial. You can exercise this option only when you choose “Save for Web,” rather than “Export As,” for your images in Photoshop. If your web design calls for full-screen images, you should have guidelines in your digital style guide (typically built within Titan CMS) recommending specific sizes custom to your site, perhaps 1600-2000 pixels wide.

Photoshop Save Screen

Titan CMS will automatically create multiple image versions at various sizes on upload. Titan CMS uses the longest edge (height or width) and keeps the original aspect ratio. A photo uploaded at 1280 x 400px will have a “Large” size in Titan CMS of 640 x 200px. If you input a square image at 1200 x 1200px, the “Large” size in Titan CMS will be 640 x 640px. If an image is uploaded smaller than 640px on its longer edge, the system is unable to create a “Large” size, but it will create any sizes smaller than the original image. The exception to the rule of maintaining aspect ratio is the “Thumbnail” size. Titan CMS will automatically crop, from the top left, any image into a square.


Image Sizes Example
Not actual size.

Titan default images sizes:

Large = 640px (original aspect ratio maintained)

Medium = 320px (original aspect ratio maintained)

Small = 160px (original aspect ratio maintained)

Thumbnail = 80x80px (cropped from the top left if necessary)

It is possible to change or add to the default image sizes that Titan CMS creates when an image is uploaded within your admin panel.

Next steps, image selection in content creation

As you build a page in Titan and add content, remember to choose the smallest version of your image necessary to fill the spot where it will display. Refrain from forcing your end user to load an image file larger than required. Keep in mind that as your content stacks on mobile devices, a tablet may require a larger image than a desktop.


Originally Published: Wed, December 07, 2016