Properly resizing and compressing images makes web pages load faster and look better. Using optimized images can be the difference in a 1 minute load time and a 5 second load time for a web page.
Aspect Ratio
Be careful not to squish or stretch images out of proportion. Use an image resizing tool that keeps the aspect ratio locked to ensure that your images don't end up looking distorted like the reflections from a carnival mirror.
Compression
Aim for a JPEG quality between 75 and 90 percent to avoid large file sizes or blurry and blocky images. If your image is over 1 megabyte it most likely needs to be resized or compressed.
Dimensions
Images should be sized for the layout where they are used in order to minimize file size. A good rule of thumb is to use 1920px for hero header images and a maximum of 1600px wide for images in the content area.
Alt Text
The description box in T4 should be filled in, providing a short summary describing the image. The alt tag is the auditory representation heard by users of screen readers as they navigate the page, specifically when encountering an image.
Image Dimensions
The recommended image dimensions are approximate due to the responsive, flexible nature of of the website template. Different window sizes, screen pixel densities and different devices will display images at various sizes. Below are recommend widths for images relative to the content area of the page. Choose a width that corresponds with how the image is used in your page layout and use that width value to scale or resize your image. So for an image that fills the full content area use a width of 1600px. For an image that fills approximately half of the content area use 800px.
Resizing Tools
Image resizing and optimization are crucial for improving website performance and user experience. Tools like Croppola, BeFunky, and ImageResizer offer efficient solutions for resizing images while maintaining quality and reducing file sizes, ensuring that websites load quickly and display properly across various devices.