Best practices for web images
With advent of quality digital camera, it is easier to get a single image of extremely large size. If the resources supplied by the client is used in the web page, it will be extremely slow to load affecting user experience. Images can be optimized by using proper APP. Image file size can also be reduced using either a plugin or script.
1. The image size, length by width in pixel, must be reduced to suit the page layout maintaining its aspect ratio. It is easier for programmers to reduce the image size with css. Instead, the image size should be reduced using Photoshop or other suitable programs according to the page layout. This way there will be no need to further compress the image before the page is displayed on the client’s device.
2. Create suitable image type that you would like to display on the page
If the image contains transparent area, and would like to maintain the transparency, then use .png format.
If the image is normal image where maintaining transparency is not important, then use .jpg with suitable compression technique.
If you have a small graphics with simple component, you can use SVG format. The image size in HTML will increase rapidly if the image becomes complicated
3. While you finalize image, do not add text on top of it. The text cannot be read by search engine and is poor for SEO purpose.
4. Maintain a library of resources including all the original formats – PSD, PSP, SAI, CPT etc. Reusing existing images from site will not help to create good quality images as each time you edit and save, the quality of image is affected.
5. Do not use simple editing tools like Microsoft Paint shop as it increases file size and will affect image quality.
6. Do not store images in Word document or PowerPoint. After saving a document, spreadsheet, or presentation which contains an image, a loss of image quality such as blur may occur. This issue occurs because PowerPoint, Excel, and Word perform a basic compression of images on save.
7. Use images that expresses the point of interest clearly.
8. Alternative Text – Always use alternative text to define the objective of using the image. Alternative text is descriptive text and helps screen readers read the alt text aloud. Alt text must well-written to reduces ambiguity and improve user experience. It is also helpful to better search your site.
9. Include picture of yourself or your team. This will give face to each activity and project undertaken.
10. Create your own image as publicly available images may not be suitable to define your site goals.