As website designers, we want to find the balance between the best possible image, with the smallest file size. This is what we call image optimization.
We want optimized images because:
- It improves page loading speed
- It improves the user experience
- It improves SEO
- It doesn’t require any development skills
Two steps of optimization
- Resize
- Reduce file size by compressing
Resize
The size will depend on how I will use the image on the website.
- 1200 pixels when my image goes all the way across the screen, like a hero image, for example.
- 800 pixels if my image will only be used in half of the page
- 600 pixels if the image will cover one third of the page
- 400 pixels if the image will be a small thumbnail, like in testimonials.
Compressing
An image has thousand of colors, not all of them distinguishable by our eyes, and even less in small screens such as smart phones. We can reduce the file size of an image by reducing the number of colors in the image. This is still complicated for me to understand but I use a free tool called tiny png.
The process is very simple.
- You drop the files into the compressing box
- The image compresses in a few seconds
- you download the image back into your computer
- You upload the image into your blog or page.
Other Back-end setting posts
