Avoid these 9 mistakes when adding images to your website

eCommerce Business

Include photos on your website while developing a strong marketing plan. There is no denying the significance of photographs in the present. Statistics show that articles with photographs get many more views than those uploaded without any. Images make your website more visually appealing and colorful. This post will discuss several typical blunders you should steer clear of while storing photographs on your website. Continue reading to learn more.

Reduce the image size

On their laptops or desktop PCs, most visitors load at most three seconds for the photos. Additionally, people use their cell phones within 5 seconds. Therefore, if it takes your photographs more than 5 seconds to load on these devices, you risk losing a lot of potential clients.

Therefore, you must minimize the size of the photographs to a maximum of 700KB. Images will load significantly more quickly; as a result, regardless of the device customers are using.

Rename the files

Remember to underestimate the significance of renaming your files. Using the default name for your photographs is not a smart idea. If you’re concerned about SEO, include your main keywords in the titles of the pictures.

In addition, for proper SEO, you could compose a description and incorporate your main keywords. Search engine crawlers won’t index your photographs in the database if you don’t use this technique.

Add descriptions

Remember to take alt tags into account, just like with photographs. They serve mostly as text-based substitutes for images. Make sure to provide an interesting description if you want your websites to rank higher in popular search engines.

All of the photographs should include English descriptions. Additionally, avoid the error of stuffing your content with too many keywords or phrases, which can lower your search engine ranks.

Use the right file extension

Make sure the appropriate picture files are present on your website. You may now produce photos in various formats to suit your needs. However, JPG, JPEG, and PNG are currently the most used extensions. If you want your photographs to retain their quality no matter how often you alter and save them, the PNG is the best option.

Don’t use distorted images

Another frequent issue you could encounter while altering photographs is image distortion. Inspect your photographs to make sure they are balanced. Always use the original copy of the desired photographs when editing them. When using Photoshop, you may compare several photo versions using the preview tool.

There are various ramifications for pictures when using responsive design frameworks. It is crucial to control how pictures appear across devices due to the size, shape, and orientation variations between devices.

Planning for Multiple Device Sizes

One of the most popular strategies is utilizing media queries to account for these device-specific changes. The CSS makes it possible to apply appropriate styles to pictures dependent on screen size and ensures that images render correctly without “breaking” the design.

Use media queries for responsive frameworks and check image rendering across many devices as a solution.

Forgetting to Crop

Both employing large files and using full-frame graphics that are not shown on screen might cause a website to load slowly. Through the creation of a clear focal point that might not be present in a full-frame image, cropping aids in showcasing the images you want people to see.

A lack of picture cropping can also result in a stack of static images with identical shapes and aspect ratios. A website’s aesthetic appeal can be increased by using photos with varied cropping and intriguing forms. To ensure that each image displays as desired, crop photographs to the proper size or dimension before posting.


Ignoring Retina Screens

Not so long ago, all you needed for a website was a basic picture 600 pixels wide and 72 pixels per inch. However, displays are developing at such a rate that this is no longer the case.

Depending on your framework, every image may contain many images stored for various screen sizes and resolutions, even retina screens. (The resolution of retina displays might vary depending on the device, although they have a far greater resolution than traditional screens.)

Include media queries and files designed particularly for retina devices as a solution. (CSS-Tricks may be useful.)

Overused or Generic Art

Although stock photography might be a terrific short-term solution, it can also have unforeseen effects. Photos with a general aesthetic or those utilized on only a few websites won’t help develop a connection with visitors. (Does your website not want to resemble every other website on the internet?)

If you want to use stock photos, think about choosing pictures you can alter or manipulate creatively. Avoid visuals that resemble things you have seen elsewhere (check out the images for all competitors or similar sites).

Consider paying a photographer to produce stunning image files, especially for your website. Include images appropriate for your site and reflect your business or brand.


One of the most enjoyable aspects of the design process might be choosing and producing the pictures for a website project. Ensure your site functions properly and contains visuals that captivate viewers by being careful with every image and pixel.