Marketpath CMS Developer Tutorial Series

Images

Last Updated 3/6/2018

Every site uses images - most use them prolifically. According to trends tracked by HTTP Archive, the average webpage in 2017 contained 55 images which totaled roughly 1800kB. Understanding how to utilize and optimize images effectively can dramatically contribute to healthy conversion rates and user experiences.

There is no substitute for a developer (or designer, marketer, or other professional) optimizing images manually. If you have the time and ability to do this, go for it.

For the rest of us, there are some features of the CMS that help to automate image optimization - or at least to make it less challenging.

Marketpath has an image editing tool that makes it possible for any user to edit and resize an image - creating a copy or saving over the existing image. Admittedly, the image editor is a little rough around the edges, but it works fairly well.

One of the more helpful features of the image editor is the ability to create image presets - which are simply groups of settings that are easy to apply to edited images in the future and are easy to apply to images in your templates. This gives you control to dynamically resize images "on the fly" so that they are the correct size or aspect ratio. You can even add "special effects" such as alpha transparency, rotation, and more if desired.

Every image in Marketpath CMS is served over a CDN. While this does not make your images better or smaller in filesize it does help them to load faster on your site. You don't have to do anything to make this work, but you should be aware that because of the limitations of the CDN it may take several minutes to replace an image or to re-apply a preset to an image that has already been processed using old settings. Remember that the image may also be saved in your browser cache (or your users browser caches) when you are deciding whether to copy or replace an image or an image preset.

---- End of Lesson ----

Question? Correction?

Let's work together to make our documentation as helpful as possible.

What is your name? 
What is your email address? 
Feedback: