Best Way To Use Large Images On Web

[Maserati]

Hello. I am trying to optimize/speed up my website, https://bizzyboost.com. I've been using Affinity for iPad to try to resize, edit some of the images, but I know I am not doing it the right way. So, if you guys could explain to me in laymen's terms, step by step, how to accomplish the following, that would greatly help.

*On this report at GTMetrix, I keep getting horrible grades on the same images, which I've attached to this post for your convenience.

*The rocket was downloaded here, and the lightning bolt was downloaded here. I have tried downloading them in all available formats to get it right, but no success. I'm doing something wrong, and I can't figure it out.

*As you can see, the rocket image is huge; but on my website I don't need it to be that big. If you look at the first page of my site, you can see that resized significantly. Same with the lightning bolt. I'm just using it as a small logo at the top.

*How exactly do I go about editing/cropping/scaling these images in Affinity for use on my website. Ideally, I would love to have the rocket image be resized in Affinity to the exact size I need it to be on my site, and the same with the logo. Without losing too much quality.

Thank you for your time and attention.

[carl123]

(for example)

Your antman-1.jpg image is 1000x1000px which you resize on your website to be 336x336px

All the report is saying is that if you use a 336x336px image instead of the 1000x1000px image your website will load faster

You can do that in APhoto simply by opening the image then Document > Resize to 336x336px

Then File > Export to generate the new jpg file. 

(The above commands are for the desktop version of APhoto not sure of the equivalent actions on an iPad)

Pay attention to the quality slider on the export screen which affects the final file size and quality. You adjust this downwards to get a file size and quality for the image you are happy with - unfortunately, there is no preview screen for this so it is just down to experience and trial-and-error, a setting of 85% is a good starting point)

The above is the simple answer to your query, there are far better tools out there to minimize jpg files for use on websites if you are trying to maximize the speed that your website loads.  But they are usually only needed when you have an image-heavy page and need to minimize aggressively to get your page-load speed down to as low as possible.

You can also use the following Google tools to analyze your website to see what else you can do to improve your site's speed.

https://developers.google.com/speed/pagespeed/insights/ 

https://www.thinkwithgoogle.com/intl/en-gb/feature/testmysite/

 

[Maserati]

Thank you. I will look into everything you said.