Best Practices for Image Web Formatting

#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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store