Advanced Image Component

Community Driven Extensions Project
Post Reply
stefan.sibitz
Posts: 38
Joined: 11 Nov 2016, 09:44

19 Jan 2018, 10:15

I am also using this optimizes in my webproject (Primefaces+Omnifaces)
and so i am reaching nearly 100 percent of ranking from Google PageSpeed's ;-)

The only think which is also not optimal in my site is the point:
"Specify image dimension"

Because often i got big images from marketing with a very large dimension/size/not optimized for web
and on Web using percentage or other width/height sizes also resulting in
bad ranking in this point.

@melloware :
So his could be a new Primefaces-Extension image-component
which resizes images / caches / losless optimize images (quality in percent)
on the server - as an idea ?
------------
Using Wildfly 11.0.0,
Mojarra 2.2.13.SP4

stefan.sibitz
Posts: 38
Joined: 11 Nov 2016, 09:44

19 Jan 2018, 10:17

>> From Meloware:
>>@ssibitz To me that component would be no good as it would have to use CPU to optimize the image every time it was retrieved.
>>Most web guides suggest if you need a 100x100 image don't use a 500x500 an let the browser scale it,
>>actually make a 100x100 version and use that.
>>
>>See this suggestion from Browser Diet: https://browserdiet.com/#scale


Yes, that's in theory right to use images in the right size as suggestion.

But in practice with responsive design or a marketing which only want the biggest image on the start sceeen you don't always have a fix size of images or not the "best" size !
Also on other behavior's that it's very time intensive to re-scale all images to a special size
like in the Primefaces-Demo or in an application where the right size must be evaluated before
and most then it's only set by image-size, but the images are not rescaled.

I dont't think to optimize an image every time,
but once created in an special given folder from the parameters (web.xml)
makes it also possible to easily replace an image without re-deploying.

If the user want then a new image he have to be sure that the "image-caching-folder" is clean.
Then the component will generate images in the given sizes and also generate the style-sheets
for it automatically.

So the component could look something like this:
<pe:OptImage id="OptImage" name="LogonImage" library="images" width="1000" height="auto" minScreenWidth="800"/>
Which generates an image like this in a special folder once the image have to be shown:
LogonImage_1000xauto.jpg

An a stylesheet which hides the image if the screenwidth is smaller than 800px.
------------
Using Wildfly 11.0.0,
Mojarra 2.2.13.SP4

stefan.sibitz
Posts: 38
Joined: 11 Nov 2016, 09:44

19 Jan 2018, 10:19

When you don't want't a component like this in PrimeFaces-Extensions build
i will build a specialized component outside the framework which exactly is doing this.

**Why I am needing this ?**
I need this in my production system to:
* Easily cache an image in a special folder
* Easily replace an image (e.g. background or logon image) by replacing a file and not doing a redeploy
* Easily replace product images of our articles if they are wrong or newer
* I also to generate different image sizes and automatically generate the responding css-styles with breakpoints
* I eventually need to generate Embedded SVG-Images from stored SVG-Images
so that i can manipulate them by using e.g. D3.JS or Raphaël.js
We have to enter dimensions on our product directly and that then can be done
be using the SVG-Images. But currently no component can render SVG-Images in the right way so
that they can be manipulated by SVG-Libraries...
* When Image size is given in percent then recalculate the pixels once and also store it on the special path...

And at last the performance that the browser then has no need to rescale any image
which also is if the user is working with percentage values.
------------
Using Wildfly 11.0.0,
Mojarra 2.2.13.SP4

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

19 Jan 2018, 14:19

So I think the tough part will be storage. Say you have a 700x700 image that the browser is asking for 50x50 with height="50px" width="50px. Your component scales the image to 50x50 and then needs to store it on disk somewhere and know how to retrieve that exact image and size again. So then next time an XHTML page request the 50x50 you need to know how to find that cached image on disk for that particular image that was scaled 50x50. Depending on how many images your site has and how many different times they are scaled you could end up with a cache of thousands of images right?

To me that is one of the bigger challenges you will need to solve.
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Post Reply

Return to “Extensions”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 11 guests