443-366-5230 info@zelative.com
Select Page
An unassuming nightmare for website owners is adding images to their website.

Preparing images for the web

An unassuming nightmare for website owners is adding images to their website. It sounds easy, but if not done correctly, it will cause your website to load very slowly or look terrible, and worst of all, Google will not place it high in search results.

Every additional second it takes your page to load will cause a large percent of your visitors to leave. Making your images too small will cause them to look so bad that the visitors will have no confidence in your site and may go quickly.

Preparing Images for your website or blog is the most complicated process you will have to learn to manage your site. There are many ways to do it and there is a lot to learn if you want to maximize how fast it will load or You want to avoid any of the edges from being cropped

The next section will show you a process for making a huge difference to an image you want to put on your website and will probably get it pretty close to the results of a more complicated process.

Video examples

The videos will show the process using three methods. There are more than one free apps or WordPress plugins that would work. I am going to show you using one of the best. Once you can do it with one of the three using a different app. is pretty easy.

The Photoshop Way

Using a Free App.

Automating some of it with WordPress plugin

What are we doing to the picture?

Cropping the image

To keep it simple we will come back to this later. You can get away with not knowing this step. If you decide to crop you will do this step first.

Tell Me about it now

Selecting part of a photograph to use. If you do not crop an image before adding it to a part of your site it may be cropped for you and could crop out the most important part.

Too Complicated (for Now)

Setting the Size

Sizing means setting the width and height of an image close to the size it will be displayed on your web page. You do not want to put a picture on a webpage that is so large it would look great on a billboard.

Quality Level

Technically called Compression this means having software find places in an image to do some fancy math to reduce the image’s sizes file size to the point where it does not show a loss in quality but will show up faster on a webpage

Easy Process

This section walks you through a process that is about as easy as you can get to get a picture onto your website or post without making the page load so slow visitors will not wait to see it

Here is an example of what will happen to the image when we are done. This picture started out over 4MB. ( a webpage should be under 2MB in total.

After setting the image size and quality the image drops down to 359KB. At this size three of these images would equal about 1MB. To say another way you could not add about 5 images sized this way to a page and be ok At the original size the image by itself would be twice as big as the whole page size should be.

Setting the Size

Step 1

Set the width of the image. You can be more precise but that will add a lot of complexity to the process and it might be unnoticeable. We will set the width for two different sizes. You will let the height stay what it is.

Determine if the image is going to be displayed:

  • Fullwidth – all the way across the page
  • Half or less – The reason we stop here is that website change depending on what you are using to look at them. An image that shown smaller in a row with other images will be displayed fullwidth on a smaller device. The image in the row becomes stacked so they are large enough to see. We will need to make all other images wide enough to look good on phones and tablets.

Fullwidth

Set width to 1450

Half of page or less

Set width to 750

Quality or Compression

Step 2

Often if you have set the size of an image as in step one you can get away with using the same compression or quality number. In photoshop this number is 80%. This number is going to maintain the high quality of an image but reduce the amount of time it takes to load a lot.

There is one problem that you will have to be aware of and fix. An image that has a lot of beautiful colors and detail will not compress the same as the average picture. If you resize it as in step 1 and then use 80% it will still be huge and will slow your page down a lot.

If you want to keep that image you will have to reduce the quality to make the file size small enough. You will keep adjusting the quality setting until the file size is lower than 500k

Congratulations!

You can now add the image to WordPress without causing a major slowdown. You might want to test the page now to make sure it is loading fast enough. Use the link and paste in the pages address to see how fast it loads

Cropping

Step 2

Cropping an image is commonly used in web design for making images fit correctly in the place it will be used. You might think you have a perfect idea for a page, but if you are not thinking about how it will be cropped to fit the space it will go, certain important areas of the image might not show. For example, when sizing a banner image, that image at the top of a website is not very tall compared to its width.

There are many tools available to help you do this correctly first, a little more detail, and some of the great tools I found in my research.

You cant just crop al willy nilly without thinking about where the image is being used. There a few standard cropping sizes you should probably use.

To keep it simple, Divi has been optimized for three different photo sizes. This means you can’t go wrong using this height and width setting (aspect ratios). They will fill the space nicely. I use these cropping sizes in a lot of my Divi work, but you can stray from them when you know what you are doing.
The three aspect ratios are
16:9, Sixteen units wide and nine units tall
4:3, four units wide by three units tall
and 3:4