443-366-5230 info@zelative.com
Select Page
Affiliate links

I also am adding links to apps and services I recommend based on my own use or use and the reviews of unbiased sources. If I am confident in the quality after spending enough time with the plugin will provide an affiliate link and label it as such

Snob Disclaimer

I worked as a photographer.  I always err on the side of higher quality images.  I use a higher than normal compression level and I geek out on the quality of the algorithm. Most website visitor just glances at images and do not take the time to analyze the depth of the blacks or critique the framing. I might overthink it.  The core message here is right on, but you might want to go for the easiest option

The Short Answer

Programs like photoshop but less expensive

Difficulty – moderate/advanced

Pixelmator Pro. http://jpeg-optimizer.com/

Pixlr https://itunes.apple.com/us/app/pixelmator-pro/id1289583905?mt=12

WordPress Plugins that will do it for you.

Imagify
Short Pixel

SIzing and Aspect Ratio (would work well with compression plugin)

The scary details

An unassuming nightmare for website owners is adding images to their website.  It seems easy enough but if not done correctly 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. On the other side making your images too small will cause them to look so bad they visitors will have no confidence in your site and may leave quickly also.  

 

This is the most complicated process you will have to learn to be able to manage your own site.  It might be intimidating but it’s all here, everything you will need to know and then some, and once you have a process you will use it often enough that it will quickly become muscle memory

 

The actual process itself is not very complicated once you find the tools that you have access to and have the patience to learn.  If you have photoshop it is an easy process but if that’s all you using it for then it will not justify the price.

 

There are videos included to give a visual demonstration of the topics discussed and further explanation.  We are also available for one-on-one training which is free is we have made your site.

 

Skip this section if you do not care about understanding the sizing process

 

Resizing and Compression

When I say sizing what I am actually saying is two things: Resizing and Compression. Sizing means are you setting the width and height of an image close to the size it will be displayed on your web page and Compression means having software find places in an image to do some fancy math to reduce the size of the image. So the image is compressed to the point where it does not show a loss in quality but makes the image file size as small as possible without a loss in quality.

 

Very Geeky 

When using a tool to compress your images there are two ways it can be done.  They are called lossy and lossless.  You should not need to know much about this or at all but might want to be aware that lossless compression will leave you with larger file size than lossy but will not have any noticeable loss in quality.  Lossy compression will make for much smaller file size and when done right it will have no visual difference from the lossless image.

 

Cropping

 

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 image for a page but if you are not thinking about the way 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 that is not very tall compared to how wide it is. 

 

There are a lot of tools available that will help you do this correctly.  First a little more detail and then some of the great tools I found in my research.

 

Quick-tips

  • If you’re going to place multiple images next to each other they should have they should be the exact same shape or aspect ratio (see below).  This will make the page have a nice clean look

 

  • If you are cropping to make an image more interesting or to focus on one part of the image, you need to make sure the image has enough information or file size to still look good.  I can tell by looking at file size but you can start by just looking at the results.  If it looks out of focus or pixelated it is going to substantially reduce the quality of the page.

 

Aspect Ratio

To make a nice clean look, images next to each other should be cropped the same way so they are displayed the same size.  This means having the same width to height, so for example, if your image is 500px wide and 700px tall the one next to it should be the same or the same ratio for example 1000px wide and 1400px tall.

 

To keep it simple, Divi has been optimized for three different sizes.  This just means you can’t go wrong using this height and width setting (aspect ratios).  They will fill the space nicely.  I do use these cropping sizes in a lot of my Divi work but when you know what you doing you can stray from them.

 

The three aspect ratios are  

16:9, 16 units wide and 9 units tall 

4:3,  4 units wide by 3 units tall

and 3:4

 

SEE THE VIDEO ON HOW TO CROP AN IMAGE TO A SPECIFIC ASPECT RATIO

 

One of the most important images to crop correctly is the banner image at the top of your page. If you are using one a great starting point would be the 16:9 aspect ratio.  Using this size crop will give you the most common image size for this placement.  I most often stick with this size but if the image looks better a little taller or less tall I will adjust it slightly.

 

If you’re using the Divi theme there are suggested sizes and aspect ratios for certain types of content.  You can’t go wrong by following this guide but if you know what your doing this is not really needed.

 

https://divi.space/tips-tricks/how-to-choose-the-best-image-sizes-for-your-divi-website/

 

Apps, and online tools for Resizing and Compression

 

If you don’t have or know how to use photoshop it can be a multi-step process and maybe even multiple program processes.  The results or quality will vary also, this might not be noticeable or important to you but for those in the know it is apparent

 

I was on a mission to find the easiest solution to teach to my clients.  I spend days researching free and paid apps, online tools, and was also as always sidetracked by new information regarding my own process.  Here are the results of my research, some of which are non-biased (or less biased) reviews and some are apps I have used or know of as great apps.

 

This can be overwhelming.

—-

 

Tools for Resizing and Compression

 

WordPress Plugin – 

Pros

Will automatically takes care of compression

Cons

You will still need to size the image first

Limited Control

Usually requires a small fee

 

This is a decent strategy, the plugin will compress your images but if it is sized 3x larger than needed it will still add extra weight to your page. You can use a program to reduce the size of an image before adding it too WordPress.  You could also crop the image at the same time, save it and drop it into WordPress.  This might be good for sites that will continuously be adding a decent amount of images.

 

There are a couple of problems with this method. This will apply the same level of compression to each image.  This will result in images being saved too large 

 

You can add a plugin to WordPress that will automatically compress your images as you add them. This does not solve the whole problem for you.  They will compress your images but if it is sized 3x larger than needed it will still add extra weight to your page.  Depending on what else you have on the page this extra weight can add up quickly.  You can reduce the height and width inside WordPress but the way this is done will reduce the quality of the images noticeably.

 

First: The Photoshop way – to give your adopted process something to compare to.

 

When I have a photo open in photoshop, when I am ready to save it for use on a website I select Save for Web (there is a newer way) and then I set the output size and then adjust the quality.  This is compression.  I keep the quality level as high as I can without making this individual image slow down the page or the whole page as a whole.  I know that an image over 400k could load slow enough that it might show up slowly on the page.  I also do a quick audit of the page.  If I have several large images and/or lots of small images every bit helps. It is not just images that can slow down a page so it is good to do a speed check at several stages to see where you’re at.  I have a good idea where I am at from experience.  To do a quick speed test go to GTMetrix.com and paste in your site’s address.  What we are looking for is load speed.  The ideal number is 3 seconds or less because on an average site after 3 seconds you will start to lose impatient visitors.  Now your site might appeal to an audience that will wait a little longer but only to a certain point.  There is almost always another option.

 

Programs like Photoshop.

 

It would not be worth it to buy Photoshop for just this purpose. There are inexpensive free programs like photoshop where you can do both the sizing and compression in a similar way but maybe not with the results and ease of Photoshop

 

While researching free options for clients I did spend some time working with a free option that works similar to photoshop that is available on pc and Mac called Photoscape.  It has a similar process but breaks the sizing and compression or quality up into two different areas.  This is a decent option but If it were me I would probably spend a little and get an app that is a little better.

Such as

Pixelmator Pro. http://jpeg-optimizer.com/

Pixlr https://itunes.apple.com/us/app/pixelmator-pro/id1289583905?mt=12

 

CHECK OUT THIS VIDEO SHOWING YOU HOW TO USE PHOTOSCAPE

 

There are a couple more free apps that are worth mentioning

Gimp – this free app is made by a lot of developers. (Open Source) it is hard to use but gives great results.

Canva – I did not try this one but it is listed as a good alternative

 

Check out this articles review of the best free alternatives than photoshop.  https://www.techradar.com/best/free-photo-editor

 

WordPress Plugins that will do it for you.

I have used this method before and liked it at the time.  They are for automatic compression, so you add your image to WordPress and it will take care of it.  In my experience, you will have to resize the image first (because how would it know the right size) but some do offer both.  A decent starting point could be starting out using an app to size your image to an aspect ration if needed and then let a plugin take it from there.  Some are free for a limited number of images per month

 

Popular WordPress Plugins For Compression and resizing that I have used

 

Shortpixel – images are compressed and resized automatically lossy and lossless.  I have worked with this one and like it.

Imagify – Recommended by the makers of Divi.  I liked it, works well

 

Article comparing wordpress plugin

https://www.elegantthemes.com/blog/resources/best-wordpress-image-optimization-plugins

Another article

https://www.wpbeginner.com/plugins/best-wordpress-image-compression-plugins-compared/

 

 

SIzing and Aspect Ratio (would work well with compression plugin)

 

Online app

Croppola – really cool.  It will crop an image for you based on the aspect ratio you select, and it automatically figures out the best way for the image to be cropped.  I was very skeptical but was very impressed by the results You download the results and then if you have a compression plugin installed the rest is taken care of for you.  https://croppola.com/

 

Free Compression Tools before Adding to WordPress

 

If you decide to use a tool to crop your image you might want to use another free tool to compress them.  Here is a great article on the best tools.  Some of them will let you compress multiple images at once.

https://www.webdesignerdepot.com/2018/07/the-best-image-compression-tools-for-the-web/

Here is another good list

https://enviragallery.com/9-best-free-image-optimization-tools-for-image-compression/

 

Both Compression and Resizing (have not used)

JPEG OPTIMIZER

http://jpeg-optimizer.com/

Image Resizer

https://imageresize.org/