CDN Images

🙋Get Help
1

Hello,
my client doesn’t want to use jetpack for images, what can I propose him instead?

2

Hello @alexaspalato

You can offload WordPress images to amazon s3 and serve via amazon CloudFront with the help of this plugin WP OFFLOAD MEDIA [https://wordpress.org/plugins/amazon-s3-and-cloudfront/] for already uploaded images you need purchase premium plan depending upon how much images you want to offload [https://deliciousbrains.com/wp-offload-media/pricing/].

for .webp support, you can generate only .webp images using EWWW image optimizer plugin and it really works well with WP OFFLOAD MEDIA then you can create aws lambda function to serve .webp images using HTTP content negotiation here is the code for aws lambda viewer request function

'use strict';

const {
    ValueTuple,
    awsPerformEncodingNegotiation,
    awsPerformTypeNegotiation } = require('./webp');

const SERVER_ENCODINGS = [
    new ValueTuple('br', new Map([['q', 1]])),
    new ValueTuple('gzip', new Map([['q', 0.9]])),
    new ValueTuple('identity', new Map([['q', 0.1]]))];

const SERVER_IMAGE_TYPES = [
    new ValueTuple('image/webp', new Map([['q', 1]])),
    new ValueTuple('image/jpeg', new Map([['q', 0.5]]))];

const SERVER_IMAGE_WHITELIST = new Set([
    'image/jpeg',
]);

exports.handler = (event, context, callback) => {
    const request = event.Records[0].cf.request;

    if (request.uri.endsWith('.jpg')) {
        const type = awsPerformTypeNegotiation(
            request.headers, SERVER_IMAGE_TYPES, SERVER_IMAGE_WHITELIST);
        if (type) {
            // const uriWithoutExtension = request.uri.slice(0, -3);
            switch (type.value) {
                case 'image/webp':
                    request.uri = request.uri + '.webp';
                    break;

                case 'image/jpeg':
                    // Nothing to do
                    break;
            }
        }
    } else if (!request.uri.startsWith('/gzip/') &&
            !request.uri.startsWith('/br/')) {
        const encoding = awsPerformEncodingNegotiation(request.headers, SERVER_ENCODINGS);
        if (encoding && encoding.value !== 'identity') {
            request.uri = '/' + encoding.value + request.uri;
        }
    }

    callback(null, request);
};
1 Like
3

Thank you, will look that