Community Forums › Forums › Archived Forums › Design Tips and Tricks › WordPress Image Scaling
- This topic has 3 replies, 2 voices, and was last updated 9 years, 3 months ago by coralseait.
-
AuthorPosts
-
December 18, 2014 at 2:32 pm #134841PorterParticipant
I've been searching the web for a bit now, and I'm not getting any concrete information on this, so I figured I'd ask the community here. How on earth does WordPress image scaling work? Example:
If I upload a 4272x2848 photo to my media library, set that photo as the featured image for an article, and then use that featured image in a custom design (that may or may not perfectly scale to the image resolution) with the_post_thumbnail(), what happens here? Key questions:
-Is the image on the page the full 4MB+ photo, even though it's scaled down? When I right click > save as the photo, I get the full size photo, yet my loading times are fantastic (0.4 seconds for the entire page, no caching).
-Somewhat related to the first, if the photo is scaled down, is this done dynamically before serving the image, and only saved temporarily? I don't see any other sized entries in my media library, so I'm really thrown off by how the page loads so quick with a seemingly 4-5MB photo, even if it is scaled down.
-When the width for the area the photo goes into is 23% of the page, and the height isn't set, I assume only the width is scaled to match, and the width / height ratio is preserved - is this correct?
If anyone could answer those questions, link me to some reading material, or offer a mini crash course on how this all works internally, that would be greatly appreciated.
December 18, 2014 at 8:58 pm #134867coralseaitMemberTypically WP automatically will compress to 90% of original image size. Further, depending on your image size(s) setup, at image save time WP will automatically pre-create all the image sizes you've registered. These may or may not appear in the image settings depending on how the theme / site registered them. Additionally some themes will use tools such as tinthumb to dynamically resize.
To answer your questions in detail we'd need a bit more info on what theme, framework etc you're using.
Also, your page may load quickly if effective caching is enabled and your browser(s) have cached the image already.
You are correct, if I read that right, about width setting with no height and ratio preservation.
December 18, 2014 at 9:10 pm #134869PorterParticipantIt seems it was definitely being cached by the browser, but not from any of my own doing (huge load times on a Shift + F5). That being said, I need to look into creating other sizes, even if automatically as the themes can apparently do.
I'm currently just using the Genesis Sample theme, with a ton of visual customization.
I definitely need to do some more research, as I can't be scaling 4k images to a thumbnail haha. Small side note, that's slightly related, are there any popular plugins / changes to the media library? I find the organization to be quite inefficient, and would love an improved system if available.
December 21, 2014 at 11:23 pm #135043coralseaitMemberHey There,
The browsers will try to cache if they can detect it is possible and depending on your hosting it'll just happen.
Simple Images Sizes is a nice little plugin to create different sizes without coding required. Tbh, I'm not a fan of media manager plugins. Esp right now with the WP team putting a lot into media library you may find whatever you pick breaks with upcoming updates. Plus you can lock yourself in and they are often security targets.
What sort of organisational enhancements are you looking for?
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.