Add Animations and Graphics To Website (3.1)

As I am creating a portfolio for film and photographic work, my site will be very image heavy. This might cause slow loading speeds if the media I upload is not correctly optimised for web.

Optimising Media 

In web design it is important to optimise your image and file sizes to reduce loading times and prevent lagging. This is vital because otherwise it could deter people from using your site if your images take too long to load.

Reducing your file sizes to the smallest possible size without loss of quality, is also a great way to deter people from cloning, copying and using your images as they would need a high res file to reuse professionally.

Some hosting packages include an image optimiser which reduces your image file size as you load onto your site. As I will be using WordPress I found a Plugin that offers this service Screen Shot 2018-06-13 at 10.21.15Screen Shot 2018-06-13 at 10.21.31

Alternatively you can use Photoshop to optimise your images, it is quick and easy to do and means you have complete control over the file sizing for particular purposes.

Here I have uploaded a large JPG file that stands at 11mb, I experimented by uploading the image onto WordPress to see if the file size would remain large without any alterations, to see how well the site optimises images.

screen-shot-2018-06-13-at-10-22-50.png

I loaded the page, which upon observation did not load as quickly and as smoothly as I would have hoped. I then downloaded the image from the page site, which revealed to me that the image downloaded as 2mb. This is still too large if I am going to have an image heavy site for my portfolio.

Therefore I took my image into Photoshop to reduce the size and resolution of the image. Reducing the resolution from 300dpi down to a more web friendly 72dpi reduces the file size drastically.screen-shot-2018-06-13-at-10-37-20.png

However, 5mb is still too large for quick loading on my site so I save the image for web which gives me even greater control over how small I can have my image, it even includes the estimated rate the image will load on different network speeds, so I can gage whether my image is as optimised as possible. I chose to save my image in .JPG format, which is appropriate for web use and have it at a medium quality which reduces the loading time to 3 secs.

screen-shot-2018-06-13-at-11-07-40.png

The final file now stands at 180kb, hopefully this will now load quickly on my site.

 

Problem Shooting Slow Loading/ Lagging

If your site is loading slowly and images are taking a while to appear, there are a few reasons why this might be and you can problem shoot why.
Firstly if your site is slowly, you can attempt to load another site – if this loads efficiently then it suggests that the problems lies with your site.
Secondly, it might be bloated coding. Many hosting packages generate extra code to cover all the possible eventualities that you might need the site for. To overcome this, you can use software or learn HTML and only employ the basic code you really need.
Many slow loading pages are simply down to lazy image sizing, where none of the images have been properly optimised so it is very important to take control of this.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this:
search previous next tag category expand menu location phone mail time cart zoom edit close