Sign in to follow this  
Followers 0

Flipper image resizing?

24 posts in this topic

Posted (edited) · Report post

Hello there:)

 

Why doesn't Flipper resize the image files? Makes this page a 22MB download for 6 posts!

 

http://www.olivernielsen.com

 

- been searching these forums to no avail.

 

Oliver

Edited by webmatros

Share this post


Link to post
Share on other sites

Posted · Report post

Hi webmatros

Flipper use your features image.

You have one image in "Rosi post" (for example) with a size 4.288 x 2488 px,

The other image have 1175x784 px 

Please, you can verify this, I suppose that this first image is one of the problem.

 

You can upload the features image with a smaller size or lower resolution (only this).

 

One more, excellent photos Oliver

;)

Share this post


Link to post
Share on other sites

Posted · Report post

Hi webmatros

Flipper use your features image.

You have one image in "Rosi post" (for example) with a size 4.288 x 2488 px,

The other image have 1175x784 px 

Please, you can verify this, I suppose that this first image is one of the problem.

 

You can upload the features image with a smaller size or lower resolution (only this).

 

One more, excellent photos Oliver

;)

 

I know that it's using the featured images. But it's outputting the original size images. The ones that were uploaded. Flipper should dynamically create som resized versions. That's what any sensible theme would do: use something like popthumb.php to generate sizes appropriate for the layout.

 

I can't let DMS dictate the size of my featured images, they may be used elsewhere on a site, in sizes larger than the Flipper thumbs.

 

PS: Thanks re: my images;-)

Share this post


Link to post
Share on other sites

Posted · Report post

HI,

 

If you plan on using images that are 16MB in size, I highly recommend you use a CDN. You shouldn't be using an image over 250KB for your Posts Featured image in my opinion.

 

I have created an enhancement issue on our tracker regarding the use of thumbs in Flipper. However, your images are too large to begin with.

Share this post


Link to post
Share on other sites

Posted · Report post

HI,

 

If you plan on using images that are 16MB in size, I highly recommend you use a CDN. You shouldn't be using an image over 250KB for your Posts Featured image in my opinion.

 

I have created an enhancement issue on our tracker regarding the use of thumbs in Flipper. However, your images are too large to begin with.

 

Hi Danny

 

I can't see why you'd write that? I don't use images that are 16mb. The images in question are around half a MB.

 

Still, it's to be expected that a theme/framework (or DMS if you prefer) generates the needed image sizes, dynamically. Can't think of any WP theme I've come across since 2008 that doesn't take care of this, for the user.

 

Most people (as in: clients) have little idea about image dimensions. And they can't be expected to remember that that I've once told them that their featured images needs to be 331 x 193 pixels, and if they happen to upload an image straight from their iPhone, at 8MP, it will bog down the server and make their site load extremely slowly on mobile connections.

 

Gotta be fixed.

 

A CDN is a good idea, I actually do use one, but truthfully it isn't set up to cache images (only JS and CSS) right now. But a CDN isn't a solution to images that aren't resized as they should.

Share this post


Link to post
Share on other sites

Posted · Report post

Danny has reported this directly to dev team via the bug tracker, who will look into this further :-)

Share this post


Link to post
Share on other sites

Posted · Report post

Okay, that's good to hear. Please keep me posted (this thread will be a fine place to do so).

 

Thanks!

Share this post


Link to post
Share on other sites

Posted · Report post

When I first viewed your webiste, nearly every image on your site is well over 600KB, as Batman mentioned above, your Rosi post featured image is 16.2MB, that is far to large of an image to be used as your featured image.

 

As far as Flipper should be using thumbs, I am half and half on it doing so. I can understand why you would want it to use thumbs, but at the same time, its not a replacement for your Post Loop. It acts like a slider, sliders generally don't use thumbs for their images.

Either way, I have reported this as a feature enhancement, so our developers are aware of this request. In the meantime, I recommend you either download an app called JpegMini or use the services Kraken or Smush.it to reduce your image sizes, they're still far to large.

For example - http://d.pr/i/pAy8

That is a posts featured image, I have 120mb and it takes me a nearly half a second to load that image, which is too long. Large images without the use of a CDN, will make your site load slow, which will also effect your sites SEO slightly, as Google rates any website that takes longer than 1.5 seconds to load as slow. See here for more info - http://searchengineland.com/googles-push-to-speed-up-your-web-site-42177

Share this post


Link to post
Share on other sites

Posted · Report post

Hey Danny

 

Yes, 16MB is a too large an image-file for WordPress-upload. I was lazy.

 

I know about Smush.it etc. I'm aware that *original image files* are too large for the web. I always compress my images properly with Adobe Fireworks and TinyPNG.org.

 

I mostly upload featured / post images in large sizes, because I expect the theme, framework, DMS, post loop, Flipper, whatever; to resize the images to the exact sizes needed for proper display. Larger files (input) gives a better resize result (output) since the there's more data for the resizing algo to work with. Additionally, it gives me peace of mind knowing that when retina screens become the norm, I can regenerate the WP image sizes (thumb, medium, large) because the original files are large enough.

 

I switched to DMS from Headway on this particular site. Headway and all available content output plugins (Article Builder, Pin Board and Excerpts+) properly resize images for front-end display. So it was never a problem with Headway.

 

Flipper being a slider? Okay, can you please recommend me an alternative that's meant to output featured posts in a grid like, flexible fashion? Preferably one that makes use of a resizing script;) I haven't been able to find one for DMS, so would be could if you could point me to it. Thanks.

 

PS: I already pointed out that I do use a CDN;) You just can't see it without looking at the http headers (it's CloudFlare).

 

Anyway, thanks for reporting to the developers.

Share this post


Link to post
Share on other sites

Posted · Report post

Just found out that it isn't even just Flipper that's outputting the original image files when displaying featured images. The content post loop section does it as well. Highly problematic, if you ask me.

 

What's one to do then? Upload images adequate for one or the other? No matter what, the image size will be too big, or too small.

 

This is DMS not doing what it should. It should rightfully resize the images, for proper optimal display, in each instance. That's what pretty much any other theme/framework does.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

 

These forums are packed with my conversations with people about image scaling, sizing and cropping.

 

While WP has excellent scaling capacity, for the display of images, two facts remain constant:

1.  If the featured image, or any image added to WP is a large file size, the file size does not change even if the visible image is resized. So, your 16Mb file which is 4288 x 2488px is still 16Mb even if it is visible at 600px wide. Keep in mind that a 16Mb featured image will be very slow to load on every blog page, search result, category or archive page, as well as in the post itself. People will simply not wait for that to load.

2.  Some browsers (IE, for example) don't handle the WP scaling capacity, no matter what theme/framework/platform is used.  IE doesn't like to rescale. So, if a visitor is viewing in IE, they're going to see a thumbnail, potentially 3.5x wider than their monitor. That's just not good planning.

 

The solution is to use a graphics editor to resize to a more practical image- and file-size.

 

As for Flipper, postloop, etc., as I point out, the handling of image scaling presumes a reasonable image size to begin with, and Flipper will scale within the context of responsive design, but when it comes to scaling from 300K up to a manageable visible size, it can and will, but the file size remaining the same will mount up.  Imagine 10 images, each of 1Mb... the page load from Flipper alone will be 10Mb, plus a background image, etc.  That just loads too much memory into the browser and causes the server to pull so much that the site slows down.

 

So, Danny's correct. Any featured image or post image should really not exceed 250Kb.

Share this post


Link to post
Share on other sites

Posted · Report post

One Smart Egg >

 

You totally miss the point here.

 

I am not talking about WordPress image scaling (which happens upon image upload). And I am not talking about CSS scaling, ehich happens in the browser.

 

I am talking about adding a resizing script to DMS, so that it creates the optimal image sizes, specifically for each instance.

 

Have you ever heard of phpthumb.php? http://phpthumb.sourceforge.net

That is the kind of script that should be added to DMS.

 

Take a look at my Headway driven site:

http://www.webmatros.com

 

The 9 post featured images are all resized by Headway. Those images were uploaded at a size around 800x400 pixels or so. They're dynamically (!) resized to fitting sizes, that in this instance are 380x263 pixels. No more, no less. Those files ARE being served by the server AT THAT SIZE. It is NOT the 800x400 being shown at 380x263 set via CSS width and height.

 

THAT is the way it should be done. THAT is the way any theme/framework I've come across since 2008 will handle such a case.

 

I can't explain the same thing again, so if you still don't get it, I give up. Not being snarky, but you keep repeating basic stuff. I made my first website in 1998 and have coded several WordPress themes from scratch. My formal education is in graphic design. First Photoshop version I used was Photoshop 1.5 back 1998 or so... So yes, I do know that files for the web need to be compressed and properly sized. But the problem here is that I expect DMS to resize the images (like any other sensible theme would do) - which it doesn't.

 

Oliver

 

 

Hi,

 

These forums are packed with my conversations with people about image scaling, sizing and cropping.

 

While WP has excellent scaling capacity, for the display of images, two facts remain constant:

1.  If the featured image, or any image added to WP is a large file size, the file size does not change even if the visible image is resized. So, your 16Mb file which is 4288 x 2488px is still 16Mb even if it is visible at 600px wide. Keep in mind that a 16Mb featured image will be very slow to load on every blog page, search result, category or archive page, as well as in the post itself. People will simply not wait for that to load.

2.  Some browsers (IE, for example) don't handle the WP scaling capacity, no matter what theme/framework/platform is used.  IE doesn't like to rescale. So, if a visitor is viewing in IE, they're going to see a thumbnail, potentially 3.5x wider than their monitor. That's just not good planning.

 

The solution is to use a graphics editor to resize to a more practical image- and file-size.

 

As for Flipper, postloop, etc., as I point out, the handling of image scaling presumes a reasonable image size to begin with, and Flipper will scale within the context of responsive design, but when it comes to scaling from 300K up to a manageable visible size, it can and will, but the file size remaining the same will mount up.  Imagine 10 images, each of 1Mb... the page load from Flipper alone will be 10Mb, plus a background image, etc.  That just loads too much memory into the browser and causes the server to pull so much that the site slows down.

 

So, Danny's correct. Any featured image or post image should really not exceed 250Kb.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi webmatros - We've consulted with the developers and wanted to let you know we're working on a fix to be able to choose a different image size for the Flipper. (see example at http://screencast.com/t/z4Zs8snC1) Once we've done a little more testing, be on the lookout for it to be implemented in a future DMS update.

Share this post


Link to post
Share on other sites

Posted · Report post

Nice to hear Jake, thanks for letting me know. Much appreciated:)

Share this post


Link to post
Share on other sites

Posted · Report post

Flipper will have an option to select the image size in an upcoming update. https://github.com/pagelines/DMS/commit/9669607e5402b20005ad099d39e041e3e55119bf

 

Great to see Danny. Thanks for updating me on the issue. I'm glad it will be fixed.

 

If you haven't already, consider doing the same for the content/post loop section. It exhibits the same problem.

Share this post


Link to post
Share on other sites

Posted · Report post

We'll send the developer a note about that.

Share this post


Link to post
Share on other sites

Posted · Report post

We'll send the developer a note about that.

Thanks!

Share this post


Link to post
Share on other sites

Posted · Report post

Great to see Danny. Thanks for updating me on the issue. I'm glad it will be fixed.

 

If you haven't already, consider doing the same for the content/post loop section. It exhibits the same problem.

 

No it doesn't ?

http://d.pr/i/pyG2

Share this post


Link to post
Share on other sites

Posted · Report post

No it doesn't.

 

You site is slow, because as I have already informed you, you're using an image that is 4288 × 2848 as a Featured Image for your post. That image is 16.2MB and the option you're using is "On Top" which uses the Full Sized Image.

 

http://d.pr/i/CmJi

 

So you have two options:

 

1. Reduce the size of your image so that it is not 16.2MB in size or 4288 × 2848 dimensions (highly recommended). A Featured Image shouldn't and doesn't need to be size.

 

2. If you do not like how the "On Top" option works, change to Left Justified, Left, in Excerpt or Right in Excerpt, as these three options use the Thumbnail and not the full sized image like On Top.

Share this post


Link to post
Share on other sites

Posted · Report post

I understand what you're saying. Have been from the start.

 

But let me repeat: I expected DMS to dynamically create the exact, needed size, since that's what I'm used to from any WooThemes theme, Headway, Genesis, etc. Themes not dynamically making a proper thumbnail for featured images, is something I haven't encountered since 2009 or so. Apart from DMS. So please excuse me, and stop adressing me as if I'm dumb. I've already pointed out several times I know what you're saying, so stop repeating it ad nauseam, please;)

 

Yes, I could reupload my images. And that would probably be more time-efficient for me. Why do I spend so much time on this issue, debating it here? Because I want DMS to work better. Because I need DMS to work flawlessly for clients. In a way, I'm doing you a service by pointing out a design flaw in DMS.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi there

There are so many useful information here

For image resising ,i usually use another image size zooming tool.But it can only zoom in and out image in wep page.So i want to know is there

any powerful third party program supportst to resize image offline?Thanks for any recommendation.

Share this post


Link to post
Share on other sites

Posted · Report post

I am by no means addressing you as though you're dumb, but you haven't understood what I wrote above. WooThemes, Headway, Genesis etc.. do not create dynamic image sizes, these are created by Wordpress and not the theme (unless they have added extra code, which I don't think they have). When you use the Featured Image option, the image is generated a number of times (this may depend on your image) with different sizes.

 

your-image-name-150x150.jpg

your-image-name-300x300.jpg

your-image-name-400x400.jpg

These images can be found in your uploads folder unless you changed it and there can be more sizes that depend on your image original dimensions.

 

However, your original question was this:

 

Why doesn't Flipper resize the image files? Makes this page a 22MB download for 6 posts!

 

Your page is that large because of your image sizes, which are just far to large. Now, Flipper has been updated to allow you to select which image.

 

However, regardless if Wordpress generates numerous sizes of your images or not, your images are far to large to begin with, like I have shown you in a previous post 16.2mb for one image is just too large. You need to reduce these images, it is not the themes or Wordpress job reduce your image for you, that is why there are numerous image optimization services and apps out there, you can even use Adobe Photoshop or GIMP.

 

Wordpress also has an article on this very subject in it's condex - http://codex.wordpress.org/Image_Size_and_Quality

 

Now, as for the reason why you have a 16.2mb file as your blogs post thumb, this is because you're using the "On Top" option which uses the full size image, if you use any other option your image will not be this large as it will use a thumb.

 

So I will speak to one of developers and ask them. However, I remember a similar question being brought up a few years ago regarding this and there was a reason as to why it was using the full size image.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0