How to prepare images
This is a guide for web development project clients to provide images in the correct format for submission.
Rename Image File Name
Some systems, like web servers, are case-sensitive. If you post a picture at test-site/MyImage.jpg on your website and try to invoke it in a different file, it may not function.
Web servers, browsers, and computer languages treat spaces differently. Some systems regard filenames with spaces as two filenames. Some servers substitute spaces in filenames with “%20” (the URL character code for spaces), breaking all links. Use hyphens: my-file.jpg and avoid using underscores because Google search engine use hyphens as word separators.
✅ Rename to a descriptive title.
e.g. image0238218.jpg to productname.jpg
✅ Replace space with hyphens (-).
e.g. productname front view.jpg to productname-front-view.jpg
✅ Use numbers (01234567890) for multiple versions of the same image.
e.g. productname-front-view-1.jpg, productname-front-view-2.jpg
❌ Do not use special characters ( !@#$%^&*()+:”><?{}`~=)
Recommended File Size
As a general rule, WordPress picture sizes shouldn’t be bigger than 150kb, unless they are large photos. Acceptable file for your company logo: .ai, .pdf (not flatten), .png (with transparent background) more than 300px atleast.
Resize Your Images
| Blog Posts Featured Image (.jpg) | 1200 x 630 px |
| Product Image (.jpg) | 800 x 800 px (1:1 Ratio) |
| Background Image (.jpg) | 1920 x 1080 px |
| Thumbnail Image (.jpg) | 150 x 150 px |
| Favicon (.png) | 512 x 512 px |
| Brand Logo Display | 150 x 60 px |
When you add images to WordPress, one of the most important things to think about is the size of each file. Any image with a big file size will slow down your website, which can affect how users feel about your site and cause them to “bounce” away from it.
It doesn’t make sense to upload pictures bigger than they need to be.
Use Canva Template
Product Image (1:1) Square Template
What would happen if I don’t control images upload?
If you do not control the sizes of images uploaded in WordPress, it can have several negative consequences for your website:
- Increased page load times: Large images consume more bandwidth and take longer to load. This can result in slower page load times, which negatively impacts user experience. Slow-loading pages can lead to higher bounce rates and lower search engine rankings.
- Reduced website performance: Large images can put a strain on your server resources, especially if multiple large images are loaded on a single page. This can result in decreased website performance and responsiveness.
- Excessive storage usage: Large image files take up more storage space on your server. Over time, this can lead to excessive storage usage, potentially exceeding your hosting plan’s limits or incurring additional costs.
- Inefficient use of bandwidth: When users visit your website, they need to download the images displayed on the page. Large images consume more bandwidth, especially for visitors on mobile devices or with slower internet connections. This can lead to increased data usage for users and potentially deter them from visiting or exploring your site further.
- Poor mobile experience: Mobile devices often have limited screen sizes and slower internet connections. Uploading large images without proper optimization can result in images being displayed incorrectly or taking too long to load on mobile devices, negatively impacting the mobile user experience.
To mitigate these issues, it is recommended to control the sizes of images uploaded to your WordPress website. You can achieve this by optimizing your images before uploading them, using image compression plugins, and setting maximum image dimensions within WordPress to ensure images are appropriately scaled for your website’s design and layout.
Compress Image
Image compression reduces file size and speeds up image loading for your users.
- For .png (transparent background) recommended file size: less than 300KB
- For .jpg recommended file size: less than 100KB
Free online image compress tools
Why is renaming and optimizing images necessary?
- Organization and management: Renaming and optimizing images with descriptive and consistent file names can make it easier to organize and manage your image library. This can save time and make it easier to find the images you need for your website or other projects.
- Improved SEO: Search engines like Google use the file names and alt tags of images to understand the content of a webpage. By renaming and optimizing images with relevant keywords, you can help improve the SEO of your website and increase the likelihood of your images showing up in search results.
- Faster page loading times: Large image files can slow down the loading time of a webpage, which can negatively impact user experience and SEO. Optimizing images by compressing them and reducing their file size can help improve page loading times, which can lead to better user engagement and higher search rankings.
- Accessibility: Renaming and optimizing images with descriptive file names and alt tags can make your content more accessible for users with visual impairments who rely on screen readers. This can help improve the accessibility of your website and make it more inclusive for all users.
In summary, renaming and optimizing images are important for improving SEO, page loading times, accessibility, and organization and management of your image library.
