Jump to content


Photo
- - - - -

Flipper image resizing?


  • Please log in to reply
23 replies to this topic

#1 webmatros

webmatros

    Member

  • Members

  • 19 posts
  • LocationCopenhagen
  • Framework Version:DMS latest
  • Country: Country Flag

Posted 26 September 2013 - 06:41 PM

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, 26 September 2013 - 06:42 PM.


#2 batman

batman

    Bat Learning

  • Members

  • 2075 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 26 September 2013 - 08:31 PM

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

;)



#3 webmatros

webmatros

    Member

  • Members

  • 19 posts
  • LocationCopenhagen
  • Framework Version:DMS latest
  • Country: Country Flag

Posted 27 September 2013 - 10:36 AM

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;-)



#4 Danny

Danny

    Is Awesome!

  • Moderators
  • 15788 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 27 September 2013 - 11:56 AM

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.



#5 webmatros

webmatros

    Member

  • Members

  • 19 posts
  • LocationCopenhagen
  • Framework Version:DMS latest
  • Country: Country Flag

Posted 27 September 2013 - 01:23 PM

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.



#6 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 27 September 2013 - 10:24 PM

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



#7 webmatros

webmatros

    Member

  • Members

  • 19 posts
  • LocationCopenhagen
  • Framework Version:DMS latest
  • Country: Country Flag

Posted 28 September 2013 - 06:08 PM

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

 

Thanks!



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 15788 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 29 September 2013 - 11:46 AM

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://searchenginel...-web-site-42177



#9 webmatros

webmatros

    Member

  • Members

  • 19 posts
  • LocationCopenhagen
  • Framework Version:DMS latest
  • Country: Country Flag

Posted 29 September 2013 - 05:49 PM

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.



#10 webmatros

webmatros

    Member

  • Members

  • 19 posts
  • LocationCopenhagen
  • Framework Version:DMS latest
  • Country: Country Flag

Posted 29 September 2013 - 06:16 PM

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.



#11 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 29 September 2013 - 07:40 PM

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.



#12 webmatros

webmatros

    Member

  • Members

  • 19 posts
  • LocationCopenhagen
  • Framework Version:DMS latest
  • Country: Country Flag

Posted 30 September 2013 - 06:42 PM

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.



#13 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 30 September 2013 - 08:01 PM

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.



#14 webmatros

webmatros

    Member

  • Members

  • 19 posts
  • LocationCopenhagen
  • Framework Version:DMS latest
  • Country: Country Flag

Posted 30 September 2013 - 08:11 PM

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



#15 Danny

Danny

    Is Awesome!

  • Moderators
  • 15788 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 06 October 2013 - 09:54 AM

Flipper will have an option to select the image size in an upcoming update. https://github.com/p...9e041e3e55119bf
  • MindMeldCreative likes this

#16 webmatros

webmatros

    Member

  • Members

  • 19 posts
  • LocationCopenhagen
  • Framework Version:DMS latest
  • Country: Country Flag

Posted 06 October 2013 - 09:19 PM

Flipper will have an option to select the image size in an upcoming update. https://github.com/p...9e041e3e55119bf

 

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.



#17 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 06 October 2013 - 09:35 PM

We'll send the developer a note about that.



#18 webmatros

webmatros

    Member

  • Members

  • 19 posts
  • LocationCopenhagen
  • Framework Version:DMS latest
  • Country: Country Flag

Posted 07 October 2013 - 09:03 AM

We'll send the developer a note about that.

Thanks!



#19 Danny

Danny

    Is Awesome!

  • Moderators
  • 15788 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 07 October 2013 - 10:53 AM

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



#20 webmatros

webmatros

    Member

  • Members

  • 19 posts
  • LocationCopenhagen
  • Framework Version:DMS latest
  • Country: Country Flag

Posted 07 October 2013 - 09:28 PM

Yes it does. See the image sizes served here:

http://www.olivernielsen.com/blog

 

Slow for a reason.