Best practice for images in pages?

[Gnuru]

I use several images in pages articles.

What I am used to with wordpress, is that wp builds different dimensions of thumbnail images for previewing / inserting into the article. When clicking on an image, you can view the full image.

With IPS the image is resized by the client browser and the full image has to be loaded. (Editing the image url in IPS ckeditor by clicking on the image won't save the url to e.g. another full-sized image (uploaded via ftp))

This increases loading time for the end users and produces bad page speed rankings because of the need to load the full sized image in articles.

What would you suggest for best practice using images in pages articles regarding best user experience and high page-speed scores?

[opentype]

… and the full image has to be loaded.

​Not really. I have been complaining about this problem sind 3.4 and luckily Pages now has max-image dimension settings for image/upload fields.

For the editor attachment the global image settings apply and you can also force smaller versions there. 

[Gnuru]

I understand. I think I am doing something wrong:

In one of my article posts, I would like to show an infografik, which is quite large due to it's dimensions.

If I attach this image to my article post it's thumbnailed version is as big as the full sized version.

I don't know if this is a problem or not regarding user experience and pagespeed.

[opentype]

Check the global settings “Maximum image dimensions to save” and “Maximum image dimensions to display”. 

[Gnuru]

Thank you Ralf, this was what I was looking for....

[Gnuru]

ok, now better understand how IPS works with images. I have seen that the "Downloads"-App makes use of the "thumbimage".

If anybody is interested, I modifed the widgets "Lastest records" and "Record Feed" for DB-Entries to show a thumb image like in Downloads

 

This is the template for "LatestArticles"
 

{{if !empty( $records ) }}
	<div class='ipsWidget_title ipsType_reset'>{lang="block_latest_records" sprintf="$database->recordWord( 2, TRUE )"}</div>
	{{if $orientation == 'vertical'}}
		<div class='ipsPad_half ipsWidget_inner'>
			<ul class='ipsDataList ipsDataList_reducedSpacing'>
				{{foreach $records as $record}}
					<li class='ipsDataItem'>  
     				
							 {{if $record->record_image}}
        						 <div class='ipsDataItem_icon ipsPos_top'>
								   {template="thumbImage" group="global" app="core" params="$record->record_image, $record->name, 'tiny'"}
    						     </div>
							{{endif}}
    				

						<div class='ipsDataItem_main'>
                          <!--<div class="ipsCommentCount ipsPos_right {{if ( $record->record_comments ) === 0}}ipsFaded{{endif}}" data-ipsTooltip title='{lang="replies_number" pluralize="$record->record_comments"}'>{expression="$record->record_comments"}</div>-->
							<h3 class='ipsDataItem_title ipsType_break'><a href="{$record->url()->setQueryString( 'do', 'getLastComment' )}"
                            title='{lang="view_this_topic" sprintf="$record->title"}' class='ipsDataItem_title ipsType_break'>{wordbreak="$record->_title"}</a></h3>
						</div>
					</li>
				{{endforeach}}
			</ul>
		</div>
	{{else}}
		<div class='ipsWidget_inner'>
			<ul class='ipsDataList'>
				{template="recordRow" group="listing" location="database" app="cms" themeClass="IPS\cms\Theme" params="null, null, $records"}
			</ul>
		</div>
	{{endif}}
{{endif}}

 

[opentype]

No I started to play with this myself and it’s all really strange. 

1. The Pages upload field has a max image size settings, but it does not work for me. I set a low value and uploaded a large pic. The Pic only appears as the original, large file. But this setting is supposed to discard the original and only save the low-res version, doesn’t it? Bug? Does it work for anyone?
2. The Pages upload field doesn’t have a thumbnail size setting — only the one Record Image has that. So I would expect to have the global thumbnail size settings kick in and create a thumbnail of that size. But I am getting a suspicion that was wishful thinking. Can I even have thumbnails for the Pages upload field? (Other than just CSS scaling)

[Gnuru]

I understand.

Being able to use different thumbnailed versions inside the pages app would be terrific.

[opentype]

Being able to use different thumbnailed versions inside the pages app would be terrific.

​Or one. I don’t even need separate versions as in WordPress, but it seems the Pages upload field doesn’t even offer one. 

[estan]

ok, now better understand how IPS works with images. I have seen that the "Downloads"-App makes use of the "thumbimage".

If anybody is interested, I modifed the widgets "Lastest records" and "Record Feed" for DB-Entries to show a thumb image like in Downloads

 

@Gnuru ​This is exactly what I needed. Thank you!

Now how I can add to this, below the article title, the date added and the user by whom it was added?

[Gnuru]

insert this line where you like

<span class='ipsType_light ipsType_small'>{lang="byline_nodate" htmlsprintf="$record->author()->link()"} &middot; {datetime="$record->mapped('date')"}</span>