Hi @JoomlaBamboo,

I use almost all your extensions and love the work you do. (Which you probably know from all my annoying typography posts;))

However, today while searching if you had anything about SVG images, I found this article:

docs.joomlabamboo.com/using-joomla/intermediate-joomla/resizing-images-for-your-joomla-website

The article is about resizing images for a Joomla site, or the web in general. I'm a bit disappointed that it reinforces a very common misunderstanding about images; that DPI has any meaning what so ever as long as the image remains digital.

Quote:
DPI, dots per inch, has no bearing whatsoever for digital reproduction, as obviously, you cannot control how many pixels per inch is displayed on a computer screen. A 13 inch Macbook Pro has a resolution of 1280x800, which gives an intrinsic max DPI of that particular screen 116.1 PPI/DPI. So, if you would say the image is 72 dpi, you would have to change the resolution of the computer screen, right? That simply doesn't happen. What you do do, is control the absolute number of pixels the image consists of, i.e 600x400.

The DPI is just a setting determining at what DPI it should be PRINTED, if ever so. Cause for printers, you can control the outputted DPI.

Somehow, I'm sure you know this. But still, this article is there. The only important thing for the web regarding image size is pixels, and I think the article should be updated to reflect that. I know that if you enable "Resize image" in Photoshop and change the DPI, the number of pixels will fall, but it's still a very random way to go about things.
The more sensible thing to teach would be to have people measure what pixel width/height they have where the image should fit, and scale accordingly.

Different PPI (Pixels Per Inch) for different screens:
members.ping.de/~sven/dpi.html

Best regards
Olov

Hi Olov

You're right it should be ppi rather than dpi and I wrote it.
I should have known better - I work both in a photo restoration and web world

However I think the main point still stands that many users have images on their sites at 300ppi which slows sites down massively.

Many users also do resize images in side articles which again slows down sites and can cause rendering issues.

Also bandwidth on mobile devices can be limited and search engines reward fast loading sites.

I will change the article later today to reflect your point - especially as some pics seen to have disappeared

Thanks
Paul

paulus103 wrote:
Thanks for your answer but, no, no. It wasn't about semantics on DPI vs PPI, even that's also a point.

My point is PPI or DPI has no bearing on the web at all. The only thing that matters is pixels in absolute numbers.

You can not control how many pixels per inch a computer screen will display, that's a set value. What would happen if you had two images on the same screen, one at 72 ppi and one at 50 ppi? Would the portion of the screen where the 50 ppi image currently is viewed magically change to have fewer pixels displayed per inch than the portion which displayed the 72 ppi image?

It simply does not work that way. DPI is only with regards to print. Like I said, I know if you change the DPI value in Photoshop with the "Resample image" setting on, the absolute pixel values will change accordingly to match the set document size.

There are numerous articles on this. Attached is two images, where one is set to 300 DPI, and the other to 72 dpi. The filesize is the same, 3 kilobytes, and they display at the exact same size, because they are both 500x160 pixels.
The only difference the DPI setting will have, is if the images were printed, they would tell the printer to print at a specific DPI, and hence, the 500x160 pixels would fill different physical sizes of a paper. Experiment some with it and I think you will know what I'm draveling about





Kind regards
Olov

Hi Olov,

The main thrust of this article was to help people deal with image related issues

e.g. too bigger a filesize will cause script load issues - invalid files will cause pics not to load or not load consistently cross browser or fail in extension image handling

Also help people address issues that are listed in page load speed testers regarding image handling - e.g. in browser image re-sizing and image loading speeed

I did write a lot more regarding image re-sizing but cut that down which is where the error came from regarding dpi vrs ppi.

I also wanted it to be as simple as possible for people and fit one paragraph

Thanks
Paul

I understand that it's hard to write well and still short.
But to be fair, if people just change the PPI value the file size will not change, which is what's central to the article. It's all about absolute pixel numbers, and compression.

I'd guide people to find out what pixel dimensions the image needs to be, i.e 960 pixels for a standard full width slideshow to fit most Zen grid templates, or to use the built-in Firefox Web inspector possibilites of showing column/paragraph widths. There's also great apps to measure screen dimensions, like xScope for Mac, and other free cross-platform apps that is nice for these kinds of things.

www.makeuseof.com/dir/foxguide-quickly-measure-pixel-dimensions-webpage-elements-firefox/

Hi

I've amended the text

Thanks
Paul

Thanks for the feedback here as well.

I agree with you and seems that i should have proof read that post better.

Issue fixed now anyway

Anthony

Sorry to be incredibly annoying, but to me, the article still states the ppi/dpi stuff. Maybe I'm just mindboggingly bad at explaining what I mean.

I'm not gonna push it anymore anyhow now, or I may get a very special price for my subscription next time eh

We will double your subscription

Thanks
Paul

Hehe well I added a month to your sub at any rate

Thanks

Ah. Nice job on the article. Glad you deal with these kinds of comments so professionally. Thanks for your time!

Thanks

And thanks for the feedback

Paul