a question that's come up recently is how to prepare images for publishing on a website
in this video I'll take you through the steps to ensure your colors display correctly images appear
sharp and they load quickly here's a finished image which is currently saved in the Tiff format
and it's about 239 megabytes in size whilst Tiff images are great for preserving image quality they
aren't good for the internet this huge image will stop any website page from loading play
when displaying images on a website there can be a trade-off between quality and speed but you need
to know how to achieve both if we magnify this image to 100% you can see that it's packed with
fine detail I shot it using a Fuji xt5 which is a 40 megapixel camera and it's why this image is
so large if we select the resize document option in affinities document menu you can see that it
measures over 7,000 by 5,000 pixels this is far too large for displaying on a website so we need
to down sample it first we can do this by reducing the number of pixels in the image to something
suitable for a website that's also going to reduce the size of the file making it much quicker to
load remember the speed of website page loads is extremely important this means that if you're
uploading your images to someone else's website like Instagram your images will be automatically
processed to minimize their size when that happens the quality of your image is usually ignored the
priority is making the image small so that it doesn't slow down the website that's why it's
better to resize your images to the correct Dimensions before uploading them in Affinity
photo we can do this by using the resize document dialogue we just opened but before you resize the
image you first need to know the best dimensions in pixels for the website as each one can be
different Instagram for example is 1080 x 1080 pixels on flicker it's, 1600 pixels wide by 1024
high if you upload images that are larger than this they going to be resized to make them easier
to display on my lenscraft website the page width is 1080 pixels but I like to size my images at
1280 pixels I do this so that visitors can click to enlarge them and my website doesn't resize them
unless they're over 1920 pixels wide for this example let's make the image 1280 pixels wide
I can do this by entering the width in the first field of the dialogue now notice this chain icon
between the two Fields this means that Affinity photo will keep the image aspect ratio in other
words it will alter the height proportionately to the new width if I click the link icon it
toggles it off and on when it's on you'll see Affinity photo change the height when I click
on the field now let's talk about the DPI because many people find this confusing for displaying
an image on most websites the DPI doesn't matter and it's only really important for printing what
matters for displaying an image on a website is the pixel dimensions so I'll just leave the DPI
set to 240 now something that is important is the resampling method when we make an image larger
or smaller the resampling method determines how it's done it controls what new pixels are added
or discarded and that can affect our perception of the image sharpness some methods will work better
than others for this example I'll pick one of the two LOF methods I can then click the resize button
to resize the image now look at my navigator window you can see that we're viewing this image
at a little over 200% magnification and it still looks good good if we reduce the magnification
to 100% the detail becomes more difficult to see one of the side effects of significantly reducing
the image Dimensions that we have here is that it won't appear as sharp we therefore need to apply
some sharpening to correct the problem it's also another good reason to resize your image before
uploading to a website so you have the opportunity to sharpen it again to add the sharpening to our
resized image I'll select the layer menu I'll then come down to the new live filter layer section
where I'm going to see the sharpening group this contained three options for sharpening the image
and we'll use the unsharp mask filter for this example in the dialogue I'll set the radius to .8
which works well for display sharpening like this I can then increase the factor slider to add more
sharpening now if you add too much sharpening you'll see the details in the image begin to
appear too bright all we want to do is add a little Sparkle to give the image more impact
usually something between .5 and one is all that's needed for most images it also doesn't matter that
the sharpening is applied to everything because we're talking here about display sharpening if
you now look at the layer Studio panel you can see the filter is attached to the layer when
I turn it off and on you might be able to see the difference it's making to this image know
that our image is the correct size and has been sharp we need to export it in Affinity photo we
do this using the export option in the file menu this opens the export option where we can select
the file format that we want to use what we need is a format that produces a small file size but
retains image quality traditionally this has been the jpeg format but a lot of websites now use the
webp format which can produce smaller image sizes but with a similar quality to jpeg personally I
would still export the image using the jpeg format to maintain maximum compatibility I would only use
the webp format if I know the website supports it many handle the conversion from JPEG to webp
automatically for you anyway after selecting the jpeg option we can select one of the presets in
the drop-down list if we have the best quality option selected the quality slider is set to 100%
that's going to prod uce an image that's about 1.5 mbes which is still too large if we want the page
to load quickly now switch it to a high quality setting and the size drops substantially this
is quite usable now but we can reduce it further by selecting medium quality and even though this
is a medium quality setting you won't notice any difference in the image quality at this size but
there is one other important thing that we need to do which is set the color space of profile of
the image currently the image uses the Pro Photo RGB color space which could look Dreadful on many
displays if we look at the advanced section of the dialogue we can choose the srgb profile this is
much better and will display the colors correctly on most devices I also like to embed this profile
in the image having done that we can click the export button to export the finished image if we
select it we see that it's now only 162 kiloby which will load quickly on any website and it
looks great the only thing that I'm missing is a waterm to let people know that I shot it to see
how to add that watch this video next thanks for watching today and I hope you like the
video don't forget to subscribe if you haven't already and I'll see you soon for another video