Exporting JPGs for website

[thomasrcbeal@gmail.com]

Hello,

I am having trouble getting my JPGs across from gimp to my website without the image being blury.

Could someone give me an idea of the procedure resolution sizes, dimensions etc and how to do it
with the highest quality image (I have a limit of 10mb on the website platform)?

Many thanks in advance!

Thomas

[Ofnuts]

What are the image dimensions? What is the quality settings? Is the image blurry when you see it locally (open the file in Firefox/Chrome or else), or only when seen on the web site?

What is the web site URL, if the image can be seen on it?

[thomasrcbeal@gmail.com]

(04-27-2018, 02:42 PM)Ofnuts Wrote: What are the image dimensions? What is the quality settings? Is the image blurry when you see it locally (open the file in Firefox/Chrome or else), or only when seen on the web site?

What is the web site URL, if the image can be seen on it?

They are 2000 by 3000 when they are exported into gimp. After that I crop them a little. The resolution is 300 after being exported into gimp. The  images do seem blurry on windows photo viewer as it enlarges them to fit the screen.

The URL is   thomasrupertcharliebeal.com

Many thanks

[Blighty]

You are starting with an image 3000 x 2000 pixels. Slightly less after cropping.

On the website the image (Blue Pot in the Afternoon) is 674 x 509 pixels. So there has been significant down sizing. This will introduce blurring.

BTW: A digital image only has a size in pixels. This also applies to images displayed on the web.
The resolution (300dpi) is irrelevant. (It only has relevance when printing on paper - it can determine the print size)
Ofnuts was asking about the quality setting. This is the setting in the jpg export dialogue.

[Ofnuts]

In firefox, right-click>Image info shows this:



So, your image is scaled, and this kind of close-to-original-size is usually poorly handled by the scaling algorithms (that run in the browser).

Your image is scaled because the HTML forces its dimension:

Code:

<img src="/uploads/2/9/6/5/29656787/published/thedrunkenhour2.jpg?1524429985" alt="Photo" style="width:489;max-width:100%" />

So yes, you appear to have it display at its native size, but obviously something is stealing two pixels. But if you want it at its native size, why specify
a size?

[thomasrcbeal@gmail.com]

(04-27-2018, 07:50 PM)Ofnuts Wrote: In firefox, right-click>Image info shows this:



So, your image is scaled, and this kind of close-to-original-size is usually poorly handled by the scaling algorithms (that run in the browser).  

Your image is scaled because the HTML forces its dimension:

Code:

<img src="/uploads/2/9/6/5/29656787/published/thedrunkenhour2.jpg?1524429985" alt="Photo" style="width:489;max-width:100%" />

So yes, you appear to have it display at its native size, but obviously something is stealing two pixels. But if you want it at its native size, why specify
a size?

---

(04-27-2018, 07:50 PM)Ofnuts Wrote: In firefox, right-click>Image info shows this:



So, your image is scaled, and this kind of close-to-original-size is usually poorly handled by the scaling algorithms (that run in the browser).  

Your image is scaled because the HTML forces its dimension:

Code:

<img src="/uploads/2/9/6/5/29656787/published/thedrunkenhour2.jpg?1524429985" alt="Photo" style="width:489;max-width:100%" />

So yes, you appear to have it display at its native size, but obviously something is stealing two pixels. But if you want it at its native size, why specify
a size?

The only time I have changed the size is after exporting it into the website builder (weebly). Would you recommend scaling in gimp to the exact size first?

Could you give me an idea as to the standard way of doing things. Sorry I'm new to this

Many thanks

Thomas

[Blighty]

(04-28-2018, 04:28 PM)thomasrcbeal@gmail.com Wrote: The only time I have changed the size is after exporting it into the website builder (weebly). Would you recommend scaling in gimp to the exact size first?

Could you give me an idea as to the standard way of doing things. Sorry I'm new to this

Somewhere the size has been reduced. From your original of about 3000x2000 to 674x509 on the website. You will have to figure out where that occurred. Maybe weebly automatically reduces the images. Or maybe you specified a size for the html.

Any scaling (especially by such a large amount) will reduce quality. Gimp has an algorithm for reducing images, so does weebly and all web browsers. Whose algorithm is best? Probably not too much difference.

To prevent loss of quality display the images full size ie no scaling at all. Does weebly permit that? Will the image fit in the browser window?