INTRO
I have inventory mysql db I pull inventory records from with images. In most cases there is no image for the item so i use the following script to determine if a image exist and if not use a default image.
PROBLEM
Default img takes a while to load when the query results are 100 or more, i.e. 1500. I think this has more to do processing img errors vs loading the same default images. Maybe its processing time looking up all the images(I am inclined to believe it is both). NOTE - If I DO NOT include images - the text results load quickly.
Potential Solution
Page pagination - I prefer another work around
Disable img error reporting - Can I do this with jquery? or is this has to be done in php.
Use a script that does not require as much processing for the image. i.e looking up all the images at once ? - Maybe lazyload jquery plugin would solve this problem. FYI - My query results are displayed in an iframe.
SCRIPT I CURRENT USE
<div class='iimgd radius5'>
<img class='iimg radius5' src='../images/".$results['Description'].".jpg' onerror=\"this.src='../images/default.jpg'\"></div>
.
ANY THOUGHTS ARE APPRECIATED
Related
I try to improve the overall performance of loading time (especially images) with the Google Chrome Lighthouse extension of this website: https://muckenthaler.de/
When the Performance Test is finished I get a list of opportunities, please see this screenshot or test for yourself: https://capture.dropbox.com/YV5ii1vrj0xpfWwK
Under Serve images in next-gen formats are listed some image urls (like this one: https://muckenthaler.de/media/image/54/7c/cb/Sliderbild_Produkte_Steh_SItz_Tische_2.jpg) that don't even appear on the specific page but somehow seem to get loaded into it and affect the performance.
How could I prevent this and why are these image resources loaded?
Here are the WebPageTest results for this page: https://www.webpagetest.org/result/220529_AiDcZP_759/1/details/#waterfall_view_step1
All you need to know from this thumbnail is that yellow rows indicate HTTP redirects and purple bars represent images. The longer the bar, the longer it took for the resource to load.
So we can tell a few things from this waterfall image:
there are many redirects
there are many images
many images take a very long time to load, relative to other resources
When I look up https://muckenthaler.de/media/image/54/7c/cb/Sliderbild_Produkte_Steh_SItz_Tische_2.jpg in the response headers, I see at request 19 that there's a redirect to that image from https://muckenthaler.de/media/image/Sliderbild_Produkte_Steh_SItz_Tische_2.jpg.
Looking up that image in your source code, I see
<img src="https://muckenthaler.de/media/image/Sliderbild_Produkte_Steh_SItz_Tische_2.jpg"
alt=""
loading="eager">
Also note that this content is inside of something called <div class="hidden-elements">. These elements of class emotion--element are set to display: none so that the contents are not shown on screen, but loading="eager" on the images forces them to be loaded.
It seems like maybe your CMS (Shopware) is trying to eagerly preload images that will be used on other pages. That's not a terrible idea if you have a small number of lightweight images and users are very likely to navigate to those pages, but in this case it's loading dozens of images totalling over 30 MB. So definitely not recommended.
According to the CWV Tech Report, Shopware websites tend to only load 2 MB of images and have pretty good Core Web Vitals performance compared to other CMS and ecommerce platforms. That leads me to believe that there might be a misconfiguration on your end, or you may have installed a bad plugin.
First things first, a big thanks to Rick Viscomi for the research!
I found the answer which is basically Shopware 5 hidden elements, that can be shown and then be removed clicking the number next to the chain icon.
Here is a screenshot.
I'm transitioning from WordPress to Gatsby. How should I add multiple images from the file system throughout a one-off page (ex. homepage)?
I like the advantages of the gatsby-image plugin component, but is a graphql query required for each image? The example here only shows one image. In a page with dozens of images a graphql query for each one seems verbose compared to a simple html image tag.
Is a different image component or import technique better in this circumstance?
Thanks!
I ended up using inline require to add images.
<img src={require('../assets/logo.png')} />
I have a developed PHP code to dynamically load files contained in a directory into a gallery / slideshow. I have many (40 - 50) of these gallery web pages which display images grouped by content. With hundreds of images, the dynamic gallery code allows me to add images to a directory without having to write code to each web page each time.
However I've realized that these files will be invisible to search engines since there isn't any HTML code to index on (e.g. the 'alt' tag). Does anyone have any suggestions on how to get these images indexed? Two ideas I've had:
1) Write a program to automatically generate a single web page for every jpeg file which will display the image when found with the search engine and contain a link to the gallery page where the user can see more content. The benefit to this method is not having to modify my live web pages. The downside is hundreds of additional files only to be found by a search engine.
2) Write a program to generate hidden links that can be pasted into my gallery html page - using the alt tag. The benefit to this method is that users would find my main gallery page with a search. The downside is having to cut and paste code to my live gallery web pages - defeating somewhat the purpose of a dynamic gallery.
I'm new at this, so any suggestions would be appreciated.
If I understand you correctly:
I would have one page that just lists thumbnails of pages, and then one page for each of the images, that shows a bigger version of each image, and all the meta-data you have. The best would be if you added a short unique snippet of text to each image, describing what in it.
Problem
I'm doing some maintenance and changes on a Drupal site, but I'm not an expert. My problem is the following. I have a view that produces an HTML table by fetching some field values and putting them into the table columns. One of these field is an image. Unfortunately each image has a different size (images are uploaded by users), and so the overall table looks ugly. I would like to resize/scale images so that they all have the same width. I know I can use CSS to set the image width to a fixed value, and let the height adjust accordingly:
<img src="..." style="width:70px"/>
Unfortunately I don't know how to make Drupal output this custom HTML when processing my view. Currently the produced HTML looks like this:
<img
class="imagefield imagefield-field_imgsmall"
width="100"
height="39"
alt=""
src="http://www.mysite.org/sites/default/files/foobar.png?1292948397">
and I guess this is produced by one of the view's fields (namely field_imgsmall).
First question is: what is that number after the ? in the src URL? And where does it come from? (Each image has a different number in the corresponding src URL)
What I've tried
I've noticed that in the "edit view" mode, when selecting a field, I can check the option Rewrite the output of this field, and there I can mix HTML and substitution patterns. However, I've seen that one of the substitution patterns that's available to me ([field_imgsmall_fid]) is actually producing the entire HTML above ... so I can't customize it.
What can I do? Am I going in a totally wrong direction?
You should look into the imagecache module, which allows you to resize images (and cache the results, so the resizing process rarely happens).
Here's a walkthrough:
http://2bits.com/articles/drupal-using-imagecache-with-views-and-cck-imagefields.html
I know this question might sound a little bit crazy, but I tough that maybe someone could come up with a smart idea:
Imagine you have 1000 thumbnail images on a single HTML page.
The image size is about 5-10 kb.
Is there a way to load all images in a single request? Somehow zip all images into a single file…
Or do you have any other suggestions in the subject?
Other options I already know of:
CSS sprites
Lazy load
Set Expire headers
Downloads images across different hostnames
There are only two other options I can think of given your situation:
Use the "data:" protocol and echo a base64 encoded version of your thumbnails directly into the HTML page. I would not recommend this since you cannot then cache those images on the users browser.
Use HTML5's Web Storage to store all the images as records with the base64 encoded image data stored as BLOBs in a column. Once the database has downloaded to the users machine, use Javascript to loop through all the records and create the thumbnails on the page dynamically using something like jQuery. With this option you would need to wait till the entire database was done downloading on the end users browser, and they will need a fairly modern browser.
I think your best bet is a combination of lazy loading, caching with expires headers and serving images from multiple hostnames.
If the images can be grouped logically, CSS sprites may also work for you in addition to everything above. For example, if your thumbnails are for images uploaded on a certain day...you may be able to create a single file for each day which could then be cached on the users browser.
This is done by using what's called a CSS sprite; a single image with all the other images inside it, with the particular part that's wanted in the html selected by css.
See one tutorial at http://css-tricks.com/css-sprites
It sounds like you want something like SPDY's server push. When the client requests the HTML page (or the first image), SPDY allows the server to push the other resources without waiting for more requests.
Of course, this is still experimental.
You could try the montage command of imagemagick to create a single image.