web images

Optimize images for the web

Adding product web images

To optimize image for the web, upload quality  images. For clothing, consider using images that show the front and back of the garment and close-ups of any unique detailing on the garment. You will want to use images with a white background. This will be an image with a transparent background , i.e. a .png file extension. Most consumers will want to zoom into your image for closer inspection. Ensure that your images are not too small, or the image will become blurred as they zoom in.

Bear in mind, that web images that are too large may slow down the time it takes your page to load, which can affect your web traffic. For further image optimization, maximize loading time. Your images should not be larger than 1 MB.

Consider image descriptions and names

Think carefully about your web image names, if you want search engines to index them correctly. Do not name images as numbers, dates, or other characters that do not make sense. For search engine optimization (SEO), you may want to use other keywords rather than the product name.

Your image description could be more generic: Blue Silk Jumper, Large. It does not have to necessarily, match your product description. For example, you have an image for the product: “Brett and Mann Silky Jumper in Blue in Large”. It is unlikely that your potential customers will use this search term, if they do not know the product brand.

If a customer types “blue silk jumper large” into the search engine, your product will show in the main search results as well as the image search results for “Brett and Mann Silky Jumper in Blue.”

Use an Alt description tag

To further optimize images for the web, complete the alt description tag (alternative description) on your shopping cart dashboard, if you are presented with it. The “alt description” is what your website visitor will read if they hover their mouse cursor over the web image. The alt tag description should be user-friendly, so it can be read by the visually-impaired, and human-friendly, so that it can be indexed by Google. It should also include your target keyword.

Making changes to images

You can use Adobe Photoshop, Adobe InDesign, Microsoft Word 2013 (or later versions) to create a transparent background, display ads, logos, and make other image adjustments.

You can try IrfanView. This free graphic viewer is great for quickly resizing images, adding text, and changing an image color scheme.

You can also make simple image edits using the Microsoft Paint application.

Finding stock photos and images

You can get additional photos and web images for your website campaigns by signing up for a stock photo account. ThinkStock, Shutterstock and Adobe Stock, offer a wide range of vector illustrations, photos, videos, and images that won’t dent your budget.

How to make a background transparent

Check the image license for your selected images. You will need to purchase a special license if you want to use stock photos and images to produce merchandise, e.g. mugs, t-shirts, etc.

Add a Hero image

A “Hero” image has replaced the popular carousel or image slider. Some websites still use image sliders. However, they are now considered bad for SEO in terms of page load speed and user experience.

How to optimize images for the web, websites Header Slider - flat design concept.
Image carousel. Also known as a Nivo slider

Going forward, a large static  Hero  image (or Hero video) is the norm. Place it at the top of your page. It should be clickable and link to relevant a page on your website. The image should be eye-catching and high quality.

You can also display seasonal and special offer images by using stock photos, e.g. Cyber Monday and Black Friday, Sale signs, Christmas images, etc. You can add special announcements, for example, the last date to place an order in time for a Christmas delivery.

Social media & sharing icons powered by UltimatelySocial