Image Size ?

[Its4john]

I'm playing around with some images to upload to a website.

Main pic from my camera phone is 2.9Mb, dimensions are 3264x2448 (I assume this is pixels?)

I've resized the image to 1.2Mb, dimensions are 1280x960

Which is best? main one for quality, or reduced one so as not to slow down the page loading speeds?

Whats the ideal combination ?

 

[SEOpie]

Yes, what you're referring to is the resolution, which is measured in pixels.

1.2MB is still way too big to be optimal. Depending on the application, I would be looking at limiting the file size to a maximum of 100-120Kbs. Even 120kbs is quite large.

To do this you can reduce the resolution of an image to a point before it becomes visibly noticeable.

You can optimise images using online tools (such as this) or via software such as Photoshop.

Remember to resize the image to the size you require first before optimising the resolution.

A more advanced consideration is to use media queries in CSS to serve different images based on the device operating system and screen size (some iOS devices have Retina screens which in effect double the resolution).

 

[Its4john]

Excellent, thanks. Its nice to see a website which does some freeby stuff without having to do some registration first

 

[Deleted member 59730]

Main pic from my camera phone is 2.9Mb, dimensions are 3264x2448 (I assume this is pixels?)

I've resized the image to 1.2Mb, dimensions are 1280x960

There is something wrong here. The larger image is 6.5 times larger than the small one but you don't have the corresponding reduction in Mb.

Your ideal process is to convert the camera jpg to a tiff file > do any adjustments like retouching > save > alter the size > then re-save as a jpeg with medium setting.

If its not right go back to your saved Tiff.

 

[Its4john]

There is something wrong here. The larger image is 6.5 times larger than the small one but you don't have the corresponding reduction in Mb.

I'm using a Mac and I've never got my head around image sizing on it.
I might just fire up my old windows laptop and use 'Paint'

 

[Deleted member 59730]

I'm using a Mac and I've never got my head around image sizing on it.
I might just fire up my old windows laptop and use 'Paint'

What software do you have on the Mac?

 

[Its4john]

What software do you have on the Mac?

It’s just the OS it came with. I’ve not got any special imaging software on it.

 

[Paul Murray]

Images are the main blockage in a website's load speed (which is important for a number of reasons), so you should always aim to optimise them as much as possible.

The simplest solution is to resize them to the actual size you need, save them as a JPG (or PNG if you need a transparent background) and optimise them using TinyPNG. This will strip out superfluous data from the image to reduce the file size quite dramatically.

However, with retina screens and responsive sites, things get tricky. You'll likely need the same images in different sizes or ratios which you can switch out based on the resolution of the device viewing the site, and/or the size of the browser window.

Which site are you uploading to? Is it your own site, a site builder, a third party website, etc?

Most modern platforms or CMS's will create differently sized images for different devices automatically (or have a plugin that will). In which case you just upload the large image and let them take care of everything. As a rule of thumb, I recommend just making an image twice as big as you need to account for retina screens. So if the image size you need is 600px wide, make it 1200px wide.

Note that this is far from ideal, especially on mobile where you would want to show a much smaller version to reduce bandwidth usage and load speeds. The ideal solution is to check the resolution and device viewing the site and serve them appropriately sized images. However, depending on the site/platform you are referring to, this may not even be an option for you.

 

[Its4john]

Thanks Paul, you and SEOpie have said to resize the images THEN optimise. I'm going to show my ignorance now and ask what do you mean by optimise if its other than getting the size right ?

 

[Deleted member 59730]

It’s just the OS it came with. I’ve not got any special imaging software on it.

That is a bit like having a tool shed with no tools.

 

[Paul Murray]

Thanks Paul, you and SEOpie have said to resize the images THEN optimise. I'm going to show my ignorance now and ask what do you mean by optimise if its other than getting the size right ?

I mean just resize the images, then upload them to TinyPNG. That's the optimisation bit.

If you upload the large image, save the optimised version from TinyPNG, then resize it, the Preview app will add back in a load of useless data, meaning your image is not as small as it could be.

Resize > Use TinyPNG > Upload to your site.

 

[Deleted member 59730]

Resize > Use TinyPNG > Upload to your site.

There is a downside to removing metadata from an image. Your image will rank higher in image search if there is good metadata attached. In the event of your image being infringed you will get much higher damages if the infringer removes your name from the metadata.

 

[Paul Murray]

Do you have a link that conforms that? I've heard conflicting opinions about that, and Google hinted that they might use it as a ranking factor. I'd be curious to know for certain if it's been proved.

I actually prefer my images to not rank a lot of the time. Being a designer my work gets lifted and passed off and even sold on quite often, mostly by people in other countries so I don't really want it to be easy to find with a quick Google search. Of course, once it's on somewhere like Tumblr it's all over anyway, and have repeatedly found my logos being used where they shouldn't.

For products, obviously it makes sense to get them ranking, but the old adage of 'if you don't want it stolen, don't put it on the internet' is very much true and image theft is a constant thorn in my side.

 

[Deleted member 59730]

I've heard conflicting opinions about that, and Google hinted that they might use it as a ranking factor. I'd be curious to know for certain if it's been proved.

Google isn't the only search engine. Personally I use Qwant.

I have had experience of people finding my images because of the metadata. If you don't have metadata you need full descriptive text on the page and ideally only one photo per page for an image search to work.

As far as theft is concerned in the UK we have IPEC for copyright cases. For an analysis of how some cases have worked out see.... https://www.create.ac.uk/publicatio...y-enterprise-court-in-historical-perspective/

 

[Its4john]

How do you install/optimise video?

I'd like to put two videos on a website (9 sec long) but they are 18Mb each.

 

[PDQ Funding]

If your site is a wordpress site there is different plugin's you can use to compress the image, smush, for example, this will allow the site back up to speed. Minifying the site is CSS /Java, html will help and use a cache.

Google have a load speed page so this might help to let you see where it is going wrong if any.

 

[Hugh Jampton]

What platform are you using: Wordpress?

If so install the plugin "Smush" as advised above, it will automatically take the images to a compatible size.

If they still come up as too big on GT metrix - Then follow the link from GT and use that resized pic.

 

[Inva]

Do you have a link that conforms that? I've heard conflicting opinions about that, and Google hinted that they might use it as a ranking factor. I'd be curious to know for certain if it's been proved.

I have no proof but it seems to me it's easier to rank somewhere if there's some info to rank for. Without info what are we ranking for?

Regarding the image i agree with the media query proposal. There are simply too many screen sizes these days and image size (kb) doesn't scale.

 

[Richard Patey]

take the 1.2MB and get it to < 200kb for optimal page load for SEO

 

[xoxoseo]

I always use optimizilla.com for size optimization. Here is a good article about pic optimization for web moz com/blog/image-link-building