ENHANCE USER EXPERIENCE
Images capture the attention of the visitor and can convey complex messages in the blink of an eye.Relevant images – instead of “filler” images that only have the purpose to look pretty – enhance the user experience. They deliver a contextual message, which answers the need for information. Naturally, when guests visit the website of a hotel, they are looking for information and images deliver it quickly and explicitly. An image gallery optimized for stress-free browsing is another UX plus.
INCREASE DWELL TIME
The time users spend on a website is a user engagement signal for Google and a search ranking factor.IMPROVE ON-SITE SEO
Provided that the image used matches the text, it will rank better in the image search section of the search engines.Image recognition algorithms identify filler images, as well as stock photography, and they will not rank. To see how Google recognizes your image without the need for text, just perform a Google image search and upload a picture instead of typing keywords.
Optimizing web images is a process of delivering high-quality images in the right format, dimension, size, and resolution while keeping the smallest possible size.
Uploading huge images to your website causes it to slow down when those images are viewed by your visitors.
The solution is to learn how to optimise (trim images down to size) before you upload them and to find the balance between the lowest file size and an acceptable quality.
This is the “weight” of the file measured in Kilobytes KB or Megabytes MB.
Optimum size should be less than 100kb.
This is the physical size of the image, ie. the width and height in pixels.
For most websites, make sure your file is no wider than the width of your webpage.
Recommended image size for web content
- Blog posts: 1200 x 630px
- Page Title background 1200 by 250px
- Hero images (full screen images): 2880 x 1500px
- Landscape feature image: 900 x 1200px
- Portrait feature image: 1200 x 900px
- Fullscreen slideshow: 2800 x 1500px
- Gallery images: 1500px x auto width
- Website background image 1920 x 1080px
- Click here to find out the resolution of your screen
We use compression to reduce file sizes. It makes it easier to store, stream and download videos, audio and other digital assets. There are two types of compression: lossy (irreversible) and lossless (reversible). Lossy compression means removing data to reduce the file size while lossless compression shrinks the whole file, keeping all of the quality. With lossless compression, files can be restored back to their original state. With lossy compression, once you’ve removed the data, it’s gone for good. The amount of data reduction possible using lossy compression is much higher than through lossless techniques.
Images are either vectors or bitmaps. Bitmap images are made out of small parts called pixels. Vector images are made using coordinates and geometry. Images can be compressed to reduce file size.
Graphics on a screen are made up of tiny blocks called pixels. The more pixels on the screen, the higher the resolution and the better the quality of the picture will be. The higher the image resolution, the more memory is needed to store the graphic.
Bitmap images are widely used on digital cameras, smartphones and online. Common bitmap image file types include JPEG, GIF and PNG. Bitmaps are also known as pixelmaps or raster graphics.
Bitmap images are organised as a grid of coloured squares called pixels (short for ‘picture elements’). When zooming in or enlarging a bitmap image, the pixels are stretched and made into larger blocks. This is why bitmap images appear as poor quality when enlarged too much.
A vector image uses scalable shapes such as straight lines and curves, using coordinates and geometry to precisely define the parts of the image. It is more efficient than bitmaps at storing large areas of the same colour because it does not need to store every pixel as a bitmap does.
Vector graphics can be scaled without losing resolution. They can be enlarged or reduced in size – but the file size will stay almost exactly the same.
When a monitor displays a vector image it is rasterised – converted into a grid of pixels. Regardless of the file type, an image will always be outputted onto a screen in pixels.
Using the wrong file format can affect the way images appear on your website and may determine whether users can, in fact, see those images. As well as this, incorrect file formats can have a negative effect on your page speed.
JPEG – use for photos as they are capable of containing over 16 million different colours. JPEG uses lossy compression hence they lose a lot of information when saved potentially making text or lines blurry in the process. This format doesn’t support transparency.
PNG – use for graphics and text. Supports transparency and uses a lossless compression, meaning they don’t lose any information or quality.
GIF – can hold both text and transparent backgrounds and are perfect for creating banners that hold text on top of colours or images. GIF compresses images to a maximum 8-bit colour depth, making it unsuitable for high-quality photographs. GIF is often used where transparency is needed on the graphic. GIF can also be used to store simple animated images.
SVG – use for logos, drawings and line art. With SVGs, you can create full-resolution images that will look good on any screen size, zoom level or resolution, which makes these great for graphics that can be viewed on all devices such as desktop, tablets and mobile phones. Since SVG files are XML-based, they are vulnerable to External Entity attacks, among other risks, so they are not LPWebs preferred choice.
There are various different plugins you can install on your website which will automatically optimise every image you load.
If you prefer to manually prepare them by cropping and resizing them yourself, there are plenty of free image editing programs available to try:
- Ribbet (for Mac)
- FastStone or PIXresizer (for Widows)
- Canva (browser-based)
If you want to use more advanced editing tools, Photoshop is excellent, but it might be a bit of an overkill if all you want to do is resize images for the web!
YES! Uploading huge images to your website causes it to slow down when those images are viewed by your visitors.
For example, images from digital cameras or from stock photo libraries can be very large, both in dimensions and ‘weight’. 4,000 px wide is not uncommon, and the file size can be from 4Mb to 10Mb and beyond.
Clearly these images are far wider than most monitors can display, and the ‘weight’ would cause delays while the large files download.
Once you’ve formatted your images for better performance and followed best practices, your site will be better liked by search engines, browsers, and networks, and will load faster for your readers!
