There are a few things to know when handling images in Content Management Systems (CMS). Are you set to become a pro CMS editor? Then please read on:
Image size
We get it – you would like to have high quality images / photos everywhere on your website! We do, too! However bigger is not always better. It’s also important to optimize for page speed (see here why pagespeed matters). This means that the file size of our pictures should be as small as possible, while, of course, keeping the image quality on a satisfactory level.
Here is how!
Compress your Image
Some CMS compress images automatically when you upload it – but often the built-in image compression is not what it could be. On top of that, many CMS will keep the original image anyway “for the record”, using up unnecessary disk space.
It’s therefore recommendable to first upload your images to a tool such as https://www.iloveimg.com/compress-image – Here you can safely assume that your images are compressed to the max!
Resize your image
Once you compressed your images, you can make your image even smaller by clicking the resize button right where you are!
These days, images are best resized to either width or height at or below 4,000px (the most recent TV screens are called Ultra HD and have a 4K image resolution (3,840 x 2,160 pixels) and the most recent Macbook Air (3rd gen) has a screen resolution of 2,560 x 1,600 pixel.
If you know that your image won’t cover the full screen, you can resize it to something even smaller, for example max 500px (either width or height).
Image naming
Now you have a perfectly optimized image! Even though some CMS allow you to change the file name later on, the original file name will still be stored and will linger around! It is therefore recommended to give the image a speaking file name before you upload it to the CMS.
Good Example ✅: woman-in-green-dress-pointing-at-screen.jpg
- Try to avoid spaces, use hyphens (the minus character) instead
- try to describe what’s on the picture, not what you use the picture for (bad example: ❌ product-page-first-section.jpg)
- put your image in a folder so it’s easier for you to find it later. Example folder name: Blog Post Header Images
Now you are ready to upload your picture into the CMS! 👏 Well done! 👍
By the way: Responsive Images
Some images are treated in a “smart” way by the CMS, meaning that the CMS adapts the width of the image according to the window width, and keeps the height of the image at an acceptable value according to the device or window width. Sounds like magic? It is!
Please read on about responsive images here: https://blog.typodrive.com/2019/03/09/responsive-images-and-safe-areas/