How to Optimize Photos for Your Website

How to Optimize Photos for Your Website

Why is it worth preparing and optimizing photos before uploading them to the website?

  • Optimized graphics will significantly shorten the loading time of your website.
  • Correctly described photos will help you find your website on Google.
  • Image optimization strongly supports SEO activities.

Here is a step-by-step photo optimization guide.

1. Photo size (px)

To begin with, try to determine what size of images you will need for selected sections on your website.

For example, a full-width photo should be of such size that it displays well on larger screens (I use full HD).

If you set the page margins to a specific value (e.g. 1200 px) then check where you will need the photo for the entire margin and where – 1/2 or 1/4. This way you will define the maximum size of the graphic.

Example: the margins of my page are 1200px, but it will be divided into 2 equal columns with one text and a photo on the other, the width of the photo as it will be and needed is about 600 px.

There is no need to upload a 1500-pixel-wide photo if it will only be displayed in 600 px on the website

2. Weight (kb, MB)

Once you’ve decided on the size of your photos, it’s time to slim them down. The weight of files has a huge impact on the positioning of your website.

If you use Photoshop or Photopea while saving the photo, try to reduce the quality as much as possible so that the difference is not visible to the naked eye. I usually reduce the quality to about 50%.

Compressor website is great for slimming photos, just upload photos and download the optimized version. Compressor.io allows you to “slim down” without any visible loss of quality.

3. Name (before uploading to the website)

Before uploading to the website, make sure that the photo does not have an accidental title, eg DSG 325 (straight from the camera).

Sign the photos using a key phrase in line with the subject of the photo, but without Polish characters and with a space instead of dashes. 

4. Title and alternative text

We can set image attributes in any page builder, but what is that?

Alt text” is simply alt text that the search engine is reading. The filled alt attribute means that the robot knows what is in the photo and can assign it to the search results.

Additionally, the alternative text is visible to users if for some reason the photo cannot be displayed (e.g. it takes a long time to load).

Another attribute is the title of the image, it is the auxiliary text that is visible to the user of the website when hovering over the image.

When filling in these fields, it is worth using a keyword phrase, but at the same time describing what is in the photo. Alt text and title can share the same description. 

Rate

0 out of 5 stars(0 ratings)

Leave a Reply

Top WordPress Themes for Optimizing Core Web Vitals

Top WordPress Themes for Optimizing Core Web Vitals: Astra, GeneratePress, OceanWP, Schema Lite

Looking to optimize Core Web Vitals? Discover the best WordPress themes for the job! Astra, GeneratePress, OceanWP, Schema Lite, and Neve top the list, offering speed, responsiveness, and clean code. With customization options, enhance your website's performance and improve search engine rankings.

Read more
Create a Fast and Cheap Online Store with Carrd and Shoprocket

Create a Fast and Cheap Online Store with Carrd and Shoprocket

Creating an online store can be a daunting task, but with the right tools, it’s easy to create a fast and affordable online store that looks professional and easy to navigate. In this tutorial, we will show you step-by-step how to create an online store using Carrd and Shoprocket. Step 1: Sign up for a Carrd.co account The first step […]

Read more
Awesome CSS Image Hover Effects That You Can Use on Your Carrd Website

Awesome CSS Image Hover Effects That You Can Use on Your Carrd Website

Carrd has its hover animations which are easy to use without knowledge of CSS. There are 11 native animations: But in specific situations, you might need much more but don’t worry because animating pictures using CSS on Carrd is a simple process that can add an extra level of engagement to your website. Here are the steps to […]

Read more

Help us find great content

Try Carrd

Newsletter

Launch faster using templates: Sign up to stay updated.

About

Templatery offers one-page website templates made just for small businesses. Our designs are user-friendly and crafted to meet the specific needs of small business owners.

Simplify your journey to a standout website with Templatery.

Submit