As has been said many times, a picture is worth a thousand words. When using images on your website, they should be strategically placed, imply the correct message, and be ‘good quality’.
With the advent of high resolution cameras, image files are large both in dimension (pixel dimensions) and file size. While computer monitors may have screen resolutions to accommodate high resolution images, large image files take longer to load ultimately affecting a website’s performance. Therefore, before you upload a file, crop and resize the image to the largest dimensions you will use on the site (i.e., you can reuse the same image at different sizes).
Currently popular image file formats, JPEG and PNG, also compress the file. Compression is a process that reduces the size of the file without affecting image quality. JPEG is the preferred choice for storing photographs and high color-palette images as it responds well to compression while maintaining color integrity. One caveat related to JPEG format is that it cannot be used for a transparent image or background as it is flat (not layered). For line drawings, heavy text-laden art and iconic graphics with no animation, both .GIF and .PNG file formats are used although PNG is preferred. To further compress image files, you can choose a software application like Smush.it that will not only try to reduce the image file size, it will also try to remove unnecessary data from the file such as thumbnail icons and metadata not used when viewing in a browser. For information about optimization using JPEG quality settings, see Image Optimization.
Another consideration is adapting images to responsive design. For mobile devices, images are typically resized or omitted if thought to be superfluous. For a website using a bootstrap framework, a tag can be added to your image html tag so that it scales appropriately (i.e., <imgsrc=”…”class=”img-responsive”alt=”Responsive image”> ). For more information, see Responsive Images in Bootstrap.
Finally, for accessibility and SEO (search engine optimization) purposes, it is critical to include alt tags for all images. What is an alt tag? It is a brief description of the image that includes a primary SEO keyword or phrase and describes the image for those who are vision impaired.
While this is not an exhaustive list, it will provide you with a good foundation when integrating images on your website.