jurian sluiman

{
Switch to
De taal Nederlands is niet beschikbaar. De taal Engels wordt getoond.

Slim afbeeldingen resizen

Als ontwikkelaars willen we het onze gebruikers zo makkelijk mogelijk maken om het Soflomo systeem te gebruiken. Het content management systeem moet voor elke gebruiker te volgen zijn, dus ook voor diegene die geen kennis hebben van het resizen van afbeeldingen (voor bijvoorbeeld het sneller en beter weergeven van de afbeelding).

Hierom is een automatisch resize script een essentieel onderdeel binnen het systeem. Een gebruiker wijst naar een afbeelding van het bestand via een afbeelding dialoog, maar verschillende pagina's vereisen soms verschillende formaten van de afbeelding.

Bij Soflomo hebben we een dergelijke tool gemaakt binnen Sofzo, het Soflomo framework. Het is erg handig voor onze klanten, maar ook frontend webdevelopers zien de voordelen hiervan in.

De rest van dit artikel is in het Engels. Klik hier om verder te lezen.

The programmer's side

Instead of having a html tag like <img src="/img/image.jpg" height="200" width="150">, the height and width of the image is also given as a parameter to the image like <img src="/img/image.jpg?h=200&w=150" height="200" width="150">. Of course you need only to do so if you want to scale the image.

Now it's time to configure the webserver. You pointed to an image, but you want it to be processed by your script. Thus .htaccess all the way. You catch all requests to /img/* and point them towards your php script, e.g. image.php?src=$1&$2. This means the following rule will do the trick for the situation above:

RewriteRule ^img/(.+)$ image.php?src=img/$1 [L,QSA]

Doing such is useful for the not so sophisticated webbrowsers. Some are looking to the image path and find it's a php file instead of the expected image and you don't get your desired result. This way you have very clean html code with normal images inside your image tag, though you have still the control to resize them.

Inside your image.php file you get the source of the image and all the other attributes (thanks to the QSA flag). With GD you can do whatever you want. A good example is the script from Joe Lencioni. He has a tool for image resizing where you're able to determine width, height, crop ratio (so "1:1" for a square crop), sharpening and image caching (including 304 Not Modified headers and ETags, if enabled).

Conclusion

Your webdevelopers want to avoid ugly browser resizing of images. You don't want to interrupt your users because their image size is wrong. You need a tool to resize automatically to the right width, heigt and width/height ratio (by cropping the image). You like to keep the generated html as clean as possible.

An elegant solution is to rewrite all urls pointing to image towards a php file. The file is able to alter the images on demand, returning the new image. Implementing new functions is easy because of the parameterized url, and with server side caching and implementing the right headers, it's fast too.

Reacties

Vincent

You might want to look at PhpThumb. It has lot's of functionalities for resizing, cropping, overlays, etc. It has a pretty smart caching function and you can use it in an image tag. We use different rewrite rules in the .htaccess:

/images/crop/100/200/image/path.jpg
/images/resize/300/200/image/path.jpg

jumski

It is a smart solution for low traffic sites only, bigger sites can have performance issues with this, cause Image processor script must be parsed and executed for every image on the site.

I suggest to create URL schema for processed images and cache them. Then You can write RewriteCond rule to process only files, that are not in cache.

Raw (not processed images are stored here):
raw_img/
Cached images:
img/$WIDTH/$HEIGHT/image.jpg

Your .htaccess could look like this (not tested for bugs!!!):
# we hit cached file
RewriteCond %{REQUEST_FILENAME} -f
RewriteRule ^img/(.+)/(.+)/(.+)$ img/$1/$2/$3 [L,QSA] # we must cache file
RewriteRule ^img/(.+)$ image.php?src=raw_img/$3&widht=$1&height=$2 [L,QSA]

This way we fire up image processor only once per raw image. You should put logic for creating directories in your php script. I hope this would be useful for you.

Plaats een reactie

Als je een gebruiksaccount hebt voor deze site, kan je hier klikken om in te loggen.

Merk op dat een al ingevoerd bericht na het inloggen verwijderd zal zijn!

 
 

Het adres wordt intern opgeslagen maar niet weergegeven op deze site. Ik vraag er alleen om als extra controle.

In het bericht is geen html toegestaan. Een witregel vormt een nieuwe paragraaf en urls krijgen een hyperlink.