Best Practices for Image Web Formatting
Guide on how to optimize images for faster performance of the website and higher SEO ranking on search in an easy 4 steps.
#1: The Best Image Format for Web
WEBP, JPG, or PNG:
If the priority is to speed up the website: WebP.
If the choice is between JPG and PNG
For photos better choose JPG and for logos — PNG which also allows transparency.
CMYK vs RGB:
Color mode RGB is primarily used for Web when CMYK is for print. Images saved in the RGB format would be the best optimized for your site.
PPI:
Resolution of the image for a digital implementation measured by PPI (pixels per inch). The value would depend on the parameters of the image and usage on the page.
#2: Compress Images for Faster Load Speed of the pages
On average a visitor spends 4–8 seconds waiting for the page to load before exiting.
An image should not be larger than 1MB ( refer to the optimizers at the bottom of the article).
#3: Rename Files to Improve Search Results
Proper titling of the file can improve its appearance on search results and as a result, direct more traffic to the site.
Basic rules:
Do not use odd characters like ”!”, ”?”, ”%”, ”#” ”å”, ”ä”, ”ö”
The title should be 75–110 symbols.
Use dashes “-” instead of underscores “_”
Example: “levis-solid-crew-2-pack-sweatshirt-white.jpg”
#4: Alternative text
Don’t miss the opportunity to include the alternative text on every image you upload. Alternative text recognized by Google and other search engines is the same as meta description and image title and can help rank the page on general search list and to rank the image on the image search based on the words used in the alternative text and in the title as well as by the image object recognition.
Hero Image Formatting
The ideal size of a full-screen hero image is 1200 pixels wide with a 16:9 aspect ratio.
For a banner hero image, the size would be 1600 x 500 pixels.
For the best quality size the width up to 1800 pixels.
Test your website here:
https://www.seoptimer.com/ — three times a day free
Optimize / reformat your images here:
https://tinypng.com/
