Did you know that about 80% of page views are images, and some people spend up to 3 seconds looking at a single image? That’s why it’s so important to make sure your images are optimised before adding the content to your blog article or website, so it can help with the overall speed and performance of your website. Here are some simple steps you can take to prepare your images beforehand.

Planning out each image

It's important to make sure your images are optimised before adding them to your website for a number of reasons. First, it can help with the overall speed and performance of your website. Second, if you have a lot of images on a page, it can help to improve the user experience by making sure they load quickly and smoothly. Third, optimised images can help improve your search engine ranking since Google takes into account the loading speed of a page when determining its position in the search results. Finally, the last reason is that having all your images pre-optimised will save you time when uploading content to your blog or website - and who doesn't want that?

That's why it's so important to make sure your images are optimised before adding the content to your blog post or website. Here are some ways you can prepare before adding the content to your blog or website, so it can help with the overall speed and performance of your website:

Read up on image compression (also known as JPEG compression) before uploading an image for use on the web. Quality settings for JPEGs range from 10% - 100%. A higher percentage means better quality but a lower file size. Generally speaking, for most photographs with ample lighting, somewhere between 70% - 80% should be sufficient in terms of quality vs file size.

Resizing every image

It's important to resize every image before adding it to your blog or website. This can help with the overall speed and performance of your website. If you're not sure how to resize an image, there are plenty of online tutorials that can help. Plus, there are many free image resizing tools available online. Simply search for image resizer in your favorite search engine.

One popular option is PicResize. Another good choice is Image Resizer Lite, which can be downloaded as a Chrome extension. After downloading and installing the extension, right-click on any webpage element (text box, photo) and click Resize. The program will ask for input about the height and width dimensions for this specific element (text box, photo).

Creating a folder system

One thing which has always helped us with our content development is to make a folder system on your laptop/desktop before even uploading, so you can break down where each image goes on a particular page.

1. Decide on a naming convention for your folders and files. This will make it easier to find what you're looking for later on.
2. Create a folder for each type of content (e.g., images, videos, etc.).
3. Within each content folder, create subfolders for different categories (e.g., product images, blog images, etc.).

Collaborating with team members

Working with a team can be a great way to get things done, but it's important to make sure that everyone is on the same page. One way to do this is to have a clear vision for the project. Make sure that each team member knows what the goal is and what their role is in achieving it.

Having regular check-ins can also help ensure that everyone is on track and that any problems are identified early on. It's important to set expectations from the start so you don't run into surprises down the line.

Finding free resources

It's no secret that high-quality images can make or break a blog post or website. Professional photos and graphics can make your site look more polished and can help you attract and keep readers' attention. But if you're not careful, those images can also slow down your site, making visitors frustrated and causing them to click away.

If you don't have Photoshop or any other professional image editing software, you can see use these free online resizing image sites:

• https://imageresizer.com/
• https://picresize.com/

Some great links to free stock image libries can be found below:

• https://unsplash.com/
• https://www.pexels.com/
• https://pixabay.com/photos/
• https://www.freeimages.com/
• https://www.stockfreeimages.com/

Most of these sites don't even require you to have an account in order to use their images, but some might need crediting as they give out these images to help with their own photography portfolio.

The differences between image formats

JPEGs are best for photos, while GIFs are better for images with fewer colors, like logos or line drawings. PNGs are a good compromise between the two, and can be used for most images. However, they tend to be larger files than JPEGs or GIFs. When saving images for the web, you should always use the smallest file size possible without sacrificing quality.

The easiest way to do this is by using an image editing program (like Photoshop) to reduce the resolution of your image before uploading it. If you need help, check out a tutorial from Smashing Magazine (https://www.smashingmagazine.com/2019/10/imagekit-guide-optimizing-images-mobile/) that explains how to optimise your images for the web in detail.

Responsive images

In order for your website to be fully responsive, your images must also be responsive. This means that they need to be sized appropriately for the device they're being viewed on. If you have large images that are being displayed on small screens, they will take longer to load and will use up more data. This can lead to a poor user experience and can even cause people to leave your site.

It's important to make sure all of your images are optimised before adding them to any blog posts or websites in order to ensure that their size is appropriate for the screen and will help with the overall speed and performance of your website.

Becareful of images taken on a mobile phone

Mobile phone cameras are getting better and better, but they're not quite at the level of a DSLR yet. That means that if you're planning on using images from your phone on your website or blog, you should understand that now your typical image taken on an iPhone or Samsung can be well over 2MB per image and this is very large in file size to be directly loaded onto a website.

This is why if you are going to directly load any images from your mobile phone to a website, please make sure you have some sort of image compression tool within the CMS to have the ability to downscale the size of the image(s) without compromising the quality of the image.

Summary

So with all of the points mention above it's important to make sure your images are optimised before adding them to your blog or website for a number of reasons.

By doing this, you can help improve the speed and performance of your site, as well as making sure the images are high quality and relevant to your content.