A recent Etsy internal research reported that 90% of its shoppers said images were vital to why they buy an item. By comparison:
- 83% said price influences a purchase decision.
- 73% said product reviews impact a purchase decision.
This is why images on a website that look blurry will influence shoppers to take their money elsewhere. Defective images also negatively impact a brand’s overall SEO rankings.
Deloitte found that 7 in 10 consumers said slow page speed impacts their willingness to buy High-quality images that load quickly are essential to sales success, Here are three ways to improve site performance.
When thinking about image performance, developers first decide between lossy and lossless compression. The differences are:
- Lossy optimization.Lossy compression sacrifices some data and image quality for faster load times. Lossy optimization is ideal for web images because it greatly reduces file sizes by trimming non-essential details.
- Lossless optimization. Lossless compression renders an image, ensuring it retains its quality during the compression process. File sizes end up larger than lossy files without sacrificing image quality.
For better-performing websites, developers want to decide between lossy and lossless optimization and what fits the image’s purpose.
Be it a photo or a logo, specific visual assets perform better with different file formats. Developers should select the right one for their images. Options include:
- JPEG. Ideal for photographs or detailed images, the JPEG format possesses lossy compression and significantly reduces file size by eliminating image data that is undetectable to the human eye.
- JPEG XL. Compared to the original JPEG format, JPEG XL delivers sharper-looking images, a more effective use of bandwidth and storage, and a better user experience when browsing the web.
- PNG. Another image format for photographs, the PNG format is better for images with transparent backgrounds or graphics with a sharp contrast or a limited color palette. Even though PNG files are generally bulkier than JPEGs, they compensate for it with their lossless compression.
- WebP. A format introduced by Google, WebP has excellent compression capabilities in its lossy and lossless variants. The format is widely supported by many modern browsers, leading to noticeably reduced file sizes without sacrificing image quality.
- SVG. For vector graphics, especially logos and icons, SVG is the go-to format. Being XML-based, graphics can maintain their sharpness irrespective of their scale.
With the right format assigned to the right visual, site performance should run smoothly and enhance the site’s Core Web Vitals.
Cloudinary’s end-to-end media management solution automatically optimizes an image’s format and dimensions while maintaining high quality and using less bandwidth.
When it comes to file dimensions and size, a photo with more pixels and a larger file size is going to look better, but site performance will suffer.
Here are three ways file sizes can be modified to improve performance:
- Resize before uploading. If a webpage displays an image at 500×500 pixels, don’t upload a 2000×2000 pixel image. Resize it to the exact display dimensions.
- Adjust quality settings. When editing, developers can adjust the quality of an image at the time of saving it, and reducing a JPEG’s quality to 80% can cut its size in half without noticeable quality loss.
- Use dots-per-inch (DPI). A higher DPI is key to maintaining a quality print of an image, but it’s not necessary for the web. For ample usage online, 72 DPI does the job.
Cloudinary’s image platform automates image size without compromising overall quality.
Developers can rely on Cloudinary’s image optimization to automatically manage image requirements and boost site performance. Save developers’ time formatting and editing images to ensure images run optimally. Try Cloudinary for free today.
