Thread by @metarefresh

This week's thread on #images by
chief @souvikdg. When it comes to #performance images play a big role. (1/11) #ContentWeb

@souvikdg #Images occupy large visual space in most #websites. They are also among the heaviest network payloads. On average, images account for about 50-60% of page weight i.e. bytes transferred to load a #webpage. (2/11) #ContentWeb

@souvikdg Two main aspects of image-related optimizations are:
1. Optimizing #image properties: size (scaling or cropping), format, quality and compression.
2. Optimizing #network/requests – fewer requests (sprites, base64encoded URLs), #CDN, lazy loading, caching, etc. (3/11) #ContentWeb

@souvikdg Main aim of image optimization is to reduce file-sizes. This can be achieved by serving #image dimensions proportionate to the user’s screen size (also known as #responsive images). Images can be further compressed or converted into modern efficient formats like WebP. (4/11)

@souvikdg There are 3 broad implementation strategies to optimize #images:
1. Manual optimization
2. Offline optimization
3. Real-time optimization (5/11) #ContentWeb

@souvikdg In manual optimization, the author generates optimized images using an #image editing tool and then uploads images to the #websites This is okay for a small site that is not updated regularly. But for most medium to large websites, this strategy does not scale. (6/11) #ContentWeb

@souvikdg Offline optimization utilizes a service or script to convert (and optimize) #images to pre-decided sizes. Use shell scripts, #CMS plugins, #AWS Lambda function or third party service like @KrakenIO. Good option so long as #designs don’t change frequently. (7/11) #ContentWeb

@souvikdg @KrakenIO Real-time optimization uses a service that can convert #images on demand. You can setup your own (e.g. @thumbor_io or #AWS Lambda), use a CDN that bundles image optimisation (e.g. Akamai/CloudFlare) or use a third-party service such as @imagekitio (8/11)

@souvikdg @KrakenIO @thumbor_io @ImagekitIo Unlike static sites, a #CMS-driven #website will see a constant flow of new image uploads. Image optimization is not a one-time activity. Instead, adopt a strategy that automates this process to ensure that your website meets high #performance benchmarks. (9/11) #ContentWeb

@souvikdg @KrakenIO @thumbor_io @ImagekitIo Technical strategies only go so far. #Content generation processes are important too. Authors need to provide high quality images to generate optimized versions. Likewise, source images shouldn’t pre-optimize as multiple rounds of optimis\zation can reduce visual quality. (10/11)

@souvikdg @KrakenIO @thumbor_io @ImagekitIo That's all for this thread. Thank you @souvikdg

For more such conversations, tips and tricks, join our Telegram group: t.me/MetaRefresh or follow hasgeek.com/metarefresh (11/11)

Hello @threadreaderapp unroll