How to Increase the Image Size in Joomla

cpatte7372
cpatte7372 used Ask the Experts™
on
Hello Community,

I have an image that has the dimensions of 2400 x 3104, but when I upload the image into my webpage it keeps on showing up as 646 x 1200.
gjdgCan someone please explain why this is happening?

Cheers

Carlton
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
646v2-1200 is the file name... it is not the image size :)

Author

Commented:
V4n

I know its not the image size. The image size is 2400 x 3104, but as I said when published it still shows up a lot smaller than 2400 x 3104.

I need to know how to make it appear as 2400 x 3104?
Prasadh BaapaatWeb Designer & Developer

Commented:
This is what i understand from your question: you are uploading an image as shown in screenshot...  but when you check it in the site (view it in browser) it is being resized to 1200 pixels wide... correct?

if this is what is happening, then your problem is because of the CSS rule used for 'responsive images' where you set image width to 100%....

You need to check the CSS being applied to the image (or the DIV around it) by using some tools like Firefox / Firebug,

a way to show the full image is to show it in a popup using extension like 'JCE mediabox-popup plugin'.

let me know if I am correct in above assumptions, if correct maybe I will be able to help you.

thanks,
Prasadh
Become a Microsoft Certified Solutions Expert

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

Prasadh BaapaatWeb Designer & Developer

Commented:
Hello cpatte,
the link you have given is for admin back-end... maybe you posted a wrong link...

anyways I checked the site and did not find any OBVIOUS big image which you might be referring to in this question..

let me know more clearly on which page it is so i can help if possible.

Author

Commented:
Hello prasadhbaapaat

Thanks again for responding. Sorry for the delayed response.

The following link shows the image that I would like expand/increase.

http://keyloop.co.uk/index.php/wookbook/exercise-4/ex4-task-1

Can you help?

Cheers
Prasadh BaapaatWeb Designer & Developer

Commented:
The link is taking me to a login page... I guess the link is only visible if you are logged in...

can you take a screenshot and show so at-least I can understand what is the problem with image and if I understand it, only then can I help you :)

Author

Commented:
Hi prasadhbaapaat

You can login with username barlow password barlow1


Cheers
Web Designer & Developer
Commented:
ok... i logged into the site, but its not correct of you giving the login openly on a forum.... please change password or delete login immediately as you read this reply.

well you need to know some basic of how a webpage is displayed on a desktop or any device...

as per your template an area is allotted to show the page or 'Article' content in the component. in your template it is 9 columns wide... & 3 columns are given to the left menu.

now this essentially means that your CONTENT AREA or the image is going to get maximum 9 parts of horizontal space to display itself....  it cannot EXCEED this... whatever size you make the image... even if you make a 10000 pixel wide image, it cannot exceed the viewable area of 9 available parts of the screen width.

moral is its always going to be shown that way... so no use in banging your head on the wall.

ways around it to ENHANCE the user experience:

I checked your 1200 pixels image... as per me it is wasting 300 pixels of  computer real-estate space :-)   check the attached image.
Wasted space in the image
so if you crop your image and use it again.... what is going to happen is that your content READABILITY is going to increase...

check the 2 images for image info ... the image is getting scaled to 885px and 901px in 1200 to 1700 pixels range of resolution.  
as seen on 1280 pixels resolutionas seen on 1680 pixels resolutiongo for increasing 'readability' instead of calculations like my image is 1200 but shown as 900....

if you cut off the wasted 300 pixels from your image, your user is going to see better readable content.

Added advantage will be that your file size is going to drop to 160 kb from 260 kb... saving 100kb in bargain is simply great :-)

try and use the image attached and see how it looks... maybe you can take screenshots and compare if readability has improved or not and then take a decision about what should be the standard size of the image.

let me know if you have any doubts or did not understand anything explained above.
619-1200.jpg

Author

Commented:
prasadhbaapaat

Going to change login information now before reading your response.

Author

Commented:
Wow! prasadhbaapaat

Amazing, amazing response. Thanks so much.

I'm going to crop just as you suggested.

Thanks a lot mate. That really helped.

Cheers

Author

Commented:
Absolutely fantastic solution.

Thank you soooooo much

Author

Commented:
prasadhbaapaat

Your image looks great on my site.

Can you please show me how to go about cropping my images to look like the one you attached.

Alternatively, would you like to submit another question for this?

Cheers
Prasadh BaapaatWeb Designer & Developer

Commented:
Hello cpatte,
Thank you very much for your nice comments to my answer :-)

Yes, sure I will show you how to crop images for website. Do you use Photoshop? as the cropping can be done using Photoshop effectively.

If you do not have Photoshop, then I can show how to do it using some free software.

yes in another question I will answer

let me know.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial