Optimizing Image Scaling Necessary

[paradoxxjm]

The website is heavily image based. We utilize imagery in 95% of the content items throughout the site to complement the content and give color to the story.

However, the images uploaded to the website vary in size (resolution) and currently the website does NOT do a good job of scaling the images to the appropriate container size (legibility) or optimizing image quality for quick web loading (user experience).

A perfect example of this is the current hero image for DevCa. Its a great image, but the resolution is huge. As a result, the majority of the image is not seen on the home page or even on the Initiative page.

This needs to be addressed. We need to

• Decide what are the optimal sizes (dimensions) for images in different content blocks
• What are the implications of the optimal image sizes for what is uploaded to the website and the css manipulation

Cloudinary, which we are currently using to host the images, has a pretty powerful API that allows manipulation of images on the fly. I would investigate this as one option.

The downfall of this is that the free storage tier, which we are currently using for image storage, while great for storing images with a 75,000 image limit, the number of transformations is much less at 7,500 per month. This could be problematic for a site like ours.

By my math Homepage = 15 images Average other content page = 3 images

Last year, we averaged 50 sessions per month, with a high of 200. We had 3 months over 100+ sessions per month. This was for a single page static website with no updated content.

If we have 100 sessions per month (new and returning users) each looking at 4 content pages and one home page average, we're looking at [ 100_15 + 100_3*4 = 2,700 transformations]. I imagine moving forward, that this will be our baseline, with peak months being closer to 500-700. Both of which would break the monthly limit on transformations.

The first tier after the free tier costs $44 per month, which I definitely don't want to have to pay just for images.

Let me know what others think.

References

• Cloudinary Transformation API documentation - http://cloudinary.com/documentation/image_transformations#overview
• Keystone Cloudinary Documentation - http://keystonejs.com/docs/database/#fieldtypes-cloudinaryimage

[paradoxxjm]

So I reached out to Cloudinary on my assumption related to transforms. Apparently, a single transformation that results in a new image. If that modified image is used again, it does NOT count as a new transformation.

This means we are a lot less likely to go over the free limit anytime soon, and I'm more comfortable with building around the service.

Here is the link that explains the calculation. Let me know if you guys interpret it in the same way.

https://support.cloudinary.com/hc/en-us/articles/203125631-How-does-Cloudinary-count-my-plan-s-quotas-and-what-does-every-quota-mean-