Images on your website do so much more than paint a picture. Effectively used, images can help drive more visitors to your website, promote social sharing and ultimately help drive business goals such as sales.
Image file types
JPEG and PNG are popular web file types. There are pros and cons of each, but you can use our suggestions below.
JPEG: Photos are usually saved in this format. JPEGs usually result in a smaller file size. Using JPEGs, you won’t end up with the enormous file and can optimize them further with tinyjpg.com.
PNG: Graphics, such as illustrations and icons should be saved as PNGs. PNGs are higher quality than JPEGs, but usually result in a larger file size. PNGs also support transparent backgrounds which is useful for icons and logos. You are also able to optimize PNGs with tinypng.com.
Webp: WebP is an image format to support lossless compression for images on the web. WebP images are 26% smaller in size compared to PNGs, and 25-34% smaller than comparable JPEG images. The Mono Editor automatically converts images to WebP, when you publish your sites. Please note that this only applies to images added after the 28 August 2023.
Optimizing images
It is key to optimize your images for page speed and appearance. Finding the right balance between size and resolution is the goal. The higher your resolution, the larger the file size will be. Large size, high resolution images can slow down your website’s page speed. This hurts the users’ experience and search engine ranking. Large images and slow load times are especially annoying for mobile visitors.
If you are using Adobe Photoshop CC or any similar program you will have the option to 'Save for Web'. In the example above, the original image file size was 4.88MB (much too large for the web). By using the keyboard shortcut: ctrl + alt + shift + s (Win) or cmd + opt + shift + s (Mac), you can use the 'Save for Web' option to dial in the compression and file size desired. While typically 60% - 70% compression is ideal, you will need to evaluate this setting per image.
As you compress the image more, the file size shrinks and the image becomes more pixelated and blurry. Dialing in this setting is key to getting your images saved to perform efficiently on your website.
Image placement
Choose images that relate to your content. Images that are surrounded by relevant information and have proper tags will rank better.
Avoid stock photo cliches. If your website is about dentistry, you won’t get any SEO boost from having an image of a tooth brush. Photos of dentists and their patients will be more attractive for readers and more relevant to your subject matter. In the example below, the better image is showing the viewer that the dental practice is kid-friendly while the poor image really tells nothing to the viewer.
Image cropping and sizing
The layout of your website will look and function better if you use a consistent style and size of image. Consistency in image size or aspect ratio will help in lining up your text, columns, and other elements on your page.
Hover effects
Hover effects are a simple way of adding a design element that makes your website more interactive. The hover effect will add an overlay to your image when a user hovers over it with their cursor. Hover effects can be added to images, galleries, blog posts and products in your web shop.
Hover with caption text enabled
Hover with icon enabled