Jump to content
writesync

Best Way To Use Large Images On Web

Recommended Posts

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.

logo256.png

47.jpg

Share this post


Link to post
Share on other sites

(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/

 


Due to the fact that Boris Johnson is now our Prime Minister, punctuation, spelling and grammar will never be worried about ever again.  We now have far bigger problems to be worried about.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...

Important Information

Please note the Annual Company Closure section in the Terms of Use. These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.